← back to 1930swallpaper
chore: untrack 30 .bak/.pre- snapshot files, broaden .gitignore to exclude them
dba6a4bfaa62c7a39f10c78228e3ab657d1bd9b1 · 2026-05-19 08:25:25 -0700 · SteveStudio2
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
M .gitignoreD data/products.json.bak.dwscrub.1778220082330D data/products.json.bak.tagscrub.1778220122385D public/hero-bg.jpg.pre-pass9.bakD public/index.html.bak.1778114769296D public/index.html.bak.1778117945086D public/index.html.bak.1778124816336D public/index.html.bak.1778166279709D public/index.html.bak.1778185356229D public/index.html.bak.btn.1778168679402D public/index.html.bak.btn2.1778169410195D public/index.html.bak.dom.1778168197432D public/index.html.bak.dwfoot.1778203445597D public/index.html.bak.gtagev.1778426582777D public/index.html.bak.ns-canonicalD public/index.html.bak.nspropagate.1778201378049D public/index.html.bak.nspropagate.1778203385035D public/index.html.bak.nspropagate.1778209714999D public/index.html.bak.nspropagate.1778226815104D public/index.html.bak.nspropagate.1778226888759D public/index.html.pre-corner-mark-fix.bakD public/index.html.pre-pass10.bakD public/index.html.pre-pass11.bakD public/index.html.pre-pass13.bakD public/index.html.pre-pass5-serif.bakD public/index.html.pre-pass7-override.bakD public/index.html.pre-pass9.bakD public/index.html.pre-sort-frontendD server.js.bak.1778117945085D server.js.pre-pass12.bakD server.js.pre-sort-skill
Diff
commit dba6a4bfaa62c7a39f10c78228e3ab657d1bd9b1
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date: Tue May 19 08:25:25 2026 -0700
chore: untrack 30 .bak/.pre- snapshot files, broaden .gitignore to exclude them
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
.gitignore | 6 +
data/products.json.bak.dwscrub.1778220082330 | 4373 -----------------------
data/products.json.bak.tagscrub.1778220122385 | 4373 -----------------------
public/hero-bg.jpg.pre-pass9.bak | Bin 372450 -> 0 bytes
public/index.html.bak.1778114769296 | 630 ----
public/index.html.bak.1778117945086 | 649 ----
public/index.html.bak.1778124816336 | 676 ----
public/index.html.bak.1778166279709 | 654 ----
public/index.html.bak.1778185356229 | 731 ----
public/index.html.bak.btn.1778168679402 | 663 ----
public/index.html.bak.btn2.1778169410195 | 664 ----
public/index.html.bak.dom.1778168197432 | 663 ----
public/index.html.bak.dwfoot.1778203445597 | 969 -----
public/index.html.bak.gtagev.1778426582777 | 977 -----
public/index.html.bak.ns-canonical | 984 -----
public/index.html.bak.nspropagate.1778201378049 | 731 ----
public/index.html.bak.nspropagate.1778203385035 | 954 -----
public/index.html.bak.nspropagate.1778209714999 | 969 -----
public/index.html.bak.nspropagate.1778226815104 | 971 -----
public/index.html.bak.nspropagate.1778226888759 | 973 -----
public/index.html.pre-corner-mark-fix.bak | 676 ----
public/index.html.pre-pass10.bak | 676 ----
public/index.html.pre-pass11.bak | 676 ----
public/index.html.pre-pass13.bak | 936 -----
public/index.html.pre-pass5-serif.bak | 647 ----
public/index.html.pre-pass7-override.bak | 663 ----
public/index.html.pre-pass9.bak | 664 ----
public/index.html.pre-sort-frontend | 857 -----
server.js.bak.1778117945085 | 110 -
server.js.pre-pass12.bak | 143 -
server.js.pre-sort-skill | 159 -
31 files changed, 6 insertions(+), 27811 deletions(-)
diff --git a/.gitignore b/.gitignore
index 9ae81e0..10c080a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,9 @@ venv/
*.swp
.qodo/
out/
+
+# editor / refactor-pass snapshot artifacts — never commit these
+*.bak
+*.bak.*
+*.pre-*
+*.orig
diff --git a/data/products.json.bak.dwscrub.1778220082330 b/data/products.json.bak.dwscrub.1778220082330
deleted file mode 100644
index c0fc20b..0000000
--- a/data/products.json.bak.dwscrub.1778220082330
+++ /dev/null
@@ -1,4373 +0,0 @@
-[
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12905",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12905",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/9ccc6e8f1d2d741b91faf46f439bd12f.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gold",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12905"
- },
- {
- "sku": "versace-medals-colorful-metallic-wallcovering-versace",
- "handle": "versace-medals-colorful-metallic-wallcovering-versace",
- "title": "Versace Medals Colorful, Metallic Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/1dc3167f1f2f38b43c1a57090aaabb58.jpg?v=1773706439",
- "tags": [
- "A.S. Création",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Black",
- "Blue",
- "Butterfly",
- "Class A Fire Rated",
- "Color: Gold",
- "Colorful",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Floral",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Haute Couture",
- "Italian",
- "Light Blue",
- "Light Pink",
- "Living Room",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Medallion",
- "Multi",
- "Navy",
- "Navy Blue",
- "Off-white",
- "Paste the wall",
- "Purple",
- "Red",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace Medals",
- "Versace VI",
- "Vinyl",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 407.24,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/versace-medals-colorful-metallic-wallcovering-versace"
- },
- {
- "sku": "mazarin-by-innovations-usa-dwc-mazarin-2",
- "handle": "mazarin-by-innovations-usa-dwc-mazarin-2",
- "title": "Mazarin | Innovations USA",
- "vendor": "Innovations USA",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Mazarin-2_ee17036b-dd15-48cd-aea5-90415ce212ac.jpg?v=1736199305",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "ASTM E84",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Dark Gray",
- "Geometric",
- "Gold",
- "Innovations USA",
- "Mazarin",
- "Mazarin-2",
- "Non-woven",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/mazarin-by-innovations-usa-dwc-mazarin-2"
- },
- {
- "sku": "ncw4352-03",
- "handle": "ncw4352-03",
- "title": "Les Indiennes Bonnelles Aqua - Blue Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264312371.jpg?v=1775520523",
- "tags": [
- "Architectural",
- "Art Deco",
- "Blue",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Leaf",
- "Light Blue",
- "NCW4352-03",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-03"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72380",
- "handle": "vaticano-durable-vinyl-dur-72380",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72380-sample-clean.jpg?v=1774485285",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Burgundy",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Red",
- "Commercial",
- "Commercial Wallcovering",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Maroon",
- "Modern",
- "Paper",
- "Red",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72380"
- },
- {
- "sku": "dwc-1001642",
- "handle": "dwc-1001642",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310111795.jpg?v=1775521311",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Ashen",
- "Black",
- "Class A Fire Rated",
- "Cocoa",
- "Commercial",
- "Geometric",
- "Gold",
- "Mushroom",
- "NCW4352-06",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Silver",
- "Wallcovering",
- "Walnut",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001642"
- },
- {
- "sku": "eur-80367-ncw4353-designer-wallcoverings-los-angeles",
- "handle": "eur-80367-ncw4353-designer-wallcoverings-los-angeles",
- "title": "Colbert 03 - Off-White Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505562675.jpg?v=1775523639",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Blue",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Colbert",
- "Commercial",
- "Dark Brown",
- "Gold",
- "Hallway",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Mid-century",
- "Mid-century Modern",
- "Multi",
- "NCW4353",
- "NCW4353-03",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Off-white",
- "Organic",
- "Organic Modern",
- "Paper",
- "Taupe",
- "Teal",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80367-ncw4353-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwc-1001643",
- "handle": "dwc-1001643",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310144563.jpg?v=1775521318",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Coral",
- "Gray",
- "NCW4353-01",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Pink",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001643"
- },
- {
- "sku": "highland-wonder-lagoon-wp-clarke-and-clarke",
- "handle": "highland-wonder-lagoon-wp-clarke-and-clarke",
- "title": "Highland Wonder/Lagoon Wp | Clarke and Clarke",
- "vendor": "Clarke and Clarke",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W0202_01_CAC.jpg?v=1777020004",
- "tags": [
- "Animal",
- "Art Deco",
- "Bedroom",
- "Bohemian",
- "Botanical",
- "Brown",
- "Clarke and Clarke",
- "Eclectic",
- "Green",
- "Kravet",
- "Living Room",
- "New Arrival",
- "Nursery",
- "Office",
- "Origin: United Kingdom",
- "Print",
- "Scenic",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 1313.55,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/highland-wonder-lagoon-wp-clarke-and-clarke"
- },
- {
- "sku": "minetta-contemporary-durable-vinyl-xwj-52463",
- "handle": "minetta-contemporary-durable-vinyl-xwj-52463",
- "title": "Minetta Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ruche-tucked.jpg?v=1777480627",
- "tags": [
- "1970s Retro",
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Teal",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Leed Walls",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Mid-century Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Vinyl Wallcoverings",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/minetta-contemporary-durable-vinyl-xwj-52463"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53486",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53486",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53486-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732858",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Off-white",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53486"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72384",
- "handle": "vaticano-durable-vinyl-dur-72384",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72384-sample-clean.jpg?v=1774485305",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Linen",
- "Living Room",
- "Sophisticated",
- "Taupe",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72384"
- },
- {
- "sku": "cubism-drive-hlw-73044",
- "handle": "cubism-drive-hlw-73044",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73044-sample-clean.jpg?v=1774483184",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73044"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201049",
- "handle": "hollywood-tower-deco-xhw-201049",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-panache_e3a09dfc-8b72-4c0a-a67a-e95ca7f9edf6.jpg?v=1777481348",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Taupe",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201049"
- },
- {
- "sku": "dwkk-129274",
- "handle": "dwkk-129274",
- "title": "W3797-5 Blue | Kravet Design | Candice Olson Collection |Modern Wallcovering Print",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3797_5_48f07304-21a2-427e-82c1-dffe7cbe25a8.jpg?v=1753291880",
- "tags": [
- "27In",
- "Abstract",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Blue",
- "Candice Olson Collection",
- "Cellulose - 51%;Polyester - 19%;Binder - 17%;Mineral Fillers - 13%",
- "Class A Fire Rated",
- "Commercial",
- "display_variant",
- "Kravet",
- "Kravet Design",
- "Light Blue",
- "Modern",
- "Non-Woven",
- "Pattern",
- "Print",
- "United States",
- "W3797-5",
- "W3797.5.0",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129274"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47774",
- "handle": "halifax-specialty-wallcovering-xlk-47774",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47774-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715724",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gray",
- "Grey",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47774"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201052",
- "handle": "hollywood-tower-deco-xhw-201052",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-marquise.jpg?v=1777480924",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Chevron",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Paper",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201052"
- },
- {
- "sku": "dwss-72661",
- "handle": "dwss-72661",
- "title": "Bok dark green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-88_image1_d2b56bdf-a554-4a3e-a951-44c3e05b6bb2.jpg?v=1646104981",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok dark green Sample",
- "Class A Fire Rated",
- "Commercial",
- "DARK GREEN",
- "Dark Seagreen",
- "Geometric",
- "P710-88",
- "Paper",
- "Pattern",
- "Sandberg",
- "Seagreen",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72661"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8051",
- "handle": "xara-s-retro-geometric-scr-8051",
- "title": "Xara's Retro Geometric",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/730f81f7d70414a9bc3a73d2006cbc59.jpg?v=1572309105",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Luxury Screen Printed Wallpapers",
- "Paper",
- "Red",
- "Red Stone",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8051"
- },
- {
- "sku": "mazarin-by-innovations-usa-dwc-mazarin-1",
- "handle": "mazarin-by-innovations-usa-dwc-mazarin-1",
- "title": "Mazarin | Innovations USA",
- "vendor": "Innovations USA",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Mazarin-1_edfc11b0-96d7-4d28-87db-3f6018631fd1.jpg?v=1736199308",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "ASTM E84",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Slategray",
- "Geometric",
- "Gold",
- "Innovations USA",
- "Mazarin",
- "Mazarin-1",
- "Non-woven",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/mazarin-by-innovations-usa-dwc-mazarin-1"
- },
- {
- "sku": "dwss-72660",
- "handle": "dwss-72660",
- "title": "Bok dark blue Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-86_image1_7e2d01fe-c590-4118-9790-8df5271c12fd.jpg?v=1646104978",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok dark blue Sample",
- "Class A Fire Rated",
- "Commercial",
- "DARK BLUE",
- "Geometric",
- "P710-86",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72660"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72379",
- "handle": "vaticano-durable-vinyl-dur-72379",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72379-sample-clean.jpg?v=1774485280",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Minimalist",
- "Modern",
- "Office",
- "Paper",
- "Royal Blue",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72379"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72383",
- "handle": "vaticano-durable-vinyl-dur-72383",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72383-sample-clean.jpg?v=1774485300",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Brown",
- "Burnt Sienna",
- "Class A Fire Rated",
- "Color: Red",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Orange",
- "Paper",
- "Red",
- "Russet",
- "Sophisticated",
- "Terracotta",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72383"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47777",
- "handle": "halifax-specialty-wallcovering-xlk-47777",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47777-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715800",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gray",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Living Room",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47777"
- },
- {
- "sku": "dwc-1001648",
- "handle": "dwc-1001648",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310406707.jpg?v=1775521350",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Art Nouveau",
- "Beige",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Light Gray",
- "NCW4353-06",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Taupe",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001648"
- },
- {
- "sku": "ncw4352-04",
- "handle": "ncw4352-04",
- "title": "Nina Campbell Wallcoverings - Ecru Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264345139.jpg?v=1775520530",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Cream",
- "Geometric",
- "Gold",
- "NCW4352-04",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-04"
- },
- {
- "sku": "minetta-contemporary-durable-vinyl-xwj-52460",
- "handle": "minetta-contemporary-durable-vinyl-xwj-52460",
- "title": "Minetta Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ruche-smocking.jpg?v=1777480623",
- "tags": [
- "1970s Retro",
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Charcoal Gray",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Lavender",
- "Leed Walls",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Mid-century Modern",
- "Pale Lavender",
- "Purple",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Vinyl Wallcoverings",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/minetta-contemporary-durable-vinyl-xwj-52460"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53487",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53487",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53487-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732862",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Gray",
- "Living Room",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53487"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12908",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12908",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/09620171f63a6edf9af7fcb2057d1f67.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gold",
- "Gray",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12908"
- },
- {
- "sku": "dwkk-129478",
- "handle": "dwkk-129478",
- "title": "Kravet Design - W3867-77 Pink Wallcovering | Kravet",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3867_77_9e5497fc-3d7a-4e20-83bf-3d2e540658bd.jpg?v=1753120937",
- "tags": [
- "27In",
- "Abstract",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Botanical",
- "Botanical & Floral",
- "Brown",
- "Candice Olson After Eight",
- "Commercial",
- "Dining Room",
- "display_variant",
- "Fan",
- "Glamorous",
- "Gold",
- "Kravet",
- "Kravet Design",
- "Leaf",
- "Living Room",
- "Luxe",
- "Mushroom",
- "Non Woven - 100%",
- "Paper",
- "Pattern",
- "Print",
- "Sophisticated",
- "Taupe",
- "Terra Cotta",
- "United States",
- "Vinyl",
- "W3867-77",
- "W3867.77.0",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129478"
- },
- {
- "sku": "dwc-1001638",
- "handle": "dwc-1001638",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693309947955.jpg?v=1775521280",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Geometric",
- "Gray",
- "Light Gray",
- "NCW4352-02",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Non-woven",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001638"
- },
- {
- "sku": "dwtt-71068-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71068-designer-wallcoverings-los-angeles",
- "title": "Starleaf Yellow | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2977_94c43265-d690-40ba-8d0e-dc4b152c8618.jpg?v=1733894785",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Paramount",
- "Pattern",
- "T2977",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white",
- "yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71068-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201051",
- "handle": "hollywood-tower-deco-xhw-201051",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-radiance.jpg?v=1777480923",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Estimated Type: Paper",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Minimalist",
- "Modern",
- "Office",
- "Serene",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201051"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72386",
- "handle": "vaticano-durable-vinyl-dur-72386",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72386-sample-clean.jpg?v=1774485314",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Light Gray",
- "Living Room",
- "Modern",
- "Pale Grey",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72386"
- },
- {
- "sku": "puget-s-pineapple-scr-7918",
- "handle": "puget-s-pineapple-scr-7918",
- "title": "Puget's Pineapple",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/01b68aaaec0553a4773cc4662adefa49.jpg?v=1572309084",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Cream Black",
- "Designer Wallcoverings",
- "Ivory",
- "Paper",
- "Puget's Pineapple",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/puget-s-pineapple-scr-7918"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-pea-53619a",
- "handle": "pippy-s-peacock-wallpaper-pea-53619a",
- "title": "Pippy's Peacock Wallcovering",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/54ec2c0de6e6c124180d2d67c1b964cc.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal Print",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Botanical",
- "Class A Fire Rated",
- "Commercial",
- "Dark Blue",
- "Dining Room",
- "Entryway",
- "European",
- "European Import",
- "European Prints",
- "Feathers",
- "Light Blue",
- "Light Green",
- "Living Room",
- "Moss",
- "Navy Blue",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Smoke",
- "Steel",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-pea-53619a"
- },
- {
- "sku": "gramercy-emerald",
- "handle": "gramercy-emerald",
- "title": "GRAMERCY Emerald",
- "vendor": "Mind the Gap",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/MTG_403303_1_GRAMERCY_Emerald.jpg?v=1607114848",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Dark Green",
- "Emerald Green",
- "Geometric",
- "Gold",
- "GRAMERCY Emerald",
- "Maximalist",
- "Mind the Gap",
- "Non-woven",
- "Pattern",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/gramercy-emerald"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dvts-520-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dvts-520-jpg",
- "title": "Vista - Steel | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dvts-520_180b4f1b-726f-4084-be61-2f8fadaa5bef.jpg?v=1762293070",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Dark Blue-gray",
- "Digital Curated",
- "Geometric",
- "Mylar",
- "Paper",
- "Silver",
- "Steel",
- "Vista",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dvts-520-jpg"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47820",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47820",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47820-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719375",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Office",
- "Silver",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47820"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47822",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47822",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47822-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719425",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Cream",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47822"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8052",
- "handle": "xara-s-retro-geometric-scr-8052",
- "title": "Xara's Retro Geometric",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/f6e779ae76cfd17210859bac274ad9cf.jpg?v=1572309105",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Cream Black",
- "Designer Wallcoverings",
- "Geometric",
- "Paper",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "Xara's Retro Geometric"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8052"
- },
- {
- "sku": "eur-80365-ncw4353-designer-wallcoverings-los-angeles",
- "handle": "eur-80365-ncw4353-designer-wallcoverings-los-angeles",
- "title": "Colbert 01 - Blue Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505497139.jpg?v=1775523627",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Botanical",
- "Brown",
- "Chocolate Brown",
- "Class A Fire Rated",
- "Colbert",
- "Commercial",
- "Contemporary",
- "Coral",
- "Dusty Rose",
- "Gray",
- "Hallway",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Mid-century",
- "Mid-century Modern",
- "NCW4353",
- "NCW4353-01",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Off-white",
- "Organic",
- "Organic Modern",
- "Paper",
- "Pink",
- "Red",
- "Slate Blue",
- "Taupe",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80365-ncw4353-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwkk-129781",
- "handle": "dwkk-129781",
- "title": "W3931 - 106 Taupe | Kravet Design | Ronald Redding Arts & Crafts | Geometric Wallcovering Print",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3931_106_b5450788-4f19-4b62-bc76-c4210a7faec0.jpg?v=1753322295",
- "tags": [
- "106",
- "27In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Arts & Crafts",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Commercial",
- "Dining Room",
- "display_variant",
- "Fan",
- "Geometric",
- "Glamorous",
- "Kravet",
- "Kravet Design",
- "Living Room",
- "Luxe",
- "Non Woven - 100%",
- "Non-Woven",
- "Pattern",
- "Print",
- "Ronald Redding Arts & Crafts",
- "Sophisticated",
- "Taupe",
- "Textured",
- "United States",
- "Vinyl",
- "W3931",
- "W3931.106.0",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129781"
- },
- {
- "sku": "dwkk-139813",
- "handle": "dwkk-139813",
- "title": "Visby Paper - Juniper Teal By Lee Jofa | Merkato |Global Wallcovering Print",
- "vendor": "Lee Jofa",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/P2017109_354_2a16e49b-2d4c-4ae0-be35-55469864c219.jpg?v=1753291225",
- "tags": [
- "27In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Blue",
- "Chevron",
- "Commercial",
- "Dark Green",
- "display_variant",
- "Geometric",
- "Global",
- "Gold",
- "Green",
- "Juniper",
- "Lee Jofa",
- "Luxury",
- "Merkato",
- "Metallic",
- "Multi",
- "P2017109.354.0",
- "Paper",
- "Paper - 100%",
- "Pattern",
- "Print",
- "Teal",
- "Turquoise",
- "United States",
- "Visby Paper",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-139813"
- },
- {
- "sku": "medusa-label-metallic-black-white-wallcovering-versace",
- "handle": "medusa-label-metallic-black-white-wallcovering-versace",
- "title": "Medusa Label Metallic, Black, White Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/1957e67e8c29a8e79e3490a7f4a9fbc3.jpg?v=1773706355",
- "tags": [
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Geometric",
- "Gray",
- "Greek Key",
- "Haute Couture",
- "Italian",
- "Light Gray",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Medusa Label",
- "Medusa Label Metallic",
- "Neoclassical",
- "Off-white",
- "Paste the wall",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace VI",
- "Vinyl",
- "Wallcovering",
- "White",
- "White Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/medusa-label-metallic-black-white-wallcovering-versace"
- },
- {
- "sku": "dwtt-71067-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71067-designer-wallcoverings-los-angeles",
- "title": "Starleaf Navy | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2976.jpg?v=1733894787",
- "tags": [
- "Architectural",
- "Art Deco",
- "blue",
- "Geometric",
- "Navy",
- "navy blue",
- "Paramount",
- "Pattern",
- "T2976",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71067-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201046",
- "handle": "hollywood-tower-deco-xhw-201046",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-pave.jpg?v=1777480913",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Cream",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Grey",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201046"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72382",
- "handle": "vaticano-durable-vinyl-dur-72382",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72382-sample-clean.jpg?v=1774485295",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Brown",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Office",
- "Silver",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72382"
- },
- {
- "sku": "dwtt-71071-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71071-designer-wallcoverings-los-angeles",
- "title": "Ebru Black | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2980_4632a29f-2158-448b-b4bf-fa1f586a1a8d.jpg?v=1733894779",
- "tags": [
- "Architectural",
- "Art Deco",
- "Black",
- "Geometric",
- "gray",
- "light gray",
- "off-white",
- "Paramount",
- "Pattern",
- "T2980",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71071-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "cotes-d-amore-durable-vinyl-dur-72138",
- "handle": "cotes-d-amore-durable-vinyl-dur-72138",
- "title": "Cotes D'Amore Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72138-sample-clean.jpg?v=1774484530",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Brown",
- "Burgundy",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Brown",
- "Dining Room",
- "Durable Type 2 Vinyl",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Red",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Textured",
- "Transitional",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cotes-d-amore-durable-vinyl-dur-72138"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwq-52903-sample-st-lawrence-embossed-contemporary-durable-vinyl-hollywood-wallcoverings.jpg?v=1775734611",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Burnt Sienna",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dusty Lavender",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Orange",
- "Purple",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903"
- },
- {
- "sku": "cl_0004wp36408",
- "handle": "cl_0004wp36408",
- "title": "Sogi - Oro | Scalamandre",
- "vendor": "Scalamandre Wallpaper",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/CL_0004WP36408_8614a87f-52a0-4f58-9e3b-7230fa7ed384.jpg?v=1745348471",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Gold",
- "Gray",
- "Japonisme",
- "Light Beige",
- "Luxury",
- "Paper",
- "Pattern",
- "SOGI",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cl_0004wp36408"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53488",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53488",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53488-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732865",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Blue",
- "Light Steelblue",
- "Living Room",
- "Modern",
- "Non-woven",
- "Santa Rosa Contemporary Durable",
- "Silver",
- "Sophisticated",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53488"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-dark-blue-pea-53621",
- "handle": "pippy-s-peacock-wallpaper-dark-blue-pea-53621",
- "title": "Pippy's Peacock Wallcovering - Dark Blue",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/3352a14315a70e4bc17173f26461d4a2.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal Print",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Botanical",
- "Class A Fire Rated",
- "Commercial",
- "Dark Purple",
- "Dining Room",
- "European",
- "European Import",
- "European Prints",
- "Glam",
- "Gold",
- "Hollywood Regency",
- "Living Room",
- "Navy Blue",
- "Office",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Purple",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 5,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-dark-blue-pea-53621"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47819",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47819",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47819-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719348",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Tan",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47819"
- },
- {
- "sku": "ncw4352-06",
- "handle": "ncw4352-06",
- "title": "Les Indiennes Bonnelles Black/Silver - Black Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264476211.jpg?v=1775520543",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Gold",
- "Leaf",
- "NCW4352-06",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-06"
- },
- {
- "sku": "dwtt-71758-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71758-designer-wallcoverings-los-angeles",
- "title": "Dedalo Metallic Gold on Coral | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T35146_590fad8f-4251-42af-9161-fc642a26faad.jpg?v=1733893464",
- "tags": [
- "Architectural",
- "Art Deco",
- "coral",
- "Geometric",
- "gold",
- "Graphic Resource",
- "Metallic Gold on Coral",
- "Pattern",
- "T35146",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71758-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "chinese-fret-walls-cfw-9485",
- "handle": "chinese-fret-walls-cfw-9485",
- "title": "Chinese Fret | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/cfw-9485-sample-chinese-fret-hollywood-wallcoverings.jpg?v=1775708050",
- "tags": [
- "Architectural",
- "Art Deco",
- "Brown",
- "Chinoiserie",
- "Class A Fire Rated",
- "Commercial",
- "Commercial - Cleanable",
- "Elegant Vinyls Vol. 1",
- "Fretwork",
- "Geometric",
- "Gold",
- "Hollywood Wallcoverings",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 39.49,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/chinese-fret-walls-cfw-9485"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-silver-room-setting-pea-53619",
- "handle": "pippy-s-peacock-wallpaper-silver-room-setting-pea-53619",
- "title": "Pippy's Peacock Wallcovering - Silver Room Setting",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/b21a935a45149677207f66072c21c94e.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Commercial",
- "Dark Blue",
- "Denim",
- "Dining Room",
- "European",
- "European Import",
- "European Prints",
- "Feather",
- "Geometric",
- "Green",
- "Hollywood Regency",
- "Hotel Lobby",
- "Living Room",
- "Maximalist",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Silver",
- "Steel",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-silver-room-setting-pea-53619"
- },
- {
- "sku": "maidstone-type-ii-vinyl-wallcovering-xmh-47954",
- "handle": "maidstone-type-ii-vinyl-wallcovering-xmh-47954",
- "title": "Maidstone - Storm Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xmh-47954-sample-maidstone-storm-type-ii-vinyl-hollywood.jpg?v=1775723632",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Brown",
- "Bedroom",
- "Brown",
- "Chocolate Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Stone",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Grasscloth",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Maidstone Type 2 Vinyl Wallcovering",
- "Modern",
- "Office",
- "Sophisticated",
- "Stone Look",
- "Stripe",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\""
- ],
- "max_price": 55.38,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/maidstone-type-ii-vinyl-wallcovering-xmh-47954"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72377",
- "handle": "vaticano-durable-vinyl-dur-72377",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72377-sample-clean.jpg?v=1774485271",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Black",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72377"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12906",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12906",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/765a7692adba432658470a08ef9cbcdf.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gray",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Silver",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "White"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12906"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47775",
- "handle": "halifax-specialty-wallcovering-xlk-47775",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47775-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715747",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gold",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Luxe",
- "Pale Gold",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47775"
- },
- {
- "sku": "dwkk-137723",
- "handle": "dwkk-137723",
- "title": "Parterre - Indigo Blue By G P & J Baker | Signature |Modern Geometric Wallcovering Print",
- "vendor": "GP & J Baker",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/BW45081_2_2fa64d0e-f6ed-4971-8352-983618db7d5a.jpg?v=1753303590",
- "tags": [
- "20.488In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Bw45081.2.0",
- "Commercial",
- "Contemporary",
- "Denim Blue",
- "display_variant",
- "Fretwork",
- "G P & J Baker",
- "Geometric",
- "GP & J Baker",
- "Hallway",
- "Light Blue",
- "Living Room",
- "Modern",
- "Non Woven - 100%",
- "Off-white",
- "Paper",
- "Parterre",
- "Pattern",
- "Print",
- "Signature",
- "Sophisticated",
- "Textured",
- "Transitional",
- "United Kingdom",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-137723"
- },
- {
- "sku": "ncw4353-06",
- "handle": "ncw4353-06",
- "title": "Les Indiennes Colbert Taupe/Ivory - Grey Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264672819.jpg?v=1775520582",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Gray",
- "Multi",
- "NCW4353-06",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4353-06"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72378",
- "handle": "vaticano-durable-vinyl-dur-72378",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72378-sample-clean.jpg?v=1774485276",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Black",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Gray",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Onyx",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72378"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201054",
- "handle": "hollywood-tower-deco-xhw-201054",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-lexicon_7a544a4b-5663-498e-b37e-aa13ce1c22fc.jpg?v=1777481462",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Gray",
- "Bedroom",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Charcoal",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Grey",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Office",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201054"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201050",
- "handle": "hollywood-tower-deco-xhw-201050",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-makassar_d574de21-bea4-4365-89f8-86cdf7b80050.jpg?v=1777481430",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Brown",
- "Bedroom",
- "Brown",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Brown",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201050"
- },
- {
- "sku": "fine-stripes-by-phillipe-romano-str-54877",
- "handle": "fine-stripes-by-phillipe-romano-str-54877",
- "title": "Fine Stripes by Phillipe Romano",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/76b4c0554cd76e4ab7ff1fef509c6447.jpg?v=1572310445",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Bling",
- "Commercial",
- "Cream",
- "Geometric",
- "Glass Bead",
- "Paper",
- "Pattern",
- "Phillipe Romano",
- "Phillipe Romano Prints",
- "Prints",
- "Stripe",
- "Textured",
- "Unpasted - Washable - Strippable",
- "Usually In Stock",
- "Wallcovering",
- "White"
- ],
- "max_price": 278.29,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/fine-stripes-by-phillipe-romano-str-54877"
- },
- {
- "sku": "dwtt-71070-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71070-designer-wallcoverings-los-angeles",
- "title": "Ebru Grey | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T2979.jpg?v=1776159773",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Grey",
- "light gray",
- "Paramount",
- "Pattern",
- "T2979",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71070-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwtt-71065-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71065-designer-wallcoverings-los-angeles",
- "title": "Desmond Green | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2937.jpg?v=1733894791",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Green",
- "Paramount",
- "Pattern",
- "T2937",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71065-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201048",
- "handle": "hollywood-tower-deco-xhw-201048",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-bella.jpg?v=1777480917",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Chevron",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Brown",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Paper",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look",
- "Yellow"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201048"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47818",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47818",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47818-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719321",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Light Silver",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47818"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53484",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53484",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53484-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732851",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53484"
- },
- {
- "sku": "dwc-1001639",
- "handle": "dwc-1001639",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693309980723.jpg?v=1775521287",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Light Blue",
- "NCW4352-03",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Pale Blue",
- "Paper",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001639"
- },
- {
- "sku": "cubism-drive-hlw-73048",
- "handle": "cubism-drive-hlw-73048",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73048-sample-clean.jpg?v=1774483207",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Copper",
- "Estimated Type: Non-woven",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Navy",
- "Sophisticated",
- "Tan",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73048"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8053",
- "handle": "xara-s-retro-geometric-scr-8053",
- "title": "Xara's Retro Geometric",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/e018384e9f174dbb085bbedecefad449.jpg?v=1572309105",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Black White",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Designer Wallcoverings",
- "Geometric",
- "Paper",
- "Screen Print",
- "Stripe",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White",
- "Xara's Retro Geometric"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8053"
- },
- {
- "sku": "dwss-72508",
- "handle": "dwss-72508",
- "title": "Katarina Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/483-59_image1_c56c7401-be62-4369-b880-7d17005f33ac.jpg?v=1646104491",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Floral",
- "Geometric",
- "Katarina",
- "Katarina Sample",
- "Living Room",
- "Mid-Century Modern",
- "Non-Woven",
- "Paper",
- "Red",
- "Retro",
- "Sandberg",
- "Sandberg Katarina",
- "Scandinavian",
- "Swedish Design",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72508"
- },
- {
- "sku": "eros-erotic-chandelier-nude-wall-paper-ero-1977",
- "handle": "eros-erotic-chandelier-nude-wall-paper-ero-1977",
- "title": "EROS - Erotic Chandelier Nude Wallcovering",
- "vendor": "Traditional Whimsy",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/20319258.jpg?v=1758052023",
- "tags": [
- "1950's",
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Brick",
- "Commercial",
- "Erotica Wall Coverings",
- "Moss",
- "Paper",
- "Scenic",
- "Traditional Whimsy",
- "Wallcovering",
- "Whimsical"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eros-erotic-chandelier-nude-wall-paper-ero-1977"
- },
- {
- "sku": "bella-napoli-modern-lattice-mica-prn-62314",
- "handle": "bella-napoli-modern-lattice-mica-prn-62314",
- "title": "Bella Napoli Modern Lattice Mica | Phillipe Romano",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/24796c90baef37141ec3b6a73cb696f7.jpg?v=1775113833",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Bella Napoli Modern Lattice Mica",
- "Chevron",
- "Class A Fire Rated",
- "Commercial",
- "Cream on Pearl Gold",
- "Entryway",
- "Geometric",
- "Gray",
- "Industrial",
- "Light Gray",
- "Living Room",
- "Mica",
- "Modern",
- "Natural",
- "Naturals",
- "Office",
- "Paper",
- "Phillipe Romano",
- "Phillipe Romano Naturals",
- "Phillipe Romano Vol. 4",
- "Textural",
- "Traditional",
- "Transitional",
- "Wallcovering"
- ],
- "max_price": 43.7,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/bella-napoli-modern-lattice-mica-prn-62314"
- },
- {
- "sku": "dwc-1001640",
- "handle": "dwc-1001640",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310013491.jpg?v=1775521293",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Cream",
- "Geometric",
- "Gold",
- "NCW4352-04",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001640"
- },
- {
- "sku": "dwjs-16523",
- "handle": "dwjs-16523",
- "title": "Fire Island Cream Wallcovering | Jeffrey Stevens",
- "vendor": "Jeffrey Stevens",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/SS2592.jpg?v=1740772749",
- "tags": [
- "Abstract",
- "Animal Print",
- "Animal/Insects",
- "Animals/Insects",
- "Architectural",
- "Art Deco",
- "Bird",
- "Blue",
- "Blues",
- "Botanical",
- "Branches",
- "Chinoiserie",
- "Coastal",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Cream",
- "Dark Blue",
- "Floral",
- "Flowers",
- "Grasscloth",
- "Imperial Blossoms Branch",
- "Jeffrey Stevens",
- "Light",
- "Light Duty",
- "Light Traffic",
- "Muted",
- "Navy",
- "Non-Woven",
- "Off-White",
- "Paper",
- "Pattern",
- "Prepasted",
- "SS2592",
- "Strippable",
- "Texture",
- "Traditional",
- "Transitional",
- "United States",
- "Wallcovering",
- "Warm",
- "Washable",
- "White"
- ],
- "max_price": 93.14,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwjs-16523"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dnuv-512-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dnuv-512-jpg",
- "title": "Digital Nouveau - Gunmetal | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dnuv-512.jpg?v=1762291227",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Copper",
- "Digital Curated",
- "Digital Nouveau",
- "Geometric",
- "Gray",
- "Lattice",
- "Mylar",
- "Orange",
- "Paper",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dnuv-512-jpg"
- },
- {
- "sku": "versace-medal-grey-white-wallcovering-versace",
- "handle": "versace-medal-grey-white-wallcovering-versace",
- "title": "Versace Medal Grey, White Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/e7363a0c446bc441784b385a7c080e65.jpg?v=1773706435",
- "tags": [
- "A.S. Création",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Blue Gray",
- "Butterfly",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Geometric",
- "Glamorous",
- "Grandmillennial",
- "Gray",
- "Greek Key",
- "Italian",
- "Light Beige",
- "Light Blue",
- "Light Gray",
- "Living Room",
- "Luxury",
- "Medallion",
- "Multi",
- "Off-white",
- "Pale Grey",
- "Paste the wall",
- "Sophisticated",
- "Traditional",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace Medal",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 407.24,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/versace-medal-grey-white-wallcovering-versace"
- },
- {
- "sku": "dwc-1001645",
- "handle": "dwc-1001645",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310210099.jpg?v=1775521331",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Blue",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Gold",
- "NCW4353-03",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001645"
- },
- {
- "sku": "dwss-71106",
- "handle": "dwss-71106",
- "title": "Beata orange Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/402-54_image2.jpg?v=1646100537",
- "tags": [
- "402-54",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beata",
- "Beata orange",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Orange",
- "Paper",
- "Pattern",
- "Sandberg",
- "Tan",
- "Wallcovering",
- "White"
- ],
- "max_price": 5,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-71106"
- },
- {
- "sku": "dwss-72667",
- "handle": "dwss-72667",
- "title": "Marie green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/801-78_image1_f1287bd5-8749-4178-91b7-b824fb332202.jpg?v=1646105009",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Dark Gray",
- "Geometric",
- "Marie",
- "Marie green Sample",
- "Olive Green",
- "P801-78",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72667"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201055",
- "handle": "hollywood-tower-deco-xhw-201055",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-cassandre_cb73fdc5-c20a-43ab-863d-b8a9f306a225.jpg?v=1777481461",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Blue",
- "Bedroom",
- "Blue",
- "Chevron",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Deep Teal",
- "Embossed",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Office",
- "Sophisticated",
- "Teal",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201055"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201047",
- "handle": "hollywood-tower-deco-xhw-201047",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-gazelle.jpg?v=1777480915",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Grey",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Off-white",
- "Paper",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201047"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dnuv-511-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dnuv-511-jpg",
- "title": "Digital Nouveau - Silver Sand | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dnuv-511.jpg?v=1762291189",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Digital Curated",
- "Digital Nouveau",
- "Geometric",
- "Lattice",
- "Mylar",
- "Paper",
- "Silver",
- "Silver Sand",
- "Tan",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dnuv-511-jpg"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53485",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53485",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53485-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732854",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Gray",
- "Living Room",
- "Modern",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Silver",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53485"
- },
- {
- "sku": "barocco-gold-embossed-wallcovering-versace-1",
- "handle": "barocco-gold-embossed-wallcovering-versace-1",
- "title": "Barocco Gold Embossed Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/f6f9311c2463fe9713e36edaf5fc2603.jpg?v=1773710436",
- "tags": [
- "[Object Object]",
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Barocco",
- "Barocco Gold Embossed Wallcovering",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "display_variant",
- "Embossed",
- "Floral",
- "Glamorous",
- "Gold Embossed",
- "Golden Yellow",
- "Haute Couture",
- "Hotel Lobby",
- "Italian",
- "Light Goldenrodyellow",
- "Light Gray",
- "Light Pink",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Needs-Image",
- "Paper",
- "Paste the wall",
- "Rose Quartz",
- "Textured",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 434.39,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/barocco-gold-embossed-wallcovering-versace-1"
- },
- {
- "sku": "palazzo-lane-wood-metal-chevron-hlw-73145",
- "handle": "palazzo-lane-wood-metal-chevron-hlw-73145",
- "title": "Palazzo Lane - Wood & Metal Chevron | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73145-sample-clean.jpg?v=1774483719",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Faux Wood",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Palazzo Lane",
- "Sophisticated",
- "Tan",
- "Vinyl",
- "Wallcovering",
- "Walnut",
- "Wood"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/palazzo-lane-wood-metal-chevron-hlw-73145"
- },
- {
- "sku": "dwtt-71066-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71066-designer-wallcoverings-los-angeles",
- "title": "Mitford Aqua | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2941.jpg?v=1733894789",
- "tags": [
- "Aqua",
- "Architectural",
- "Art Deco",
- "Geometric",
- "light blue",
- "Paramount",
- "Pattern",
- "T2941",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71066-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwtt-71069-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71069-designer-wallcoverings-los-angeles",
- "title": "Starleaf Beige | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2978_6d484ae3-aa54-47ee-ac22-10afe42c1dfe.jpg?v=1733894783",
- "tags": [
- "Architectural",
- "Art Deco",
- "beige",
- "Geometric",
- "Paramount",
- "Pattern",
- "T2978",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71069-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "eur-80362-ncw4352-designer-wallcoverings-los-angeles",
- "handle": "eur-80362-ncw4352-designer-wallcoverings-los-angeles",
- "title": "Bonnelles Diamond 06 - Black Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505464371.jpg?v=1775523620",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Bonnelles Diamond",
- "Champagne",
- "Class A Fire Rated",
- "Cocoa",
- "Coffee",
- "Commercial",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Greige",
- "Hotel Lobby",
- "Latte",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Mink",
- "NCW4352",
- "NCW4352-06",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Paper",
- "Silver",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80362-ncw4352-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47823",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47823",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47823-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719452",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Ivory",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47823"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47821",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47821",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47821-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719403",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Office",
- "Serene",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47821"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201053",
- "handle": "hollywood-tower-deco-xhw-201053",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-cinema.jpg?v=1777480927",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Gray",
- "Bedroom",
- "Brown",
- "Charcoal Gray",
- "Chevron",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Moss",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201053"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/XWS-52896-sample-clean.jpg?v=1774481671",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Grey",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Stripe",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72376",
- "handle": "vaticano-durable-vinyl-dur-72376",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72376-sample-clean.jpg?v=1774485266",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Minimalist",
- "Off-white",
- "Paper",
- "Serene",
- "Transitional",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72376"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/XWQ-52904-sample-clean.jpg?v=1774481680",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Teal",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904"
- },
- {
- "sku": "cubism-drive-hlw-73049",
- "handle": "cubism-drive-hlw-73049",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73049-sample-clean.jpg?v=1774483215",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Green",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Copper",
- "Dark Green",
- "Forest Green",
- "Geometric",
- "Green",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Orange",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73049"
- },
- {
- "sku": "dwtt-71757-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71757-designer-wallcoverings-los-angeles",
- "title": "Bahia Metallic Gold on Metallic Gold on Aqua | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T35144_6dbe5e19-7f3c-4ec9-8978-784a24cbf7da.jpg?v=1733893466",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "gold",
- "Graphic Resource",
- "light blue",
- "Metallic Gold on Aqua",
- "Pattern",
- "T35144",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71757-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "medusa-circle-silver-gold-pink-wallcovering-versace",
- "handle": "medusa-circle-silver-gold-pink-wallcovering-versace",
- "title": "Medusa Circle Silver, Gold, Pink Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/593e809cff01210ceeddec366f315919.jpg?v=1773706334",
- "tags": [
- "A.S. Création",
- "AI-Analyzed-v2",
- "Antique Gold",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Circle",
- "Class A Fire Rated",
- "Color: Pink",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Dusty Rose",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Italian",
- "Light Pink",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Medallion",
- "Medusa Circle",
- "Medusa Circle Silver",
- "Paper",
- "Paste the wall",
- "Pink",
- "Pink Wallcovering",
- "Silver",
- "Silver Grey",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/medusa-circle-silver-gold-pink-wallcovering-versace"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12907",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12907",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Designer Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/3547fe79068d43fd86725b501b7c7f01.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gray",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Silver",
- "Stripe",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering"
- ],
- "max_price": 142.16,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12907"
- },
- {
- "sku": "dwtt-72109-designer-wallcoverings-los-angeles",
- "handle": "dwtt-72109-designer-wallcoverings-los-angeles",
- "title": "Prescott Metallic on Taupe | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T1870.jpg?v=1733892727",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Geometric Resource",
- "gold",
- "Metallic on Taupe",
- "Modern",
- "Pattern",
- "T1870",
- "taupe",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-72109-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2",
- "handle": "i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2",
- "title": "I Love Baroque Medusa Stripe Mauve Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2329a841d3f94e6c2323aed9612df77f.webp?v=1773710682",
- "tags": [
- "[Object Object]",
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Glamorous",
- "Gray",
- "I Love Baroque Medusa Stripe",
- "I Love Baroque Medusa Stripe Mauve Wallcovering",
- "Italian",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Needs-Image",
- "Paper",
- "Paste the wall",
- "Regencycore",
- "Stripe",
- "Textured",
- "Traditional",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 434.39,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2"
- },
- {
- "sku": "dwss-72659",
- "handle": "dwss-72659",
- "title": "Bok light green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-28_image1_9e478367-7370-40ce-8720-e8907ec4f887.jpg?v=1646104975",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok light green Sample",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Honeydew",
- "LIGHT GREEN",
- "Light Seagreen",
- "P710-28",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72659"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72381",
- "handle": "vaticano-durable-vinyl-dur-72381",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72381-sample-clean.jpg?v=1774485290",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gold",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Lattice",
- "Light Gray",
- "Living Room",
- "Minimalist",
- "Modern",
- "Paper",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72381"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72375",
- "handle": "vaticano-durable-vinyl-dur-72375",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72375-sample-clean.jpg?v=1774485261",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Cornflower Blue",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Light Blue",
- "Living Room",
- "Modern",
- "Serene",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72375"
- },
- {
- "sku": "agra-okra-arte-international",
- "handle": "agra-okra-arte-international",
- "title": "Agra Okra Wallcovering | Arte International",
- "vendor": "Arte International",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Roomshot_Web_LR-medium-two-thirds.jpg?v=1775694511",
- "tags": [
- "18310",
- "Animal",
- "Art Deco",
- "Arte International",
- "Botanical",
- "Class A",
- "Geometric",
- "Green",
- "indienne",
- "Insects",
- "Light Gray",
- "New Arrival",
- "Non-woven",
- "Pale Green",
- "Sage",
- "Sage Green",
- "Seafoam Green",
- "Tropical",
- "Vinyl wallpaper on paper backing",
- "Wallcovering",
- "Wheat"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/agra-okra-arte-international"
- },
- {
- "sku": "poona-stone-arte",
- "handle": "poona-stone-arte",
- "title": "Poona Stone Wallcovering | Arte International",
- "vendor": "Arte International",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Poona_18300_Roomshot_Web_LR-og_2018d1c6-6247-46e3-959d-95569075202b.jpg?v=1775597785",
- "tags": [
- "Animal",
- "Art Deco",
- "Beige",
- "Coral",
- "Geometric",
- "indienne",
- "Insects",
- "Light Brown",
- "New Arrival",
- "Non-woven",
- "Red",
- "Stripe",
- "Tan",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/poona-stone-arte"
- }
-]
\ No newline at end of file
diff --git a/data/products.json.bak.tagscrub.1778220122385 b/data/products.json.bak.tagscrub.1778220122385
deleted file mode 100644
index 9a78d42..0000000
--- a/data/products.json.bak.tagscrub.1778220122385
+++ /dev/null
@@ -1,4373 +0,0 @@
-[
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12905",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12905",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/9ccc6e8f1d2d741b91faf46f439bd12f.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gold",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12905"
- },
- {
- "sku": "versace-medals-colorful-metallic-wallcovering-versace",
- "handle": "versace-medals-colorful-metallic-wallcovering-versace",
- "title": "Versace Medals Colorful, Metallic Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/1dc3167f1f2f38b43c1a57090aaabb58.jpg?v=1773706439",
- "tags": [
- "A.S. Création",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Black",
- "Blue",
- "Butterfly",
- "Class A Fire Rated",
- "Color: Gold",
- "Colorful",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Floral",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Haute Couture",
- "Italian",
- "Light Blue",
- "Light Pink",
- "Living Room",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Medallion",
- "Multi",
- "Navy",
- "Navy Blue",
- "Off-white",
- "Paste the wall",
- "Purple",
- "Red",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace Medals",
- "Versace VI",
- "Vinyl",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 407.24,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/versace-medals-colorful-metallic-wallcovering-versace"
- },
- {
- "sku": "mazarin-by-innovations-usa-dwc-mazarin-2",
- "handle": "mazarin-by-innovations-usa-dwc-mazarin-2",
- "title": "Mazarin | Innovations USA",
- "vendor": "Innovations USA",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Mazarin-2_ee17036b-dd15-48cd-aea5-90415ce212ac.jpg?v=1736199305",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "ASTM E84",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Dark Gray",
- "Geometric",
- "Gold",
- "Innovations USA",
- "Mazarin",
- "Mazarin-2",
- "Non-woven",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/mazarin-by-innovations-usa-dwc-mazarin-2"
- },
- {
- "sku": "ncw4352-03",
- "handle": "ncw4352-03",
- "title": "Les Indiennes Bonnelles Aqua - Blue Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264312371.jpg?v=1775520523",
- "tags": [
- "Architectural",
- "Art Deco",
- "Blue",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Leaf",
- "Light Blue",
- "NCW4352-03",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-03"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72380",
- "handle": "vaticano-durable-vinyl-dur-72380",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72380-sample-clean.jpg?v=1774485285",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Burgundy",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Red",
- "Commercial",
- "Commercial Wallcovering",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Maroon",
- "Modern",
- "Paper",
- "Red",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72380"
- },
- {
- "sku": "dwc-1001642",
- "handle": "dwc-1001642",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310111795.jpg?v=1775521311",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Ashen",
- "Black",
- "Class A Fire Rated",
- "Cocoa",
- "Commercial",
- "Geometric",
- "Gold",
- "Mushroom",
- "NCW4352-06",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Silver",
- "Wallcovering",
- "Walnut",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001642"
- },
- {
- "sku": "eur-80367-ncw4353-designer-wallcoverings-los-angeles",
- "handle": "eur-80367-ncw4353-designer-wallcoverings-los-angeles",
- "title": "Colbert 03 - Off-White Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505562675.jpg?v=1775523639",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Blue",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Colbert",
- "Commercial",
- "Dark Brown",
- "Gold",
- "Hallway",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Mid-century",
- "Mid-century Modern",
- "Multi",
- "NCW4353",
- "NCW4353-03",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Off-white",
- "Organic",
- "Organic Modern",
- "Paper",
- "Taupe",
- "Teal",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80367-ncw4353-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwc-1001643",
- "handle": "dwc-1001643",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310144563.jpg?v=1775521318",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Coral",
- "Gray",
- "NCW4353-01",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Pink",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001643"
- },
- {
- "sku": "highland-wonder-lagoon-wp-clarke-and-clarke",
- "handle": "highland-wonder-lagoon-wp-clarke-and-clarke",
- "title": "Highland Wonder/Lagoon Wp | Clarke and Clarke",
- "vendor": "Clarke and Clarke",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W0202_01_CAC.jpg?v=1777020004",
- "tags": [
- "Animal",
- "Art Deco",
- "Bedroom",
- "Bohemian",
- "Botanical",
- "Brown",
- "Clarke and Clarke",
- "Eclectic",
- "Green",
- "Kravet",
- "Living Room",
- "New Arrival",
- "Nursery",
- "Office",
- "Origin: United Kingdom",
- "Print",
- "Scenic",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 1313.55,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/highland-wonder-lagoon-wp-clarke-and-clarke"
- },
- {
- "sku": "minetta-contemporary-durable-vinyl-xwj-52463",
- "handle": "minetta-contemporary-durable-vinyl-xwj-52463",
- "title": "Minetta Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ruche-tucked.jpg?v=1777480627",
- "tags": [
- "1970s Retro",
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Teal",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Leed Walls",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Mid-century Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Vinyl Wallcoverings",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/minetta-contemporary-durable-vinyl-xwj-52463"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53486",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53486",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53486-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732858",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Off-white",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53486"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72384",
- "handle": "vaticano-durable-vinyl-dur-72384",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72384-sample-clean.jpg?v=1774485305",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Linen",
- "Living Room",
- "Sophisticated",
- "Taupe",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72384"
- },
- {
- "sku": "cubism-drive-hlw-73044",
- "handle": "cubism-drive-hlw-73044",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73044-sample-clean.jpg?v=1774483184",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73044"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201049",
- "handle": "hollywood-tower-deco-xhw-201049",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-panache_e3a09dfc-8b72-4c0a-a67a-e95ca7f9edf6.jpg?v=1777481348",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Taupe",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201049"
- },
- {
- "sku": "dwkk-129274",
- "handle": "dwkk-129274",
- "title": "W3797-5 Blue | Kravet Design | Candice Olson Collection |Modern Wallcovering Print",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3797_5_48f07304-21a2-427e-82c1-dffe7cbe25a8.jpg?v=1753291880",
- "tags": [
- "27In",
- "Abstract",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Blue",
- "Candice Olson Collection",
- "Cellulose - 51%;Polyester - 19%;Binder - 17%;Mineral Fillers - 13%",
- "Class A Fire Rated",
- "Commercial",
- "display_variant",
- "Kravet",
- "Kravet Design",
- "Light Blue",
- "Modern",
- "Non-Woven",
- "Pattern",
- "Print",
- "United States",
- "W3797-5",
- "W3797.5.0",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129274"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47774",
- "handle": "halifax-specialty-wallcovering-xlk-47774",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47774-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715724",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gray",
- "Grey",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47774"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201052",
- "handle": "hollywood-tower-deco-xhw-201052",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-marquise.jpg?v=1777480924",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Chevron",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Paper",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201052"
- },
- {
- "sku": "dwss-72661",
- "handle": "dwss-72661",
- "title": "Bok dark green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-88_image1_d2b56bdf-a554-4a3e-a951-44c3e05b6bb2.jpg?v=1646104981",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok dark green Sample",
- "Class A Fire Rated",
- "Commercial",
- "DARK GREEN",
- "Dark Seagreen",
- "Geometric",
- "P710-88",
- "Paper",
- "Pattern",
- "Sandberg",
- "Seagreen",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72661"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8051",
- "handle": "xara-s-retro-geometric-scr-8051",
- "title": "Xara's Retro Geometric",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/730f81f7d70414a9bc3a73d2006cbc59.jpg?v=1572309105",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Luxury Screen Printed Wallpapers",
- "Paper",
- "Red",
- "Red Stone",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8051"
- },
- {
- "sku": "mazarin-by-innovations-usa-dwc-mazarin-1",
- "handle": "mazarin-by-innovations-usa-dwc-mazarin-1",
- "title": "Mazarin | Innovations USA",
- "vendor": "Innovations USA",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Mazarin-1_edfc11b0-96d7-4d28-87db-3f6018631fd1.jpg?v=1736199308",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "ASTM E84",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Slategray",
- "Geometric",
- "Gold",
- "Innovations USA",
- "Mazarin",
- "Mazarin-1",
- "Non-woven",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/mazarin-by-innovations-usa-dwc-mazarin-1"
- },
- {
- "sku": "dwss-72660",
- "handle": "dwss-72660",
- "title": "Bok dark blue Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-86_image1_7e2d01fe-c590-4118-9790-8df5271c12fd.jpg?v=1646104978",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok dark blue Sample",
- "Class A Fire Rated",
- "Commercial",
- "DARK BLUE",
- "Geometric",
- "P710-86",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72660"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72379",
- "handle": "vaticano-durable-vinyl-dur-72379",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72379-sample-clean.jpg?v=1774485280",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Minimalist",
- "Modern",
- "Office",
- "Paper",
- "Royal Blue",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72379"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72383",
- "handle": "vaticano-durable-vinyl-dur-72383",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72383-sample-clean.jpg?v=1774485300",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Brown",
- "Burnt Sienna",
- "Class A Fire Rated",
- "Color: Red",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Orange",
- "Paper",
- "Red",
- "Russet",
- "Sophisticated",
- "Terracotta",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72383"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47777",
- "handle": "halifax-specialty-wallcovering-xlk-47777",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47777-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715800",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gray",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Living Room",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47777"
- },
- {
- "sku": "dwc-1001648",
- "handle": "dwc-1001648",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310406707.jpg?v=1775521350",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Art Nouveau",
- "Beige",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Light Gray",
- "NCW4353-06",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Taupe",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001648"
- },
- {
- "sku": "ncw4352-04",
- "handle": "ncw4352-04",
- "title": "Nina Campbell Wallcoverings - Ecru Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264345139.jpg?v=1775520530",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Cream",
- "Geometric",
- "Gold",
- "NCW4352-04",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-04"
- },
- {
- "sku": "minetta-contemporary-durable-vinyl-xwj-52460",
- "handle": "minetta-contemporary-durable-vinyl-xwj-52460",
- "title": "Minetta Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ruche-smocking.jpg?v=1777480623",
- "tags": [
- "1970s Retro",
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Charcoal Gray",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Lavender",
- "Leed Walls",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Mid-century Modern",
- "Pale Lavender",
- "Purple",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Vinyl Wallcoverings",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/minetta-contemporary-durable-vinyl-xwj-52460"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53487",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53487",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53487-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732862",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Gray",
- "Living Room",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53487"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12908",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12908",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/09620171f63a6edf9af7fcb2057d1f67.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gold",
- "Gray",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12908"
- },
- {
- "sku": "dwkk-129478",
- "handle": "dwkk-129478",
- "title": "Kravet Design - W3867-77 Pink Wallcovering | Kravet",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3867_77_9e5497fc-3d7a-4e20-83bf-3d2e540658bd.jpg?v=1753120937",
- "tags": [
- "27In",
- "Abstract",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Botanical",
- "Botanical & Floral",
- "Brown",
- "Candice Olson After Eight",
- "Commercial",
- "Dining Room",
- "display_variant",
- "Fan",
- "Glamorous",
- "Gold",
- "Kravet",
- "Kravet Design",
- "Leaf",
- "Living Room",
- "Luxe",
- "Mushroom",
- "Non Woven - 100%",
- "Paper",
- "Pattern",
- "Print",
- "Sophisticated",
- "Taupe",
- "Terra Cotta",
- "United States",
- "Vinyl",
- "W3867-77",
- "W3867.77.0",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129478"
- },
- {
- "sku": "dwc-1001638",
- "handle": "dwc-1001638",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693309947955.jpg?v=1775521280",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Geometric",
- "Gray",
- "Light Gray",
- "NCW4352-02",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Non-woven",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001638"
- },
- {
- "sku": "dwtt-71068-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71068-designer-wallcoverings-los-angeles",
- "title": "Starleaf Yellow | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2977_94c43265-d690-40ba-8d0e-dc4b152c8618.jpg?v=1733894785",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Paramount",
- "Pattern",
- "T2977",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white",
- "yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71068-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201051",
- "handle": "hollywood-tower-deco-xhw-201051",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-radiance.jpg?v=1777480923",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Estimated Type: Paper",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Minimalist",
- "Modern",
- "Office",
- "Serene",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201051"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72386",
- "handle": "vaticano-durable-vinyl-dur-72386",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72386-sample-clean.jpg?v=1774485314",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Light Gray",
- "Living Room",
- "Modern",
- "Pale Grey",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72386"
- },
- {
- "sku": "puget-s-pineapple-scr-7918",
- "handle": "puget-s-pineapple-scr-7918",
- "title": "Puget's Pineapple",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/01b68aaaec0553a4773cc4662adefa49.jpg?v=1572309084",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Cream Black",
- "Designer Wallcoverings",
- "Ivory",
- "Paper",
- "Puget's Pineapple",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/puget-s-pineapple-scr-7918"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-pea-53619a",
- "handle": "pippy-s-peacock-wallpaper-pea-53619a",
- "title": "Pippy's Peacock Wallcovering",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/54ec2c0de6e6c124180d2d67c1b964cc.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal Print",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Botanical",
- "Class A Fire Rated",
- "Commercial",
- "Dark Blue",
- "Dining Room",
- "Entryway",
- "European",
- "European Import",
- "European Prints",
- "Feathers",
- "Light Blue",
- "Light Green",
- "Living Room",
- "Moss",
- "Navy Blue",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Smoke",
- "Steel",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-pea-53619a"
- },
- {
- "sku": "gramercy-emerald",
- "handle": "gramercy-emerald",
- "title": "GRAMERCY Emerald",
- "vendor": "Mind the Gap",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/MTG_403303_1_GRAMERCY_Emerald.jpg?v=1607114848",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Dark Green",
- "Emerald Green",
- "Geometric",
- "Gold",
- "GRAMERCY Emerald",
- "Maximalist",
- "Mind the Gap",
- "Non-woven",
- "Pattern",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/gramercy-emerald"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dvts-520-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dvts-520-jpg",
- "title": "Vista - Steel | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dvts-520_180b4f1b-726f-4084-be61-2f8fadaa5bef.jpg?v=1762293070",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Dark Blue-gray",
- "Digital Curated",
- "Geometric",
- "Mylar",
- "Paper",
- "Silver",
- "Steel",
- "Vista",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dvts-520-jpg"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47820",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47820",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47820-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719375",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Office",
- "Silver",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47820"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47822",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47822",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47822-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719425",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Cream",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47822"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8052",
- "handle": "xara-s-retro-geometric-scr-8052",
- "title": "Xara's Retro Geometric",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/f6e779ae76cfd17210859bac274ad9cf.jpg?v=1572309105",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Cream Black",
- "Designer Wallcoverings",
- "Geometric",
- "Paper",
- "Screen Print",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "Xara's Retro Geometric"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8052"
- },
- {
- "sku": "eur-80365-ncw4353-designer-wallcoverings-los-angeles",
- "handle": "eur-80365-ncw4353-designer-wallcoverings-los-angeles",
- "title": "Colbert 01 - Blue Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505497139.jpg?v=1775523627",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Botanical",
- "Brown",
- "Chocolate Brown",
- "Class A Fire Rated",
- "Colbert",
- "Commercial",
- "Contemporary",
- "Coral",
- "Dusty Rose",
- "Gray",
- "Hallway",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Mid-century",
- "Mid-century Modern",
- "NCW4353",
- "NCW4353-01",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Off-white",
- "Organic",
- "Organic Modern",
- "Paper",
- "Pink",
- "Red",
- "Slate Blue",
- "Taupe",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80365-ncw4353-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwkk-129781",
- "handle": "dwkk-129781",
- "title": "W3931 - 106 Taupe | Kravet Design | Ronald Redding Arts & Crafts | Geometric Wallcovering Print",
- "vendor": "Kravet",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/W3931_106_b5450788-4f19-4b62-bc76-c4210a7faec0.jpg?v=1753322295",
- "tags": [
- "106",
- "27In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Arts & Crafts",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Class A Fire Rated",
- "Commercial",
- "Dining Room",
- "display_variant",
- "Fan",
- "Geometric",
- "Glamorous",
- "Kravet",
- "Kravet Design",
- "Living Room",
- "Luxe",
- "Non Woven - 100%",
- "Non-Woven",
- "Pattern",
- "Print",
- "Ronald Redding Arts & Crafts",
- "Sophisticated",
- "Taupe",
- "Textured",
- "United States",
- "Vinyl",
- "W3931",
- "W3931.106.0",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-129781"
- },
- {
- "sku": "dwkk-139813",
- "handle": "dwkk-139813",
- "title": "Visby Paper - Juniper Teal By Lee Jofa | Merkato |Global Wallcovering Print",
- "vendor": "Lee Jofa",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/P2017109_354_2a16e49b-2d4c-4ae0-be35-55469864c219.jpg?v=1753291225",
- "tags": [
- "27In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Blue",
- "Chevron",
- "Commercial",
- "Dark Green",
- "display_variant",
- "Geometric",
- "Global",
- "Gold",
- "Green",
- "Juniper",
- "Lee Jofa",
- "Luxury",
- "Merkato",
- "Metallic",
- "Multi",
- "P2017109.354.0",
- "Paper",
- "Paper - 100%",
- "Pattern",
- "Print",
- "Teal",
- "Turquoise",
- "United States",
- "Visby Paper",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-139813"
- },
- {
- "sku": "medusa-label-metallic-black-white-wallcovering-versace",
- "handle": "medusa-label-metallic-black-white-wallcovering-versace",
- "title": "Medusa Label Metallic, Black, White Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/1957e67e8c29a8e79e3490a7f4a9fbc3.jpg?v=1773706355",
- "tags": [
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Geometric",
- "Gray",
- "Greek Key",
- "Haute Couture",
- "Italian",
- "Light Gray",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Medusa Label",
- "Medusa Label Metallic",
- "Neoclassical",
- "Off-white",
- "Paste the wall",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace VI",
- "Vinyl",
- "Wallcovering",
- "White",
- "White Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/medusa-label-metallic-black-white-wallcovering-versace"
- },
- {
- "sku": "dwtt-71067-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71067-designer-wallcoverings-los-angeles",
- "title": "Starleaf Navy | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2976.jpg?v=1733894787",
- "tags": [
- "Architectural",
- "Art Deco",
- "blue",
- "Geometric",
- "Navy",
- "navy blue",
- "Paramount",
- "Pattern",
- "T2976",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71067-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201046",
- "handle": "hollywood-tower-deco-xhw-201046",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-pave.jpg?v=1777480913",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Cream",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Grey",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "White",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201046"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72382",
- "handle": "vaticano-durable-vinyl-dur-72382",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72382-sample-clean.jpg?v=1774485295",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Brown",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gray",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Office",
- "Silver",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72382"
- },
- {
- "sku": "dwtt-71071-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71071-designer-wallcoverings-los-angeles",
- "title": "Ebru Black | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2980_4632a29f-2158-448b-b4bf-fa1f586a1a8d.jpg?v=1733894779",
- "tags": [
- "Architectural",
- "Art Deco",
- "Black",
- "Geometric",
- "gray",
- "light gray",
- "off-white",
- "Paramount",
- "Pattern",
- "T2980",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71071-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "cotes-d-amore-durable-vinyl-dur-72138",
- "handle": "cotes-d-amore-durable-vinyl-dur-72138",
- "title": "Cotes D'Amore Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72138-sample-clean.jpg?v=1774484530",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Brown",
- "Burgundy",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Brown",
- "Dining Room",
- "Durable Type 2 Vinyl",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Red",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Textured",
- "Transitional",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cotes-d-amore-durable-vinyl-dur-72138"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwq-52903-sample-st-lawrence-embossed-contemporary-durable-vinyl-hollywood-wallcoverings.jpg?v=1775734611",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Burnt Sienna",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dusty Lavender",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Orange",
- "Purple",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52903"
- },
- {
- "sku": "cl_0004wp36408",
- "handle": "cl_0004wp36408",
- "title": "Sogi - Oro | Scalamandre",
- "vendor": "Scalamandre Wallpaper",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/CL_0004WP36408_8614a87f-52a0-4f58-9e3b-7230fa7ed384.jpg?v=1745348471",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Gold",
- "Gray",
- "Japonisme",
- "Light Beige",
- "Luxury",
- "Paper",
- "Pattern",
- "SOGI",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cl_0004wp36408"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53488",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53488",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53488-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732865",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Blue",
- "Light Steelblue",
- "Living Room",
- "Modern",
- "Non-woven",
- "Santa Rosa Contemporary Durable",
- "Silver",
- "Sophisticated",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53488"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-dark-blue-pea-53621",
- "handle": "pippy-s-peacock-wallpaper-dark-blue-pea-53621",
- "title": "Pippy's Peacock Wallcovering - Dark Blue",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/3352a14315a70e4bc17173f26461d4a2.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal Print",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Botanical",
- "Class A Fire Rated",
- "Commercial",
- "Dark Purple",
- "Dining Room",
- "European",
- "European Import",
- "European Prints",
- "Glam",
- "Gold",
- "Hollywood Regency",
- "Living Room",
- "Navy Blue",
- "Office",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Purple",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 5,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-dark-blue-pea-53621"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47819",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47819",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47819-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719348",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Tan",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47819"
- },
- {
- "sku": "ncw4352-06",
- "handle": "ncw4352-06",
- "title": "Les Indiennes Bonnelles Black/Silver - Black Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264476211.jpg?v=1775520543",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Gold",
- "Leaf",
- "NCW4352-06",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4352-06"
- },
- {
- "sku": "dwtt-71758-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71758-designer-wallcoverings-los-angeles",
- "title": "Dedalo Metallic Gold on Coral | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T35146_590fad8f-4251-42af-9161-fc642a26faad.jpg?v=1733893464",
- "tags": [
- "Architectural",
- "Art Deco",
- "coral",
- "Geometric",
- "gold",
- "Graphic Resource",
- "Metallic Gold on Coral",
- "Pattern",
- "T35146",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71758-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "chinese-fret-walls-cfw-9485",
- "handle": "chinese-fret-walls-cfw-9485",
- "title": "Chinese Fret | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/cfw-9485-sample-chinese-fret-hollywood-wallcoverings.jpg?v=1775708050",
- "tags": [
- "Architectural",
- "Art Deco",
- "Brown",
- "Chinoiserie",
- "Class A Fire Rated",
- "Commercial",
- "Commercial - Cleanable",
- "Elegant Vinyls Vol. 1",
- "Fretwork",
- "Geometric",
- "Gold",
- "Hollywood Wallcoverings",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 39.49,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/chinese-fret-walls-cfw-9485"
- },
- {
- "sku": "pippy-s-peacock-wallpaper-silver-room-setting-pea-53619",
- "handle": "pippy-s-peacock-wallpaper-silver-room-setting-pea-53619",
- "title": "Pippy's Peacock Wallcovering - Silver Room Setting",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/b21a935a45149677207f66072c21c94e.jpg?v=1572309270",
- "tags": [
- "AI-Analyzed-v2",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Commercial",
- "Dark Blue",
- "Denim",
- "Dining Room",
- "European",
- "European Import",
- "European Prints",
- "Feather",
- "Geometric",
- "Green",
- "Hollywood Regency",
- "Hotel Lobby",
- "Living Room",
- "Maximalist",
- "Paper",
- "Peacock",
- "Phillipe Romano",
- "Pippy's Peacock Wallcovering",
- "Silver",
- "Steel",
- "Teal",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/pippy-s-peacock-wallpaper-silver-room-setting-pea-53619"
- },
- {
- "sku": "maidstone-type-ii-vinyl-wallcovering-xmh-47954",
- "handle": "maidstone-type-ii-vinyl-wallcovering-xmh-47954",
- "title": "Maidstone - Storm Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xmh-47954-sample-maidstone-storm-type-ii-vinyl-hollywood.jpg?v=1775723632",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Brown",
- "Bedroom",
- "Brown",
- "Chocolate Brown",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Stone",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Grasscloth",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Maidstone Type 2 Vinyl Wallcovering",
- "Modern",
- "Office",
- "Sophisticated",
- "Stone Look",
- "Stripe",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\""
- ],
- "max_price": 55.38,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/maidstone-type-ii-vinyl-wallcovering-xmh-47954"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72377",
- "handle": "vaticano-durable-vinyl-dur-72377",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72377-sample-clean.jpg?v=1774485271",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Black",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72377"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12906",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12906",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/765a7692adba432658470a08ef9cbcdf.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gray",
- "Lattice",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Silver",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering",
- "White"
- ],
- "max_price": 99.06,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12906"
- },
- {
- "sku": "halifax-specialty-wallcovering-xlk-47775",
- "handle": "halifax-specialty-wallcovering-xlk-47775",
- "title": "Halifax Specialty | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xlk-47775-sample-halifax-specialty-hollywood-wallcoverings.jpg?v=1775715747",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gold",
- "Halifax Specialty Wallcovering",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Living Room",
- "Luxe",
- "Pale Gold",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/halifax-specialty-wallcovering-xlk-47775"
- },
- {
- "sku": "dwkk-137723",
- "handle": "dwkk-137723",
- "title": "Parterre - Indigo Blue By G P & J Baker | Signature |Modern Geometric Wallcovering Print",
- "vendor": "GP & J Baker",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/BW45081_2_2fa64d0e-f6ed-4971-8352-983618db7d5a.jpg?v=1753303590",
- "tags": [
- "20.488In",
- "Architectural",
- "Archived-Triple-Verified",
- "Archived-Vendor-Gone",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Bw45081.2.0",
- "Commercial",
- "Contemporary",
- "Denim Blue",
- "display_variant",
- "Fretwork",
- "G P & J Baker",
- "Geometric",
- "GP & J Baker",
- "Hallway",
- "Light Blue",
- "Living Room",
- "Modern",
- "Non Woven - 100%",
- "Off-white",
- "Paper",
- "Parterre",
- "Pattern",
- "Print",
- "Signature",
- "Sophisticated",
- "Textured",
- "Transitional",
- "United Kingdom",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwkk-137723"
- },
- {
- "sku": "ncw4353-06",
- "handle": "ncw4353-06",
- "title": "Les Indiennes Colbert Taupe/Ivory - Grey Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4497264672819.jpg?v=1775520582",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Gray",
- "Multi",
- "NCW4353-06",
- "Nina Campbell Wallcovering",
- "Nina Campbell Wallcoverings",
- "Paper",
- "Wallcovering",
- "Wallcoverings",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ncw4353-06"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72378",
- "handle": "vaticano-durable-vinyl-dur-72378",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72378-sample-clean.jpg?v=1774485276",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Black",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Dark Gray",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Onyx",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72378"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201054",
- "handle": "hollywood-tower-deco-xhw-201054",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-lexicon_7a544a4b-5663-498e-b37e-aa13ce1c22fc.jpg?v=1777481462",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Gray",
- "Bedroom",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Charcoal",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Grey",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Office",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201054"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201050",
- "handle": "hollywood-tower-deco-xhw-201050",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-makassar_d574de21-bea4-4365-89f8-86cdf7b80050.jpg?v=1777481430",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Brown",
- "Bedroom",
- "Brown",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Dark Brown",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201050"
- },
- {
- "sku": "fine-stripes-by-phillipe-romano-str-54877",
- "handle": "fine-stripes-by-phillipe-romano-str-54877",
- "title": "Fine Stripes by Phillipe Romano",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/76b4c0554cd76e4ab7ff1fef509c6447.jpg?v=1572310445",
- "tags": [
- "Architectural",
- "Art Deco",
- "Beige",
- "Bling",
- "Commercial",
- "Cream",
- "Geometric",
- "Glass Bead",
- "Paper",
- "Pattern",
- "Phillipe Romano",
- "Phillipe Romano Prints",
- "Prints",
- "Stripe",
- "Textured",
- "Unpasted - Washable - Strippable",
- "Usually In Stock",
- "Wallcovering",
- "White"
- ],
- "max_price": 278.29,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/fine-stripes-by-phillipe-romano-str-54877"
- },
- {
- "sku": "dwtt-71070-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71070-designer-wallcoverings-los-angeles",
- "title": "Ebru Grey | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T2979.jpg?v=1776159773",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Grey",
- "light gray",
- "Paramount",
- "Pattern",
- "T2979",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71070-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwtt-71065-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71065-designer-wallcoverings-los-angeles",
- "title": "Desmond Green | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2937.jpg?v=1733894791",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Green",
- "Paramount",
- "Pattern",
- "T2937",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71065-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201048",
- "handle": "hollywood-tower-deco-xhw-201048",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-bella.jpg?v=1777480917",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Beige",
- "Bedroom",
- "Beige",
- "Brown",
- "Champagne",
- "Chevron",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Brown",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Paper",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look",
- "Yellow"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201048"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47818",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47818",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47818-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719321",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Light Silver",
- "Living Room",
- "Modern",
- "Silver",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47818"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53484",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53484",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53484-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732851",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53484"
- },
- {
- "sku": "dwc-1001639",
- "handle": "dwc-1001639",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693309980723.jpg?v=1775521287",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Light Blue",
- "NCW4352-03",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Pale Blue",
- "Paper",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001639"
- },
- {
- "sku": "cubism-drive-hlw-73048",
- "handle": "cubism-drive-hlw-73048",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73048-sample-clean.jpg?v=1774483207",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Copper",
- "Estimated Type: Non-woven",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Navy",
- "Sophisticated",
- "Tan",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73048"
- },
- {
- "sku": "xara-s-retro-geometric-scr-8053",
- "handle": "xara-s-retro-geometric-scr-8053",
- "title": "Xara's Retro Geometric",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/e018384e9f174dbb085bbedecefad449.jpg?v=1572309105",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Black White",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Contemporary",
- "Designer Wallcoverings",
- "Geometric",
- "Paper",
- "Screen Print",
- "Stripe",
- "Wallcovering",
- "Whimsical Screen Prints Vol. 1",
- "White",
- "Xara's Retro Geometric"
- ],
- "max_price": 146.18,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/xara-s-retro-geometric-scr-8053"
- },
- {
- "sku": "dwss-72508",
- "handle": "dwss-72508",
- "title": "Katarina Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/483-59_image1_c56c7401-be62-4369-b880-7d17005f33ac.jpg?v=1646104491",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Floral",
- "Geometric",
- "Katarina",
- "Katarina Sample",
- "Living Room",
- "Mid-Century Modern",
- "Non-Woven",
- "Paper",
- "Red",
- "Retro",
- "Sandberg",
- "Sandberg Katarina",
- "Scandinavian",
- "Swedish Design",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72508"
- },
- {
- "sku": "eros-erotic-chandelier-nude-wall-paper-ero-1977",
- "handle": "eros-erotic-chandelier-nude-wall-paper-ero-1977",
- "title": "EROS - Erotic Chandelier Nude Wallcovering",
- "vendor": "Traditional Whimsy",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/20319258.jpg?v=1758052023",
- "tags": [
- "1950's",
- "Architectural",
- "Art Deco",
- "Beige",
- "Black",
- "Brick",
- "Commercial",
- "Erotica Wall Coverings",
- "Moss",
- "Paper",
- "Scenic",
- "Traditional Whimsy",
- "Wallcovering",
- "Whimsical"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eros-erotic-chandelier-nude-wall-paper-ero-1977"
- },
- {
- "sku": "bella-napoli-modern-lattice-mica-prn-62314",
- "handle": "bella-napoli-modern-lattice-mica-prn-62314",
- "title": "Bella Napoli Modern Lattice Mica | Phillipe Romano",
- "vendor": "Phillipe Romano",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/24796c90baef37141ec3b6a73cb696f7.jpg?v=1775113833",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Bella Napoli Modern Lattice Mica",
- "Chevron",
- "Class A Fire Rated",
- "Commercial",
- "Cream on Pearl Gold",
- "Entryway",
- "Geometric",
- "Gray",
- "Industrial",
- "Light Gray",
- "Living Room",
- "Mica",
- "Modern",
- "Natural",
- "Naturals",
- "Office",
- "Paper",
- "Phillipe Romano",
- "Phillipe Romano Naturals",
- "Phillipe Romano Vol. 4",
- "Textural",
- "Traditional",
- "Transitional",
- "Wallcovering"
- ],
- "max_price": 43.7,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/bella-napoli-modern-lattice-mica-prn-62314"
- },
- {
- "sku": "dwc-1001640",
- "handle": "dwc-1001640",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310013491.jpg?v=1775521293",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Cream",
- "Geometric",
- "Gold",
- "NCW4352-04",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001640"
- },
- {
- "sku": "dwjs-16523",
- "handle": "dwjs-16523",
- "title": "Fire Island Cream Wallcovering | Jeffrey Stevens",
- "vendor": "Jeffrey Stevens",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/SS2592.jpg?v=1740772749",
- "tags": [
- "Abstract",
- "Animal Print",
- "Animal/Insects",
- "Animals/Insects",
- "Architectural",
- "Art Deco",
- "Bird",
- "Blue",
- "Blues",
- "Botanical",
- "Branches",
- "Chinoiserie",
- "Coastal",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Cream",
- "Dark Blue",
- "Floral",
- "Flowers",
- "Grasscloth",
- "Imperial Blossoms Branch",
- "Jeffrey Stevens",
- "Light",
- "Light Duty",
- "Light Traffic",
- "Muted",
- "Navy",
- "Non-Woven",
- "Off-White",
- "Paper",
- "Pattern",
- "Prepasted",
- "SS2592",
- "Strippable",
- "Texture",
- "Traditional",
- "Transitional",
- "United States",
- "Wallcovering",
- "Warm",
- "Washable",
- "White"
- ],
- "max_price": 93.14,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwjs-16523"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dnuv-512-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dnuv-512-jpg",
- "title": "Digital Nouveau - Gunmetal | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dnuv-512.jpg?v=1762291227",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Copper",
- "Digital Curated",
- "Digital Nouveau",
- "Geometric",
- "Gray",
- "Lattice",
- "Mylar",
- "Orange",
- "Paper",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dnuv-512-jpg"
- },
- {
- "sku": "versace-medal-grey-white-wallcovering-versace",
- "handle": "versace-medal-grey-white-wallcovering-versace",
- "title": "Versace Medal Grey, White Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/e7363a0c446bc441784b385a7c080e65.jpg?v=1773706435",
- "tags": [
- "A.S. Création",
- "Animal/Insects",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Blue Gray",
- "Butterfly",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Geometric",
- "Glamorous",
- "Grandmillennial",
- "Gray",
- "Greek Key",
- "Italian",
- "Light Beige",
- "Light Blue",
- "Light Gray",
- "Living Room",
- "Luxury",
- "Medallion",
- "Multi",
- "Off-white",
- "Pale Grey",
- "Paste the wall",
- "Sophisticated",
- "Traditional",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace Medal",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 407.24,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/versace-medal-grey-white-wallcovering-versace"
- },
- {
- "sku": "dwc-1001645",
- "handle": "dwc-1001645",
- "title": "Nina Campbell Wallcovering",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_4693310210099.jpg?v=1775521331",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Blue",
- "Botanical",
- "Brown",
- "Class A Fire Rated",
- "Commercial",
- "Gold",
- "NCW4353-03",
- "Nina Campbell",
- "Nina Campbell Wallcovering Wallcovering",
- "Paper",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwc-1001645"
- },
- {
- "sku": "dwss-71106",
- "handle": "dwss-71106",
- "title": "Beata orange Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/402-54_image2.jpg?v=1646100537",
- "tags": [
- "402-54",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beata",
- "Beata orange",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Orange",
- "Paper",
- "Pattern",
- "Sandberg",
- "Tan",
- "Wallcovering",
- "White"
- ],
- "max_price": 5,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-71106"
- },
- {
- "sku": "dwss-72667",
- "handle": "dwss-72667",
- "title": "Marie green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/801-78_image1_f1287bd5-8749-4178-91b7-b824fb332202.jpg?v=1646105009",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Dark Gray",
- "Geometric",
- "Marie",
- "Marie green Sample",
- "Olive Green",
- "P801-78",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72667"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201055",
- "handle": "hollywood-tower-deco-xhw-201055",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-cassandre_cb73fdc5-c20a-43ab-863d-b8a9f306a225.jpg?v=1777481461",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Blue",
- "Bedroom",
- "Blue",
- "Chevron",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Deep Teal",
- "Embossed",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Office",
- "Sophisticated",
- "Teal",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201055"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201047",
- "handle": "hollywood-tower-deco-xhw-201047",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-gazelle.jpg?v=1777480915",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color White",
- "Bedroom",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Grey",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Light Gray",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Off-white",
- "Paper",
- "Sophisticated",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201047"
- },
- {
- "sku": "wolfgordonwallcovering_dwwg_dnuv-511-jpg",
- "handle": "wolfgordonwallcovering_dwwg_dnuv-511-jpg",
- "title": "Digital Nouveau - Silver Sand | Wolf Gordon Wallcoverings",
- "vendor": "Wolf Gordon",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dnuv-511.jpg?v=1762291189",
- "tags": [
- "100% Mylar",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Beige",
- "Class A Fire Rated",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Digital Curated",
- "Digital Nouveau",
- "Geometric",
- "Lattice",
- "Mylar",
- "Paper",
- "Silver",
- "Silver Sand",
- "Tan",
- "Wallcovering",
- "Wolf Gordon",
- "Wolf Gordon Wallcoverings"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dnuv-511-jpg"
- },
- {
- "sku": "santa-rosa-contemporary-durable-walls-xwt-53485",
- "handle": "santa-rosa-contemporary-durable-walls-xwt-53485",
- "title": "Santa Rosa Contemporary Durable | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xwt-53485-sample-santa-rosa-contemporary-durable-hollywood-wallcoverings.jpg?v=1775732854",
- "tags": [
- "Abstract",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: White",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Glamorous",
- "Gray",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Light Gray",
- "Living Room",
- "Modern",
- "Paper",
- "Santa Rosa Contemporary Durable",
- "Silver",
- "Sophisticated",
- "Vinyl",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/santa-rosa-contemporary-durable-walls-xwt-53485"
- },
- {
- "sku": "barocco-gold-embossed-wallcovering-versace-1",
- "handle": "barocco-gold-embossed-wallcovering-versace-1",
- "title": "Barocco Gold Embossed Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/f6f9311c2463fe9713e36edaf5fc2603.jpg?v=1773710436",
- "tags": [
- "[Object Object]",
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Barocco",
- "Barocco Gold Embossed Wallcovering",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "display_variant",
- "Embossed",
- "Floral",
- "Glamorous",
- "Gold Embossed",
- "Golden Yellow",
- "Haute Couture",
- "Hotel Lobby",
- "Italian",
- "Light Goldenrodyellow",
- "Light Gray",
- "Light Pink",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Needs-Image",
- "Paper",
- "Paste the wall",
- "Rose Quartz",
- "Textured",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 434.39,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/barocco-gold-embossed-wallcovering-versace-1"
- },
- {
- "sku": "palazzo-lane-wood-metal-chevron-hlw-73145",
- "handle": "palazzo-lane-wood-metal-chevron-hlw-73145",
- "title": "Palazzo Lane - Wood & Metal Chevron | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73145-sample-clean.jpg?v=1774483719",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Brown",
- "Charcoal",
- "Chevron",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Faux Wood",
- "Geometric",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Palazzo Lane",
- "Sophisticated",
- "Tan",
- "Vinyl",
- "Wallcovering",
- "Walnut",
- "Wood"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/palazzo-lane-wood-metal-chevron-hlw-73145"
- },
- {
- "sku": "dwtt-71066-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71066-designer-wallcoverings-los-angeles",
- "title": "Mitford Aqua | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2941.jpg?v=1733894789",
- "tags": [
- "Aqua",
- "Architectural",
- "Art Deco",
- "Geometric",
- "light blue",
- "Paramount",
- "Pattern",
- "T2941",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71066-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "dwtt-71069-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71069-designer-wallcoverings-los-angeles",
- "title": "Starleaf Beige | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T2978_6d484ae3-aa54-47ee-ac22-10afe42c1dfe.jpg?v=1733894783",
- "tags": [
- "Architectural",
- "Art Deco",
- "beige",
- "Geometric",
- "Paramount",
- "Pattern",
- "T2978",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71069-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "eur-80362-ncw4352-designer-wallcoverings-los-angeles",
- "handle": "eur-80362-ncw4352-designer-wallcoverings-los-angeles",
- "title": "Bonnelles Diamond 06 - Black Wallcovering | Nina Campbell",
- "vendor": "Nina Campbell",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/nina_crop_7513505464371.jpg?v=1775523620",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Black",
- "Bonnelles Diamond",
- "Champagne",
- "Class A Fire Rated",
- "Cocoa",
- "Coffee",
- "Commercial",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Greige",
- "Hotel Lobby",
- "Latte",
- "Leaf",
- "LES INDIENNES",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Mink",
- "NCW4352",
- "NCW4352-06",
- "Nina Campbell",
- "Nina Campbell Europe",
- "Paper",
- "Silver",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/eur-80362-ncw4352-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47823",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47823",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47823-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719452",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Gold",
- "Commercial",
- "Commercial Wallcovering",
- "Fretwork",
- "Geometric",
- "Glamorous",
- "Gold",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Ivory",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "White",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47823"
- },
- {
- "sku": "ikeley-type-ii-vinyl-wallcovering-xls-47821",
- "handle": "ikeley-type-ii-vinyl-wallcovering-xls-47821",
- "title": "Ikeley Type II Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xls-47821-sample-ikeley-type-ii-vinyl-hollywood-wallcoverings.jpg?v=1775719403",
- "tags": [
- "Abstract",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Champagne",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Geometric",
- "Hollywood Wallcoverings",
- "Ikeley Type 2 Vinyl Wallcovering",
- "Living Room",
- "Modern",
- "Office",
- "Serene",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/ikeley-type-ii-vinyl-wallcovering-xls-47821"
- },
- {
- "sku": "hollywood-tower-deco-xhw-201053",
- "handle": "hollywood-tower-deco-xhw-201053",
- "title": "Hollywood Tower Deco | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/avant-cinema.jpg?v=1777480927",
- "tags": [
- "20 oz",
- "54 Inch Width",
- "54\" Width",
- "Abstract",
- "ACT Colorfastness",
- "ACT Compliant",
- "ACT Crocking",
- "ACT Crocking Tested",
- "ACT Flammability",
- "Architectural",
- "Art Deco",
- "Background Color Gray",
- "Bedroom",
- "Brown",
- "Charcoal Gray",
- "Chevron",
- "Class A Fire Rated",
- "Color: Brown",
- "Commercial",
- "Commercial Wallcovering",
- "Commercial Wallcoverings",
- "Contemporary",
- "Contract Grade",
- "Contract Wallcovering",
- "Faux Finish",
- "Faux Wood",
- "Fire Rated",
- "Flame Certificate Available",
- "Geometric",
- "Gray",
- "Hallway",
- "Healthcare",
- "Hollywood Wallcoverings",
- "Hospitality",
- "Living Room",
- "Mfr-Image-Refreshed",
- "Modern",
- "Moss",
- "Sophisticated",
- "Taupe",
- "Textured",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Type 2 Vinyl",
- "USA",
- "Vinyl",
- "Wallcovering",
- "Warranty Available",
- "Weight: 20 oz",
- "Wide Width",
- "Width: 54\"",
- "Wood",
- "Wood Look"
- ],
- "max_price": 59.87,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/hollywood-tower-deco-xhw-201053"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/XWS-52896-sample-clean.jpg?v=1774481671",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Charcoal",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Grey",
- "Hollywood Wallcoverings",
- "Hotel Lobby",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Stripe",
- "Textured",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xws-52896"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72376",
- "handle": "vaticano-durable-vinyl-dur-72376",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72376-sample-clean.jpg?v=1774485266",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Beige",
- "Class A Fire Rated",
- "Color: Beige",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Living Room",
- "Minimalist",
- "Off-white",
- "Paper",
- "Serene",
- "Transitional",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72376"
- },
- {
- "sku": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904",
- "handle": "st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904",
- "title": "St Lawrence Embossed Contemporary Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/XWQ-52904-sample-clean.jpg?v=1774481680",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Brown",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Embossed",
- "Embossed Texture",
- "Geometric",
- "Hallway",
- "Hollywood Wallcoverings",
- "LEED",
- "Leed Walls",
- "Living Room",
- "Modern",
- "Sophisticated",
- "Stripe",
- "Taupe",
- "Teal",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/st-lawrence-embossed-contemporary-durable-vinyl-walls-xwq-52904"
- },
- {
- "sku": "cubism-drive-hlw-73049",
- "handle": "cubism-drive-hlw-73049",
- "title": "Cubism Drive | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HLW-73049-sample-clean.jpg?v=1774483215",
- "tags": [
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Green",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Copper",
- "Dark Green",
- "Forest Green",
- "Geometric",
- "Green",
- "Hallway",
- "Hollywood Wallcoverings",
- "Living Room",
- "Modern",
- "Natural",
- "Naturally Glamorous",
- "Orange",
- "Sophisticated",
- "Textured",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 159.27,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/cubism-drive-hlw-73049"
- },
- {
- "sku": "dwtt-71757-designer-wallcoverings-los-angeles",
- "handle": "dwtt-71757-designer-wallcoverings-los-angeles",
- "title": "Bahia Metallic Gold on Metallic Gold on Aqua | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T35144_6dbe5e19-7f3c-4ec9-8978-784a24cbf7da.jpg?v=1733893466",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "gold",
- "Graphic Resource",
- "light blue",
- "Metallic Gold on Aqua",
- "Pattern",
- "T35144",
- "Thibaut",
- "Unknown",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-71757-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "medusa-circle-silver-gold-pink-wallcovering-versace",
- "handle": "medusa-circle-silver-gold-pink-wallcovering-versace",
- "title": "Medusa Circle Silver, Gold, Pink Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/593e809cff01210ceeddec366f315919.jpg?v=1773706334",
- "tags": [
- "A.S. Création",
- "AI-Analyzed-v2",
- "Antique Gold",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Circle",
- "Class A Fire Rated",
- "Color: Pink",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Dusty Rose",
- "Geometric",
- "Glamorous",
- "Gold",
- "Gray",
- "Italian",
- "Light Pink",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Maximalist",
- "Medallion",
- "Medusa Circle",
- "Medusa Circle Silver",
- "Paper",
- "Paste the wall",
- "Pink",
- "Pink Wallcovering",
- "Silver",
- "Silver Grey",
- "Trending Wallcovering Collection 2026",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace Home",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/medusa-circle-silver-gold-pink-wallcovering-versace"
- },
- {
- "sku": "regal-lattice-screen-printed-wallpaper-tre-12907",
- "handle": "regal-lattice-screen-printed-wallpaper-tre-12907",
- "title": "Regal Lattice - Screen Printed Wallcovering",
- "vendor": "Atelier Quinze",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/3547fe79068d43fd86725b501b7c7f01.jpg?v=1572309178",
- "tags": [
- "Architectural",
- "Art Deco",
- "Commercial",
- "Designer Wallcoverings",
- "Geometric",
- "Gray",
- "Metallic",
- "Modern",
- "Paper",
- "Screen Print",
- "Silver",
- "Stripe",
- "Suede",
- "Textured",
- "Trellis",
- "Wallcovering"
- ],
- "max_price": 142.16,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/regal-lattice-screen-printed-wallpaper-tre-12907"
- },
- {
- "sku": "dwtt-72109-designer-wallcoverings-los-angeles",
- "handle": "dwtt-72109-designer-wallcoverings-los-angeles",
- "title": "Prescott Metallic on Taupe | Thibaut",
- "vendor": "Thibaut",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/T1870.jpg?v=1733892727",
- "tags": [
- "Architectural",
- "Art Deco",
- "Geometric",
- "Geometric Resource",
- "gold",
- "Metallic on Taupe",
- "Modern",
- "Pattern",
- "T1870",
- "taupe",
- "Thibaut",
- "Unknown",
- "Wallcovering",
- "white"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwtt-72109-designer-wallcoverings-los-angeles"
- },
- {
- "sku": "i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2",
- "handle": "i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2",
- "title": "I Love Baroque Medusa Stripe Mauve Wallcovering | Versace",
- "vendor": "Versace",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/2329a841d3f94e6c2323aed9612df77f.webp?v=1773710682",
- "tags": [
- "[Object Object]",
- "A.S. Création",
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Dining Room",
- "display_variant",
- "Glamorous",
- "Gray",
- "I Love Baroque Medusa Stripe",
- "I Love Baroque Medusa Stripe Mauve Wallcovering",
- "Italian",
- "Living Room",
- "Luxe",
- "Luxurious",
- "Luxury",
- "Needs-Image",
- "Paper",
- "Paste the wall",
- "Regencycore",
- "Stripe",
- "Textured",
- "Traditional",
- "Trending Wallpaper Collection 2026",
- "Versace",
- "Versace VI",
- "Vinyl",
- "Wallcovering"
- ],
- "max_price": 434.39,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/i-love-baroque-medusa-stripe-mauve-wallcovering-versace-2"
- },
- {
- "sku": "dwss-72659",
- "handle": "dwss-72659",
- "title": "Bok light green Sample Wallcovering | Sandberg",
- "vendor": "Sandberg",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/710-28_image1_9e478367-7370-40ce-8720-e8907ec4f887.jpg?v=1646104975",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bok",
- "Bok light green Sample",
- "Class A Fire Rated",
- "Commercial",
- "Geometric",
- "Honeydew",
- "LIGHT GREEN",
- "Light Seagreen",
- "P710-28",
- "Paper",
- "Pattern",
- "Sandberg",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/dwss-72659"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72381",
- "handle": "vaticano-durable-vinyl-dur-72381",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72381-sample-clean.jpg?v=1774485290",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Class A Fire Rated",
- "Color: Grey",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Gold",
- "Gray",
- "Grey",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Lattice",
- "Light Gray",
- "Living Room",
- "Minimalist",
- "Modern",
- "Paper",
- "Sophisticated",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "Yellow"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72381"
- },
- {
- "sku": "vaticano-durable-vinyl-dur-72375",
- "handle": "vaticano-durable-vinyl-dur-72375",
- "title": "Vaticano Durable Vinyl | Hollywood Wallcoverings",
- "vendor": "Hollywood Wallcoverings",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DUR-72375-sample-clean.jpg?v=1774485261",
- "tags": [
- "AI-Analyzed-v2",
- "Architectural",
- "Art Deco",
- "Bedroom",
- "Blue",
- "Class A Fire Rated",
- "Color: Blue",
- "Commercial",
- "Commercial Wallcovering",
- "Contemporary",
- "Cornflower Blue",
- "Durable Type 2 Vinyl",
- "Fretwork",
- "Geometric",
- "Hallway",
- "Hollywood Textures Vol. 1",
- "Hollywood Wallcoverings",
- "Light Blue",
- "Living Room",
- "Modern",
- "Serene",
- "Type 2",
- "Type 2 Durable Vinyl",
- "Vaticano Durable Vinyl",
- "Vinyl",
- "Wallcovering",
- "White"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/vaticano-durable-vinyl-dur-72375"
- },
- {
- "sku": "agra-okra-arte-international",
- "handle": "agra-okra-arte-international",
- "title": "Agra Okra Wallcovering | Arte International",
- "vendor": "Arte International",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Agra_18310_Roomshot_Web_LR-medium-two-thirds.jpg?v=1775694511",
- "tags": [
- "18310",
- "Animal",
- "Art Deco",
- "Arte International",
- "Botanical",
- "Class A",
- "Geometric",
- "Green",
- "indienne",
- "Insects",
- "Light Gray",
- "New Arrival",
- "Non-woven",
- "Pale Green",
- "Sage",
- "Sage Green",
- "Seafoam Green",
- "Tropical",
- "Vinyl wallpaper on paper backing",
- "Wallcovering",
- "Wheat"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/agra-okra-arte-international"
- },
- {
- "sku": "poona-stone-arte",
- "handle": "poona-stone-arte",
- "title": "Poona Stone Wallcovering | Arte International",
- "vendor": "Arte International",
- "product_type": "Wallcovering",
- "image_url": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Indienne_Poona_18300_Roomshot_Web_LR-og_2018d1c6-6247-46e3-959d-95569075202b.jpg?v=1775597785",
- "tags": [
- "Animal",
- "Art Deco",
- "Beige",
- "Coral",
- "Geometric",
- "indienne",
- "Insects",
- "Light Brown",
- "New Arrival",
- "Non-woven",
- "Red",
- "Stripe",
- "Tan",
- "Traditional",
- "Wallcovering"
- ],
- "max_price": 4.25,
- "aesthetic": "all",
- "product_url": "https://designerwallcoverings.com/products/poona-stone-arte"
- }
-]
\ No newline at end of file
diff --git a/public/hero-bg.jpg.pre-pass9.bak b/public/hero-bg.jpg.pre-pass9.bak
deleted file mode 100644
index 11eb8ae..0000000
Binary files a/public/hero-bg.jpg.pre-pass9.bak and /dev/null differ
diff --git a/public/index.html.bak.1778114769296 b/public/index.html.bak.1778114769296
deleted file mode 100644
index e920ecc..0000000
--- a/public/index.html.bak.1778114769296
+++ /dev/null
@@ -1,630 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s WALLPAPER — Streamline moderne</title>
-<meta name="description" content="1930s WALLPAPER · Streamline moderne. Curated wallcoverings sourced through the Designer Wallcoverings trade channel.">
-<meta name="theme-color" content="#0d1419">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "1930s WALLPAPER",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com",
- "parentOrganization": {
- "@type": "Organization",
- "name": "Designer Wallcoverings",
- "url": "https://designerwallcoverings.com/"
- }
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #0d1419;
- --paper: #ffffff;
- --muted: #7a8a9a;
- --line: rgba(255,255,255,0.10);
- --accent: #9eb8c8;
- --bg-soft: #1a2530;
- --cols: 6; /* default grid density — slider controls this */
-}
-html[data-theme="light"] {
- --bg: #fafaf6;
- --paper: #1b1814;
- --muted: #6b5f56;
- --line: rgba(10,9,5,0.12);
- --accent: #294f65;
- --bg-soft: #c9d3d9;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; mix-blend-mode:difference; color:#fff; z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'dark'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">A specialty archive within the Designer Wallcoverings family. Curated streamline · machine age · chrome from heritage mills, fulfilled through the DW trade channel — memo samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7">DesignerWallcoverings.com — Authorized Trade Channel</p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <!-- mini-constellation: every storefront shows its position in the family -->
- <div style="max-width:1400px;margin:0 auto 24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
- <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px">
- <div>
- <div style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px">★ DW FAMILY · 43 niches</div>
- <div style="font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;color:var(--paper);letter-spacing:0.01em">You're on <span style="color:var(--accent);font-weight:500">1930swallpaper</span>. Hover any star to leap.</div>
- </div>
- <a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);padding:8px 14px">DW Universe →</a>
- </div>
- <svg id="miniConst" viewBox="0 0 1080 200" style="width:100%;height:200px;display:block" role="img" aria-label="DW family constellation: 43 niche sites; current site highlighted">
- <defs>
- <pattern id="dna-mat" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#c9b687" stroke-width="0.6"/></pattern>
- <pattern id="dna-dec" width="8" height="5" patternUnits="userSpaceOnUse"><polyline points="0,4 4,1 8,4" stroke="#b86a4a" stroke-width="0.6" fill="none"/></pattern>
- <pattern id="dna-cra" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)"><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="#6b8e6f" stroke-width="0.5" stroke-dasharray="1.4 1.2"/></pattern>
- <pattern id="dna-use" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 0 M0 0 L0 4" stroke="#4a6b8e" stroke-width="0.4" fill="none"/></pattern>
- </defs>
- </svg>
- <div style="display:flex;justify-content:space-between;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;padding:0 8px">
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#c9b687;border-radius:50%"></i>Material</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#b86a4a;border-radius:50%"></i>Decade</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#6b8e6f;border-radius:50%"></i>Craft</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#4a6b8e;border-radius:50%"></i>Use-case</span>
- </div>
- </div>
-
- <div class="footer-bottom">
- <span>1930swallpaper.com · a designer wallcoverings family vertical</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'dark');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.1778117945086 b/public/index.html.bak.1778117945086
deleted file mode 100644
index c4b4df2..0000000
--- a/public/index.html.bak.1778117945086
+++ /dev/null
@@ -1,649 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s WALLPAPER — Streamline moderne</title>
-<meta name="description" content="1930s WALLPAPER · Streamline moderne. Curated wallcoverings sourced through the Designer Wallcoverings trade channel.">
-<meta name="theme-color" content="#0d1419">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "1930s WALLPAPER",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com",
- "parentOrganization": {
- "@type": "Organization",
- "name": "Designer Wallcoverings",
- "url": "https://designerwallcoverings.com/"
- }
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #0d1419;
- --paper: #ffffff;
- --muted: #7a8a9a;
- --line: rgba(255,255,255,0.10);
- --accent: #9eb8c8;
- --bg-soft: #1a2530;
- --cols: 6; /* default grid density — slider controls this */
-}
-html[data-theme="light"] {
- --bg: #fafaf6;
- --paper: #1b1814;
- --muted: #6b5f56;
- --line: rgba(10,9,5,0.12);
- --accent: #294f65;
- --bg-soft: #c9d3d9;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; mix-blend-mode:difference; color:#fff; z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'dark'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">A specialty archive within the Designer Wallcoverings family. Curated streamline · machine age · chrome from heritage mills, fulfilled through the DW trade channel — memo samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7">DesignerWallcoverings.com — Authorized Trade Channel</p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <!-- mini-constellation: every storefront shows its position in the family -->
- <div style="max-width:1400px;margin:0 auto 24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
- <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px">
- <div>
- <div style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px">★ DW FAMILY · 43 niches</div>
- <div style="font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;color:var(--paper);letter-spacing:0.01em">You're on <span style="color:var(--accent);font-weight:500">1930swallpaper</span>. Hover any star to leap.</div>
- </div>
- <a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);padding:8px 14px">DW Universe →</a>
- </div>
- <svg id="miniConst" viewBox="0 0 1080 200" style="width:100%;height:200px;display:block" role="img" aria-label="DW family constellation: 43 niche sites; current site highlighted">
- <defs>
- <pattern id="dna-mat" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#c9b687" stroke-width="0.6"/></pattern>
- <pattern id="dna-dec" width="8" height="5" patternUnits="userSpaceOnUse"><polyline points="0,4 4,1 8,4" stroke="#b86a4a" stroke-width="0.6" fill="none"/></pattern>
- <pattern id="dna-cra" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)"><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="#6b8e6f" stroke-width="0.5" stroke-dasharray="1.4 1.2"/></pattern>
- <pattern id="dna-use" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 0 M0 0 L0 4" stroke="#4a6b8e" stroke-width="0.4" fill="none"/></pattern>
- </defs>
- </svg>
- <div style="display:flex;justify-content:space-between;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;padding:0 8px">
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#c9b687;border-radius:50%"></i>Material</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#b86a4a;border-radius:50%"></i>Decade</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#6b8e6f;border-radius:50%"></i>Craft</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#4a6b8e;border-radius:50%"></i>Use-case</span>
- </div>
- </div>
-
- <div class="footer-bottom">
- <span>1930swallpaper.com · a designer wallcoverings family vertical</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'dark');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.1778124816336 b/public/index.html.bak.1778124816336
deleted file mode 100644
index 2447ed2..0000000
--- a/public/index.html.bak.1778124816336
+++ /dev/null
@@ -1,676 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s WALLPAPER — Streamline moderne</title>
-<meta name="description" content="1930s WALLPAPER · Streamline moderne. Curated wallcoverings sourced through the Designer Wallcoverings trade channel.">
-<meta name="theme-color" content="#0d1419">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "1930s WALLPAPER",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com",
- "parentOrganization": {
- "@type": "Organization",
- "name": "Designer Wallcoverings",
- "url": "https://designerwallcoverings.com/"
- }
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #0d1419;
- --paper: #ffffff;
- --muted: #7a8a9a;
- --line: rgba(255,255,255,0.10);
- --accent: #9eb8c8;
- --bg-soft: #1a2530;
- --cols: 6; /* default grid density — slider controls this */
-}
-html[data-theme="light"] {
- --bg: #fafaf6;
- --paper: #1b1814;
- --muted: #6b5f56;
- --line: rgba(10,9,5,0.12);
- --accent: #294f65;
- --bg-soft: #c9d3d9;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'dark'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">A specialty archive within the Designer Wallcoverings family. Curated streamline · machine age · chrome from heritage mills, fulfilled through the DW trade channel — memo samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7">DesignerWallcoverings.com — Authorized Trade Channel</p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <!-- mini-constellation: every storefront shows its position in the family -->
- <div style="max-width:1400px;margin:0 auto 24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
- <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px">
- <div>
- <div style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px">★ DW FAMILY · 43 niches</div>
- <div style="font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;color:var(--paper);letter-spacing:0.01em">You're on <span style="color:var(--accent);font-weight:500">1930swallpaper</span>. Hover any star to leap.</div>
- </div>
- <a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);padding:8px 14px">DW Universe →</a>
- </div>
- <svg id="miniConst" viewBox="0 0 1080 200" style="width:100%;height:200px;display:block" role="img" aria-label="DW family constellation: 43 niche sites; current site highlighted">
- <defs>
- <pattern id="dna-mat" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#c9b687" stroke-width="0.6"/></pattern>
- <pattern id="dna-dec" width="8" height="5" patternUnits="userSpaceOnUse"><polyline points="0,4 4,1 8,4" stroke="#b86a4a" stroke-width="0.6" fill="none"/></pattern>
- <pattern id="dna-cra" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)"><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="#6b8e6f" stroke-width="0.5" stroke-dasharray="1.4 1.2"/></pattern>
- <pattern id="dna-use" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 0 M0 0 L0 4" stroke="#4a6b8e" stroke-width="0.4" fill="none"/></pattern>
- </defs>
- </svg>
- <div style="display:flex;justify-content:space-between;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;padding:0 8px">
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#c9b687;border-radius:50%"></i>Material</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#b86a4a;border-radius:50%"></i>Decade</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#6b8e6f;border-radius:50%"></i>Craft</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#4a6b8e;border-radius:50%"></i>Use-case</span>
- </div>
- </div>
-
- <div class="footer-bottom">
- <span>1930swallpaper.com · a designer wallcoverings family vertical</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'dark');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.1778166279709 b/public/index.html.bak.1778166279709
deleted file mode 100644
index 222d1d5..0000000
--- a/public/index.html.bak.1778166279709
+++ /dev/null
@@ -1,654 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.1778185356229 b/public/index.html.bak.1778185356229
deleted file mode 100644
index 06bba36..0000000
--- a/public/index.html.bak.1778185356229
+++ /dev/null
@@ -1,731 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s Wallpaper</title>
-<meta name="description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.btn.1778168679402 b/public/index.html.bak.btn.1778168679402
deleted file mode 100644
index 656ba17..0000000
--- a/public/index.html.bak.btn.1778168679402
+++ /dev/null
@@ -1,663 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.btn2.1778169410195 b/public/index.html.bak.btn2.1778169410195
deleted file mode 100644
index 2b3ba37..0000000
--- a/public/index.html.bak.btn2.1778169410195
+++ /dev/null
@@ -1,664 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--accent, var(--gold, #c9a14b));border:1px solid var(--accent, var(--gold, #c9a14b));padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--accent, var(--gold, #c9a14b));color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.dom.1778168197432 b/public/index.html.bak.dom.1778168197432
deleted file mode 100644
index 92678c8..0000000
--- a/public/index.html.bak.dom.1778168197432
+++ /dev/null
@@ -1,663 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.dwfoot.1778203445597 b/public/index.html.bak.dwfoot.1778203445597
deleted file mode 100644
index 12d50d9..0000000
--- a/public/index.html.bak.dwfoot.1778203445597
+++ /dev/null
@@ -1,969 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s Wallpaper</div>
- <p class="footer-text">1930s Wallpaper is a specialty streamline moderne archive within the Designer Wallcoverings family. Real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.gtagev.1778426582777 b/public/index.html.bak.gtagev.1778426582777
deleted file mode 100644
index 638adfb..0000000
--- a/public/index.html.bak.gtagev.1778426582777
+++ /dev/null
@@ -1,977 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@1930swallpaper.com?subject=Atelier%20Quinze%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@1930swallpaper.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.ns-canonical b/public/index.html.bak.ns-canonical
deleted file mode 100644
index e33694c..0000000
--- a/public/index.html.bak.ns-canonical
+++ /dev/null
@@ -1,984 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@1930swallpaper.com?subject=Atelier%20Quinze%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@1930swallpaper.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- try { if (typeof gtag === 'function') gtag('event', 'modal_open', { modal_name: name, sku: (opts && opts.sku) || '' }); } catch(_){}
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- try {
- if (typeof gtag === 'function') {
- if (kind === 'sample') gtag('event', 'memo_request', { sku: data.sku || '', title: data.title || '' });
- else gtag('event', 'lead', { form_type: kind });
- }
- } catch(_){}
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.nspropagate.1778201378049 b/public/index.html.bak.nspropagate.1778201378049
deleted file mode 100644
index d1ce47f..0000000
--- a/public/index.html.bak.nspropagate.1778201378049
+++ /dev/null
@@ -1,731 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.nspropagate.1778203385035 b/public/index.html.bak.nspropagate.1778203385035
deleted file mode 100644
index f119e27..0000000
--- a/public/index.html.bak.nspropagate.1778203385035
+++ /dev/null
@@ -1,954 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<header class="ns-header">
- <a href="#home" class="ns-brand" aria-label="Atelier Quinze home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="#home">Home</a>
- <a href="#colors">Colors</a>
- <a href="#specifications">Specifications</a>
- <a href="fire-ratings.html">Fire Ratings</a>
- <a href="faq.html">FAQ</a>
- <a href="about.html">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.com · Designer Wallcoverings</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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s Wallpaper</div>
- <p class="footer-text">1930s Wallpaper is a specialty streamline moderne archive within the Designer Wallcoverings family. Real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.nspropagate.1778209714999 b/public/index.html.bak.nspropagate.1778209714999
deleted file mode 100644
index 795acc8..0000000
--- a/public/index.html.bak.nspropagate.1778209714999
+++ /dev/null
@@ -1,969 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.nspropagate.1778226815104 b/public/index.html.bak.nspropagate.1778226815104
deleted file mode 100644
index e28bc79..0000000
--- a/public/index.html.bak.nspropagate.1778226815104
+++ /dev/null
@@ -1,971 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@1930swallpaper.com?subject=Atelier%20Quinze%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@1930swallpaper.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.bak.nspropagate.1778226888759 b/public/index.html.bak.nspropagate.1778226888759
deleted file mode 100644
index 7c4c5a7..0000000
--- a/public/index.html.bak.nspropagate.1778226888759
+++ /dev/null
@@ -1,973 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@1930swallpaper.com?subject=Atelier%20Quinze%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@1930swallpaper.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-corner-mark-fix.bak b/public/index.html.pre-corner-mark-fix.bak
deleted file mode 100644
index e5d7b8a..0000000
--- a/public/index.html.pre-corner-mark-fix.bak
+++ /dev/null
@@ -1,676 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s WALLPAPER — Streamline moderne</title>
-<meta name="description" content="1930s WALLPAPER · Streamline moderne. Curated wallcoverings sourced through the Designer Wallcoverings trade channel.">
-<meta name="theme-color" content="#0d1419">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "1930s WALLPAPER",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com",
- "parentOrganization": {
- "@type": "Organization",
- "name": "Designer Wallcoverings",
- "url": "https://designerwallcoverings.com/"
- }
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #0d1419;
- --paper: #ffffff;
- --muted: #7a8a9a;
- --line: rgba(255,255,255,0.10);
- --accent: #9eb8c8;
- --bg-soft: #1a2530;
- --cols: 6; /* default grid density — slider controls this */
-}
-html[data-theme="light"] {
- --bg: #fafaf6;
- --paper: #1b1814;
- --muted: #6b5f56;
- --line: rgba(10,9,5,0.12);
- --accent: #294f65;
- --bg-soft: #c9d3d9;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; mix-blend-mode:difference; color:#fff; z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'dark'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">A specialty archive within the Designer Wallcoverings family. Curated streamline · machine age · chrome from heritage mills, fulfilled through the DW trade channel — memo samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7">DesignerWallcoverings.com — Authorized Trade Channel</p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <!-- mini-constellation: every storefront shows its position in the family -->
- <div style="max-width:1400px;margin:0 auto 24px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
- <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px">
- <div>
- <div style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px">★ DW FAMILY · 43 niches</div>
- <div style="font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:18px;color:var(--paper);letter-spacing:0.01em">You're on <span style="color:var(--accent);font-weight:500">1930swallpaper</span>. Hover any star to leap.</div>
- </div>
- <a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);padding:8px 14px">DW Universe →</a>
- </div>
- <svg id="miniConst" viewBox="0 0 1080 200" style="width:100%;height:200px;display:block" role="img" aria-label="DW family constellation: 43 niche sites; current site highlighted">
- <defs>
- <pattern id="dna-mat" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#c9b687" stroke-width="0.6"/></pattern>
- <pattern id="dna-dec" width="8" height="5" patternUnits="userSpaceOnUse"><polyline points="0,4 4,1 8,4" stroke="#b86a4a" stroke-width="0.6" fill="none"/></pattern>
- <pattern id="dna-cra" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)"><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="#6b8e6f" stroke-width="0.5" stroke-dasharray="1.4 1.2"/></pattern>
- <pattern id="dna-use" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0 0 L4 0 M0 0 L0 4" stroke="#4a6b8e" stroke-width="0.4" fill="none"/></pattern>
- </defs>
- </svg>
- <div style="display:flex;justify-content:space-between;font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px;padding:0 8px">
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#c9b687;border-radius:50%"></i>Material</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#b86a4a;border-radius:50%"></i>Decade</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#6b8e6f;border-radius:50%"></i>Craft</span>
- <span style="display:flex;align-items:center;gap:5px"><i style="display:inline-block;width:6px;height:6px;background:#4a6b8e;border-radius:50%"></i>Use-case</span>
- </div>
- </div>
-
- <div class="footer-bottom">
- <span>1930swallpaper.com · a designer wallcoverings family vertical</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span><a href="https://retrowalls.com/universe/" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;letter-spacing:0.18em">DW Universe — search all 43 niches at once →</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'dark');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass10.bak b/public/index.html.pre-pass10.bak
deleted file mode 100644
index 13e7b2e..0000000
--- a/public/index.html.pre-pass10.bak
+++ /dev/null
@@ -1,676 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s Wallpaper</title>
-<meta name="description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass11.bak b/public/index.html.pre-pass11.bak
deleted file mode 100644
index 1a5f785..0000000
--- a/public/index.html.pre-pass11.bak
+++ /dev/null
@@ -1,676 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>1930s Wallpaper</title>
-<meta name="description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass13.bak b/public/index.html.pre-pass13.bak
deleted file mode 100644
index 70e24a9..0000000
--- a/public/index.html.pre-pass13.bak
+++ /dev/null
@@ -1,936 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a98b5b 0%, #5d4c32 60%, #332a1b 100%); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav { display: flex; gap: 32px; align-items: center; list-style: none; padding: 0; margin: 0; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; padding: 0 !important; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- @media (max-width: 820px) { .ns-header { padding: 14px 18px; } .ns-nav { gap: 16px; } .ns-nav a, .ns-nav button { font-size: 13px !important; } }
- @media (max-width: 760px) {
- .ns-header { flex-wrap: wrap; }
- .ns-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 4px; }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button { padding: 10px 0 !important; border-bottom: 1px solid rgba(245,241,232,0.08); width: 100%; text-align: left; }
- .ns-nav a:nth-child(n+5), .ns-nav button:nth-child(n+5) { display: block !important; }
- .ns-header .mobile-toggle { display: flex !important; }
- }
- @media (min-width: 761px) {
- .ns-header .mobile-toggle { display: none !important; }
- }
- .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); }
- .ns-modal.show { display: flex; }
- .ns-modal-card { max-width: 460px; width: 100%; background: #141414 !important; border: 1px solid rgba(245,241,232,0.14); border-radius: 6px; padding: 28px 30px 30px; position: relative; }
- .ns-modal-card .close-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; background: none; border: 1px solid rgba(245,241,232,0.18); color: rgba(245,241,232,0.6) !important; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
- .ns-modal-card .close-x:hover { color: #ffffff !important; border-color: #ffffff; }
- .ns-modal-card h3 { font-family: -apple-system, "SF Pro Display", system-ui; font-weight: 300 !important; font-size: 22px !important; margin: 0 0 6px !important; color: #f5f1e8 !important; }
- .ns-modal-card .sub { color: rgba(245,241,232,0.65) !important; font-size: 13px; margin: 0 0 22px; }
- .ns-actions { display: flex; flex-direction: column; gap: 10px; }
- .ns-action { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(245,241,232,0.04) !important; border: 1px solid rgba(245,241,232,0.12) !important; color: #f5f1e8 !important; text-decoration: none !important; cursor: pointer; transition: all 200ms; font: inherit; text-align: left; }
- .ns-action:hover { background: rgba(245,241,232,0.08) !important; border-color: #d4b683 !important; }
- .ns-action .ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(212,182,131,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
- .ns-action .txt { flex: 1; }
- .ns-action .txt b { display: block; font-weight: 500; font-size: 14px; color: #f5f1e8 !important; }
- .ns-action .txt span { font-size: 12px; color: rgba(245,241,232,0.55) !important; }
-
- /* ─── FINAL CONTRAST PASS — kill remaining gold-solid + white-island defects ─── */
- /* Replace all gold-fill accents with off-white (Gucci-aesthetic, no DW gold solids) */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active,
- .drapery-btn, .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover,
- .drapery-btn:hover, .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- /* Gold accents stay only as edge color (links, glyphs) — not fills */
- a { color: #d4b683; }
- a:hover { color: #f5d97a; }
- /* Authorized-dealer footer line — small caps tracked, muted ink, no gold pill */
- .authorized, .authorized-dealer p {
- background: transparent !important;
- color: rgba(245,241,232,0.5) !important;
- font-size: 10px !important;
- letter-spacing: 0.22em !important;
- text-transform: uppercase !important;
- padding: 0 !important;
- border: none !important;
- margin-top: 14px !important;
- }
- /* Kill any straggler white bg in info-card / sample-related cards */
- .info-card, .info-card-link, .care-highlight, .feature-card, .spec-item {
- background-color: rgba(245,241,232,0.04) !important;
- border-color: rgba(245,241,232,0.12) !important;
- }
- /* Ensure modal content stays readable — Steve's earlier sweep made it #141414 with white text */
- .modal-content { background: #141414 !important; color: #f5f1e8 !important; }
- .modal-content * { color: #f5f1e8 !important; }
- .modal-content input, .modal-content textarea, .modal-content select {
- background: rgba(245,241,232,0.05) !important;
- color: #f5f1e8 !important;
- border-color: rgba(245,241,232,0.2) !important;
- }
- .modal-content label { color: rgba(245,241,232,0.6) !important; }
- /* Force the wide-tracked NOVASUEDE wordmark to stay white */
- .ns-wordmark, .ns-wordmark sup { color: #f5f1e8 !important; }
-
- /* ─── Modal-internal contrast (post-QA defects) ─── */
- /* Backdrop covers full viewport */
- .modal { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(6px); }
- /* Chip — flip from white-on-white island to dark card */
- .request-chip {
- background: rgba(245, 241, 232, 0.06) !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.18) !important;
- border-radius: 4px !important;
- }
- .request-chip * { color: #f5f1e8 !important; }
- .request-chip .chip-swatch {
- /* swatch dot ALWAYS displays the inline-style hex from JS — fight any sweep */
- border: 1px solid rgba(0, 0, 0, 0.4) !important;
- }
- /* + Add to request — hairline white-border on transparent (no gold) */
- .add-to-request-btn {
- background: transparent !important;
- color: #f5f1e8 !important;
- border: 1px solid rgba(245, 241, 232, 0.6) !important;
- border-radius: 0 !important;
- padding: 12px 22px !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 400 !important;
- }
- .add-to-request-btn:hover {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- /* Hex caption visible */
- .preview-hex, #colorPreviewHex {
- display: block !important;
- color: rgba(245, 241, 232, 0.55) !important;
- font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
- font-size: 11px !important;
- margin-top: 4px !important;
- letter-spacing: 0.04em !important;
- text-transform: lowercase !important;
- }
- /* Color preview name — stays single, prominent */
- #colorPreviewName {
- color: #f5f1e8 !important;
- font-size: 11px !important;
- letter-spacing: 0.32em !important;
- text-transform: uppercase !important;
- font-weight: 500 !important;
- display: block !important;
- margin-top: 12px !important;
- }
-
- /* ─── Mobile hamburger nav (replaces the overflow at <760px) ─── */
- @media (max-width: 760px) {
- header .nav-container { flex-wrap: wrap; }
- header nav { display: none; flex-basis: 100%; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
- header nav.open { display: flex; }
- header nav a { padding: 10px 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
- header .mobile-toggle {
- display: flex !important;
- flex-direction: column;
- gap: 5px;
- background: transparent;
- border: 0;
- cursor: pointer;
- padding: 8px;
- }
- header .mobile-toggle span {
- width: 22px; height: 1.5px;
- background: #f5f1e8;
- display: block;
- }
- }
- @media (min-width: 761px) {
- header .mobile-toggle { display: none !important; }
- }
-
- </style>
-<header class="ns-header">
- <a href="#home" class="ns-brand" aria-label="Atelier Quinze home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="#home">Home</a>
- <a href="#colors">Colors</a>
- <a href="#specifications">Specifications</a>
- <a href="fire-ratings.html">Fire Ratings</a>
- <a href="faq.html">FAQ</a>
- <a href="about.html">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@novasuede.com?subject=Novasuede%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@novasuede.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass5-serif.bak b/public/index.html.pre-pass5-serif.bak
deleted file mode 100644
index 462e16f..0000000
--- a/public/index.html.pre-pass5-serif.bak
+++ /dev/null
@@ -1,647 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass7-override.bak b/public/index.html.pre-pass7-override.bak
deleted file mode 100644
index ab12198..0000000
--- a/public/index.html.pre-pass7-override.bak
+++ /dev/null
@@ -1,663 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
- .dwm-submit:hover{opacity:0.85}
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-pass9.bak b/public/index.html.pre-pass9.bak
deleted file mode 100644
index 9cd7f6f..0000000
--- a/public/index.html.pre-pass9.bak
+++ /dev/null
@@ -1,664 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:30px; letter-spacing:0.32em }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-</head>
-<body>
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s WALLPAPER<span class="tm">.</span><span class="sub">Streamline moderne</span></div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">1930s WALLPAPER</div>
- <p class="footer-text">Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-(async function hydrateHero() {
- try {
- const r = await fetch('/api/products?limit=1');
- if (!r.ok) return;
- const d = await r.json();
- let url = d.items && d.items[0] && d.items[0].image_url;
- if (!url) return;
- if (/^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(url)) {
- url = url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- }
- } catch(e){}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-</script>
-
-</body>
-</html>
diff --git a/public/index.html.pre-sort-frontend b/public/index.html.pre-sort-frontend
deleted file mode 100644
index 3568909..0000000
--- a/public/index.html.pre-sort-frontend
+++ /dev/null
@@ -1,857 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-
-<meta charset="utf-8">
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-J0L3BF5SP8"></script>
-<script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'G-J0L3BF5SP8');
-</script>
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Atelier Quinze — 1930s-era pattern. Always.</title>
-<meta name="description" content="Atelier Quinze is a curated atelier dedicated entirely to 1930s-era pattern. We do one thing — and we do it carefully.">
-<meta name="theme-color" content="#FFF">
-<link rel="canonical" href="https://1930swallpaper.com/">
-<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
-<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
-<script type="application/ld+json">
-{
- "@context": "https://schema.org",
- "@type": "Organization",
- "name": "Atelier Quinze",
- "url": "https://1930swallpaper.com/",
- "email": "info@1930swallpaper.com"
-}
-</script>
-<script src="/zd-loader.js" defer></script>
-<style>
-:root {
- --bg: #FFF;
- --paper: #000;
- --muted: #8B7866;
- --line: #000;
- --accent: #000;
- --bg-soft: #000;
- --cols: 6;
-}
-html[data-theme="dark"] {
- --bg: #1a1410;
- --paper: #FFF;
- --muted: #C9B89E;
- --line: rgba(255,254,250,0.12);
- --accent: #000;
- --bg-soft: #2a1f15;
-}
-* { margin:0; padding:0; box-sizing:border-box }
-html { scroll-behavior:smooth }
-body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
-/* DW-FASHION-TEMPLATE-OVERRIDE */
-.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Bodoni Moda', Georgia, serif !important; font-weight:400 !important; letter-spacing:0.02em !important; }
-
-/* ===== Auto-hide header ===== */
-header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
-.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
-.h-link:hover { opacity:0.7 }
-.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
-
-/* ===== Cinema hero ===== */
-.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
-.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
-.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
-.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
-.corner-mark::before { content:"◆ "; margin-right:6px }
-.center-mark { position:absolute; top:clamp(80px,12vh,140px); left:50%; transform:translateX(-50%); font-size:clamp(28px,4vw,56px); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); z-index:5 }
-.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
-.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
-.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
-.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
-.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
-.enter:hover { gap:22px }
-.enter svg { width:24px; height:12px }
-
-/* ===== Section ===== */
-.section { padding:96px 32px }
-.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
-.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
-.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
-.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
-.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
-
-/* ===== Filter bar ===== */
-.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
-.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
-.chip:hover { border-color:var(--paper) }
-.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
-.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
-.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
-.search input::placeholder { color:var(--muted) }
-.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
-
-/* ===== Grid-density slider ===== */
-.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
-.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
-.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
-.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
-.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
-.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
-
-/* ===== Stats line ===== */
-.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
-
-/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
-.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
-.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
-.card:hover { transform:scale(1.04); z-index:5 }
-.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
-.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
-.card:hover .overlay { transform:translateY(0); opacity:1 }
-.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
-.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
-.card .actions { margin-top:10px; display:flex; gap:6px }
-.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
-.card .sample-btn:hover { background:var(--accent); color:#fff }
-
-@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
-
-.sentinel { height:1px }
-.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
-
-/* ===== Footer ===== */
-footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
-.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
-.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
-.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
-.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
-.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
-.footer-col a:hover { color:var(--accent) }
-.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
-
-@media (max-width:720px) {
- .corner-mark, .meta-line, .enter { font-size:10px }
- .center-mark { font-size:24px; letter-spacing:0.12em; top:clamp(60px,9vh,90px) }
- .section, footer { padding-left:20px; padding-right:20px }
- .footer-grid { grid-template-columns:1fr; gap:32px }
- .search { margin-left:0; flex:1 1 100% }
-}
-
-.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
-.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
-
-/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
-/* Strictly :focus-visible so mouse clicks do NOT show the ring */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
-}
-</style>
-<script>
-(function(){ try { var t = localStorage.getItem('w30_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
-</script>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap">
-
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://1930swallpaper.com/">
-<meta property="og:title" content="1930s Wallpaper">
-<meta property="og:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta property="og:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<meta property="og:site_name" content="1930s Wallpaper">
-<meta property="article:publisher" content="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="1930s Wallpaper">
-<meta name="twitter:description" content="1930s Wallpaper — Streamline moderne & machine-age wallcoverings.">
-<meta name="twitter:image" content="https://1930swallpaper.com/hero-bg.jpg">
-<!-- graphics-loop pass 13: footer + fb -->
-</head>
-<body>
-<style id="ns-header-modal-styles">
- .ns-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,241,232,0.06); }
- .ns-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
- .ns-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ns-dot-bg, radial-gradient(circle at 35% 35%, #b66a4d 0%, #8a4a30 60%, #5a2d1c 100%)); box-shadow: 0 0 0 1px rgba(245,241,232,0.10), 0 2px 12px rgba(180,90,60,0.30); flex-shrink: 0; }
- .ns-name { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #f5f1e8 !important; text-transform: none !important; margin: 0 !important; }
- .ns-name sup { font-size: 0.55em; font-weight: 300; margin-left: 1px; }
- .ns-nav a, .ns-nav button { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 15px !important; font-weight: 400 !important; color: #f5f1e8 !important; text-decoration: none !important; background: none !important; border: 0 !important; cursor: pointer; transition: color 200ms; letter-spacing: 0 !important; text-transform: none !important; }
- .ns-nav a:hover, .ns-nav button:hover { color: #ffffff !important; }
- /* All widths: hide nav by default, hamburger always visible on right, nav opens as right-anchored dropdown panel */
- .ns-nav {
- display: none !important;
- position: absolute; top: 100%; right: 18px;
- flex-direction: column; align-items: stretch; gap: 0;
- background: rgba(10,10,10,0.96); backdrop-filter: blur(10px);
- border: 1px solid rgba(245,241,232,0.10); border-top: 0;
- min-width: 220px; padding: 10px 0; margin: 0;
- box-shadow: 0 16px 40px rgba(0,0,0,0.55);
- z-index: 150;
- }
- .ns-nav.open { display: flex !important; }
- .ns-nav a, .ns-nav button {
- padding: 12px 22px !important;
- border-bottom: 1px solid rgba(245,241,232,0.06);
- width: 100%; text-align: left;
- }
- .ns-nav a:last-child, .ns-nav button:last-child { border-bottom: 0; }
- .ns-nav a:hover, .ns-nav button:hover { background: rgba(245,241,232,0.06) !important; color: #ffffff !important; }
- @media (max-width: 480px) { .ns-nav { right: 12px; min-width: 200px; } }
- .ns-header .mobile-toggle { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer; padding: 0; gap: 4px; flex-direction: column; }
- .ns-header .mobile-toggle span { display: block; width: 22px; height: 1.5px; background: #f5f1e8; transition: transform 200ms, opacity 200ms; }
- .ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
- .ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
- .ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
- </style>
-<style id="ns-gold-kill">
- /* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
- .new-badge, .new-arrivals-pill,
- .color-filter-btn.active, .drapery-btn,
- .sample-btn-chip, .cb-cta {
- background: #f5f1e8 !important;
- color: #0a0a0a !important;
- border-color: #f5f1e8 !important;
- }
- .new-badge:hover, .new-arrivals-pill:hover,
- .color-filter-btn.active:hover, .drapery-btn:hover,
- .sample-btn-chip:hover, .cb-cta:hover {
- background: #fff !important;
- color: #0a0a0a !important;
- }
- </style>
-<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">Atelier Quinze</span>
- </a>
- <nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <button type="button" onclick="nsContactOpen()">Contact</button>
- </nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
- </header>
-
-<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="#contact" onclick="nsContactClose()"><span class="ico">📋</span><div class="txt"><b>Get a Quote</b><span>Project specs → priced estimate</span></div></a>
- <a class="ns-action" href="#contact" onclick="nsContactClose();openModal();"><span class="ico">📦</span><div class="txt"><b>Order a Sample</b><span>Free swatch to your shop</span></div></a>
- <a class="ns-action" href="mailto:info@1930swallpaper.com?subject=Atelier%20Quinze%20inquiry"><span class="ico">✉️</span><div class="txt"><b>Email Us</b><span>info@1930swallpaper.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>
- function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
- function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
-</script>
-
-
-
-
-
-
-
-
-
-
-
-<header>
- <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
- <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
-</header>
-
-<section class="cinema">
- <div class="cinema-bg" id="heroBg"></div>
- <div class="corner-mark">Streamline Moderne</div>
- <div class="center-mark">1930s Wallpaper</div>
- <div class="meta-line">Streamline · Machine Age · Chrome<span class="num" id="heroNum"></span></div>
- <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
-</section>
-
-
-<section class="section" id="ideas">
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">New this week</h2>
- <div class="rail" id="railNewest"></div>
- </div>
- <div class="rail-block">
- <div class="rail-eyebrow">Ideas</div>
- <h2 class="rail-title">Curated picks</h2>
- <div class="rail" id="railCurated"></div>
- </div>
-</section>
-
-<section class="section" id="shop">
- <div class="section-header">
- <div>
- <div class="section-eyebrow">The Collection</div>
- <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
- </div>
- <div class="section-meta">Streamline · Machine Age · Chrome</div>
- </div>
-
- <div class="filters" id="facets">
- <button class="chip active" data-facet="all">All</button>
- </div>
-
- <div class="density">
- <label>Sort</label>
- <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
- <option value="newest">Newest</option>
- <option value="color">Color</option>
- <option value="style">Style</option>
- <option value="sku">SKU A→Z</option>
- <option value="title">Title A→Z</option>
- <option value="price-asc">Price ↑</option>
- <option value="price-desc">Price ↓</option>
- </select>
- <label>Grid</label>
- <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
- <span class="ct" id="densityLabel">6 cols</span>
- <div class="search">
- <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
- <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
- </div>
- </div>
-
- <div class="stat-line" id="statLine">Loading…</div>
- <div class="grid" id="grid"></div>
- <div class="loading" id="loading">Loading more…</div>
- <div class="sentinel" id="sentinel"></div>
-</section>
-
-<footer>
- <div class="footer-grid">
- <div>
- <div class="footer-brand">Atelier Quinze</div>
- <p class="footer-text">Atelier Quinze — real samples ship free.</p>
- <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
- </div>
- <div class="footer-col">
- <h4>Aesthetic</h4>
- <div id="footerFacets"></div>
- </div>
- <div class="footer-col">
- <h4>Trade</h4>
- <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
- <button onclick="dwmOpen('Sample')">Request Sample</button>
- <button onclick="dwmOpen('Contact')">Contact</button>
- </div>
-
- <div class="footer-col">
- <h4>Social</h4>
- <a class="fb-link" href="https://www.facebook.com/SteveAbramsDesigns.DesignerWallcoverings" target="_blank" rel="noopener">Facebook</a>
- </div>
- </div>
- <div class="footer-bottom">
- <span>1930swallpaper.com · Atelier Quinze</span>
- <span><a href="mailto:info@1930swallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@1930swallpaper.com</a></span>
- <span id="footerStat"></span>
- </div>
-</footer>
-
-<script>
-// mini-constellation — 43 niche-stars, current site highlighted in gold
-(function(){
- const SLUG = "1930swallpaper";
- const NICHES = [
- ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
- ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
- ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
- ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
- ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
- ['suedewallpaper','Suede','mat'],
- ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
- ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
- ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
- ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
- ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
- ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
- ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
- ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
- ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
- ];
- const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
- const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
- const groups = { mat:[], dec:[], cra:[], use:[] };
- for (const n of NICHES) groups[n[2]].push(n);
- const svg = document.getElementById('miniConst');
- if (!svg) return;
- const bandW = W / BANDS.length;
- let nodes = '';
- BANDS.forEach((band, bi) => {
- const list = groups[band];
- const cx = bi * bandW + bandW / 2;
- list.forEach((n, i) => {
- const t = list.length === 1 ? 0.5 : i / (list.length - 1);
- // deterministic jitter per slug
- let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
- const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
- const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6; // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
- const x = cx + jx, y = 28 + t * (H - 56) + jy;
- const isCurrent = n[0] === SLUG;
- const r = isCurrent ? 8 : 4;
- const op = isCurrent ? 1 : 0.55;
- nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
- <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
- <title>${n[1]} — ${n[0]}.com</title>
- </circle>
- ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
- </g>`;
- });
- });
- // append nodes after defs
- svg.insertAdjacentHTML('beforeend', nodes);
- svg.querySelectorAll('.mc-node').forEach(n => {
- n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
- n.addEventListener('mouseleave', e => {
- const isCurrent = n.dataset.slug === SLUG;
- n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
- });
- n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
- });
-})();
-</script>
-
-<script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
-const LABELS = {"all":"All"};
-
-function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); }
-// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
-function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
-function cardHTML(p) {
- const eager = state.page === 1;
- return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
- + '<div class="overlay">'
- + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
- + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
- + '<div class="actions">'
- + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'"') + ')">Sample</button>'
- + '</div></div>';
-}
-
-async function loadFacets() {
- let f;
- try {
- const r = await fetch('/api/facets');
- if (!r.ok) throw new Error('HTTP ' + r.status);
- f = await r.json();
- } catch (e) { console.error('loadFacets failed:', e); return; }
- const el = document.getElementById('facets');
- for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
- const b = document.createElement('button');
- b.className = 'chip'; b.dataset.facet = k;
- b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
- el.appendChild(b);
- }
- el.addEventListener('click', e => {
- if (e.target.tagName !== 'BUTTON') return;
- document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
- e.target.classList.add('active');
- state.facet = e.target.dataset.facet;
- resetGrid();
- });
- document.getElementById('totalCount').textContent = f.total;
- document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
- // Footer aesthetic links
- const footerEl = document.getElementById('footerFacets');
- for (const [k] of Object.entries(f.aesthetics)) {
- const b = document.createElement('button');
- b.textContent = LABELS[k] || k;
- b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
- footerEl.appendChild(b);
- }
-}
-
-function resetGrid() {
- state.page = 1; state.exhausted = false;
- document.getElementById('grid').innerHTML = '';
- document.getElementById('loading').textContent = 'Loading…';
- loadGridPage();
-}
-
-async function loadGridPage() {
- if (state.loading || state.exhausted) return;
- state.loading = true;
- const params = new URLSearchParams({ page:state.page, limit:24 });
- if (state.q) params.set('q', state.q);
- if (state.facet !== 'all') params.set('aesthetic', state.facet);
- let data;
- try {
- const r = await fetch('/api/products?' + params);
- if (!r.ok) throw new Error('HTTP ' + r.status);
- data = await r.json();
- } catch (e) {
- console.error('loadGridPage failed:', e);
- document.getElementById('loading').textContent = '— offline — refresh to retry —';
- state.loading = false;
- return;
- }
- state.total = data.total; state.pages = data.pages;
-
- if (state.page === 1) {
- document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
- }
- const grid = document.getElementById('grid');
- for (const p of data.items) {
- const a = document.createElement('a');
- a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
- a.innerHTML = cardHTML(p);
- grid.appendChild(a);
- }
- if (state.page >= state.pages || data.items.length === 0) {
- state.exhausted = true;
- document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
- } else state.page++;
- state.loading = false;
-}
-
-const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
-io.observe(document.getElementById('sentinel'));
-
-document.getElementById('searchInput').addEventListener('input', e => {
- state.q = e.target.value.trim();
- clearTimeout(window._t);
- window._t = setTimeout(resetGrid, 220);
-});
-
-// Density slider
-const slider = document.getElementById('densitySlider');
-const dlabel = document.getElementById('densityLabel');
-function setDensity(n) {
- document.documentElement.style.setProperty('--cols', n);
- dlabel.textContent = n + ' cols';
- try { localStorage.setItem('w30_theme_density', n); } catch(e){}
-}
-slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
-const savedDensity = parseInt(localStorage.getItem('w30_theme_density') || '6');
-if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
-
-// Theme toggle
-const tb = document.getElementById('theme-toggle');
-function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('w30_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
-setTheme(document.documentElement.dataset.theme || 'light');
-tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
-
-loadFacets();
-loadGridPage();
-</script>
-<!-- ============================================================
- DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
- Self-contained: CSS + 4 modals + JS submission handlers.
- Uses host site's CSS vars (--bg, --fg, --gold, --rule).
- ============================================================ -->
-<style>
- /* === MODAL BASE === */
- .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
- .dwm.open{display:flex}
- .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
- @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
- .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
- .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
- .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
- .dwm-close:hover{color:var(--gold)}
- .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
- .dwm-preview img{width:64px;height:64px;object-fit:cover}
- .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
- .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
- .dwm-field{margin-bottom:14px}
- .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
- .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
- .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
- .dwm-field textarea{min-height:60px;resize:vertical}
- .dwm-submit{background:transparent;color:var(--muted, #c9b89e);border:1px solid var(--muted, #c9b89e);padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:background 0.15s, color 0.15s}
- .dwm-submit:hover{background:var(--muted, #c9b89e);color:var(--bg, #000)}
-
- .dwm-submit:disabled{opacity:0.5;cursor:default}
- .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
- .dwm-status.ok{color:var(--sage);display:block}
- .dwm-status.err{color:#e08070;display:block}
- /* contact-options */
- .dwm-options{display:flex;flex-direction:column;gap:10px}
- .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
- .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
- .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
- .dwm-option .lbl{flex:1;display:block}
- .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
-
-/* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Josefin Sans', 'Futura', sans-serif; font-weight: 500; letter-spacing: -0.01em }
-.h-link { font-size: 13px; letter-spacing: 0.06em }
-
-/* graphics-loop pass 11: Ideas rails */
-#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
-#ideas .rail-block { margin-bottom:48px }
-#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
-#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
-#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
-#ideas .rail::-webkit-scrollbar { display:none }
-#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s }
-#ideas .rail-card:hover { transform:translateY(-3px) }
-#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
-#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
-#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
-@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
-</style>
-
-<!-- Contact options modal -->
-<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
- <div class="dwm-box" style="max-width:440px">
- <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
- <h3>Contact</h3>
- <p class="sub" id="dwmContactSub">Three ways to reach us</p>
- <div class="dwm-options">
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
- <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
- <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
- </button>
- <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
- <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
- <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
- </button>
- <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@1930swallpaper.com">
- <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
- <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@1930swallpaper.com</span></span>
- </a>
- </div>
- </div>
-</div>
-
-<!-- Inquiry modal -->
-<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
- <h3>Project Inquiry</h3>
- <p class="sub">We'll respond within one business day</p>
- <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
- <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
- <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
- <button type="submit" class="dwm-submit">Send Inquiry</button>
- <div class="dwm-status" id="dwmInquiryStatus"></div>
- </form>
- </div>
-</div>
-
-<!-- Sample-request modal -->
-<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
- <div class="dwm-box">
- <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
- <h3>Request a Sample</h3>
- <p class="sub">Memo sample · ships free · 3–5 business days</p>
- <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
- <img id="dwmSampleImg" src="" alt="">
- <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
- </div>
- <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
- <input type="hidden" name="sku" id="dwmSampleSkuInput">
- <input type="hidden" name="title" id="dwmSampleTitleInput">
- <input type="hidden" name="image_url" id="dwmSampleImageInput">
- <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
- <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
- <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
- <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
- <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
- <input type="text" name="city" placeholder="City" required>
- <input type="text" name="state" placeholder="State" required>
- <input type="text" name="zip" placeholder="ZIP" required>
- </div>
- <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
- <button type="submit" class="dwm-submit">Send Sample Request</button>
- <div class="dwm-status" id="dwmSampleStatus"></div>
- </form>
- </div>
-</div>
-
-<script>
- // Universal modal control
- function dwmOpen(name, opts){
- document.getElementById('dwm' + name).classList.add('open');
- document.body.style.overflow = 'hidden';
- try { if (typeof gtag === 'function') gtag('event', 'modal_open', { modal_name: name, sku: (opts && opts.sku) || '' }); } catch(_){}
- if (name === 'Sample' && opts) {
- document.getElementById('dwmSamplePreview').style.display = 'flex';
- document.getElementById('dwmSampleImg').src = opts.image_url || '';
- document.getElementById('dwmSampleName').textContent = opts.title || '';
- document.getElementById('dwmSampleSku').textContent = opts.sku || '';
- document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
- document.getElementById('dwmSampleTitleInput').value = opts.title || '';
- document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
- } else if (name === 'Sample') {
- document.getElementById('dwmSamplePreview').style.display = 'none';
- document.getElementById('dwmSampleSkuInput').value = '';
- document.getElementById('dwmSampleTitleInput').value = '';
- document.getElementById('dwmSampleImageInput').value = '';
- }
- }
- function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
-
- // Universal form submit — POSTs to /api/send-{kind}
- async function dwmSubmit(e, kind) {
- e.preventDefault();
- const form = e.target;
- const data = Object.fromEntries(new FormData(form).entries());
- const btn = form.querySelector('.dwm-submit');
- const status = form.querySelector('.dwm-status');
- btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
- status.className = 'dwm-status';
- try {
- const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
- if (!r.ok) throw new Error('HTTP '+r.status);
- const j = await r.json();
- try {
- if (typeof gtag === 'function') {
- if (kind === 'sample') gtag('event', 'memo_request', { sku: data.sku || '', title: data.title || '' });
- else gtag('event', 'lead', { form_type: kind });
- }
- } catch(_){}
- status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
- status.className = 'dwm-status ok';
- btn.textContent = 'Sent ✓';
- setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
- } catch (err) {
- status.textContent = 'Send failed — please email info@designerwallcoverings.com';
- status.className = 'dwm-status err';
- btn.disabled = false; btn.textContent = orig;
- }
- return false;
- }
-
- // Wire up "Memo samples ship free" badge in hero to open sample modal directly
- document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
- el.style.cursor = 'pointer';
- el.addEventListener('click', () => dwmOpen('Sample'));
- });
-
- // Wire nav "Trade" link to inquiry modal
- document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
- a.removeAttribute('target');
- a.removeAttribute('href');
- a.style.cursor = 'pointer';
- a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
- });
-
- // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
- document.addEventListener('click', e => {
- const card = e.target.closest('.card, .rail-card');
- if (!card) return;
- if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
- e.preventDefault();
- const img = card.querySelector('img');
- const pat = card.querySelector('.pat');
- const sku = card.getAttribute('href').replace('/sample/', '');
- dwmOpen('Sample', {
- sku,
- title: pat ? pat.textContent.trim() : '',
- image_url: img ? img.src : ''
- });
- }
- }, true);
-// DW STANDARD: hero pulls from products.json[0].image_url so dw-collections-viewer
-// drag-drop / hero-pin updates the live front page on next deploy.
-// Always upgrades to the largest Shopify variant (strips _NxN size suffix) so
-// the full-page hero stays sharp.
-// DW STANDARD: hero rotates through top-20 NEWEST products on each visit
-// (novasuede.com pattern). Fetches /api/products?limit=100, sorts by created_at desc,
-// takes the freshest 20, picks one per visit via localStorage counter.
-// Falls back to static /hero-bg.jpg on any error.
-(async function rotateHero() {
- try {
- const r = await fetch('/api/products?limit=100');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || [])
- .filter(p => p && p.image_url && /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(p.image_url))
- .sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))
- .slice(0, 20);
- if (!items.length) return;
- let visits = 0;
- try {
- visits = parseInt(localStorage.getItem('hero_visits') || '0', 10) || 0;
- localStorage.setItem('hero_visits', String(visits + 1));
- } catch(e) {}
- const pick = items[visits % items.length];
- // Strip _NxN size suffix to get the largest CDN variant
- const url = pick.image_url.replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- const bg = document.getElementById('heroBg') || document.getElementById('cinemaBg');
- if (bg) bg.style.backgroundImage = "url('" + url + "')";
- } catch (e) {}
-})();
-
-
-// DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
- const sortSel = document.getElementById('sortSelect');
- if (!sortSel) return;
- const KEY = location.hostname.replace(/\./g, '_') + '_sort';
- const saved = localStorage.getItem(KEY);
- if (saved) { try { sortSel.value = saved; } catch(e){} }
- if (typeof state !== 'undefined') state.sort = sortSel.value;
- sortSel.addEventListener('change', e => {
- const v = e.target.value;
- try { localStorage.setItem(KEY, v); } catch(e){}
- if (typeof state !== 'undefined') state.sort = v;
- if (typeof resetGrid === 'function') resetGrid();
- else location.reload();
- });
-})();
-
-// graphics-loop pass 11: hydrate Ideas rails from /api/products
-(async function hydrateIdeas() {
- try {
- const r = await fetch('/api/products?limit=80');
- if (!r.ok) return;
- const d = await r.json();
- const items = (d.items || []).filter(p => p && p.image_url);
- if (!items.length) return;
- const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
- const newest = sorted.slice(0, 12);
- // Curated = deterministic offset slice (every 5th item starting at idx 3) for variety
- const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
- function card(p) {
- const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
- return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
- '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
- '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
- '<div class="rc-meta">' + (p.vendor || '') + '</div>' +
- '</a>';
- }
- const r1 = document.getElementById('railNewest');
- const r2 = document.getElementById('railCurated');
- if (r1) r1.innerHTML = newest.map(card).join('');
- if (r2) r2.innerHTML = curated.map(card).join('');
- } catch(e) {}
-})();
-</script>
-
-</body>
-</html>
diff --git a/server.js.bak.1778117945085 b/server.js.bak.1778117945085
deleted file mode 100644
index 0df1d97..0000000
--- a/server.js.bak.1778117945085
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * 1930s WALLPAPER — DW family vertical
- * Curated slice from live designerwallcoverings.com Shopify catalog.
- */
-const express = require('express');
-const helmet = require('helmet');
-const path = require('path');
-const fs = require('fs');
-
-const PORT = process.env.PORT || 9837;
-const DW_SHOPIFY = 'https://designerwallcoverings.com';
-const __SITE = path.basename(__dirname);
-let DATA_RAW;
-try {
- const raw = fs.readFileSync(path.join(__dirname, 'data', 'products.json'), 'utf8');
- DATA_RAW = JSON.parse(raw);
- if (!Array.isArray(DATA_RAW)) throw new Error('products.json must be an array');
-} catch (e) {
- console.error(`[${__SITE}] FATAL: could not load products.json — ${e.message}`);
- console.error(`[${__SITE}] Starting with empty catalog. Run pull script to populate data/products.json.`);
- DATA_RAW = [];
-}
-
-function isJunk(p) {
- if (!p.image_url || !p.image_url.trim()) return true;
- if (!p.handle && !p.sku) return true;
- const t = p.title || '';
- if (/lamp|rug|pillow|throw|tripod|frame|mirror|vase|candle|sculpture|figurine/i.test(t)) return true;
- if (/visual.{0,3}merchandiser/i.test(t)) return true;
- if (/(?:^|\W)image[ _-]?4(?:\W|$)/i.test(t)) return true;
- if (/bh.?90210|beverly.?hills.?90210|iconic.{0,4}bh/i.test(t)) return true;
- return false;
-}
-
-const PRODUCTS = DATA_RAW.filter(p => !isJunk(p));
-const DROPPED = DATA_RAW.length - PRODUCTS.length;
-console.log(`Loaded ${DATA_RAW.length}, kept ${PRODUCTS.length}, dropped ${DROPPED}`);
-
-const app = express();
-// Security headers via helmet (added 2026-05-04 overnight YOLO loop)
-app.use(helmet({ contentSecurityPolicy: false }));
-app.use(express.json({ limit: '256kb' }));
-// Universal contact module — modals, /api/send-inquiry, /api/send-sample, /zd-loader.js
-require('./_universal-contact')(app, { siteName: "1930s Wallpaper", zdColor: "#9eb8c8", zdPosition: 'right' });
-require('./_universal-auth')(app, { siteName: "1930swallpaper" });
-
-app.use(express.static(path.join(__dirname, 'public')));
-
-app.get('/api/products', (req, res) => {
- const { q, aesthetic, vendor, page = 1, limit = 24 } = req.query;
- let list = PRODUCTS;
- if (q) {
- const needle = q.toLowerCase();
- list = list.filter(p => (p.title || '').toLowerCase().includes(needle) || (p.tags || []).some(t => t.toLowerCase().includes(needle)));
- }
- if (aesthetic && aesthetic !== 'all') list = list.filter(p => p.aesthetic === aesthetic);
- if (vendor && vendor !== 'all') list = list.filter(p => p.vendor === vendor);
- const total = list.length;
- const pageNum = Math.max(1, parseInt(page) || 1);
- const lim = Math.min(60, parseInt(limit) || 24);
- const start = (pageNum - 1) * lim;
- res.json({ total, page: pageNum, limit: lim, pages: Math.ceil(total / lim), items: list.slice(start, start + lim) });
-});
-
-app.get('/api/sliders', (req, res) => {
- const SLIDER_AESTHETICS = ["streamline","deco","geometric","botanical","chrome","nouveau"];
- const out = [];
- for (const a of SLIDER_AESTHETICS) {
- const items = PRODUCTS.filter(p => p.aesthetic === a).slice(0, 12);
- if (items.length >= 4) out.push({ aesthetic: a, items });
- }
- res.json({ rails: out });
-});
-
-app.get('/api/facets', (req, res) => {
- const aesthetics = {}; const vendors = {};
- for (const p of PRODUCTS) {
- aesthetics[p.aesthetic] = (aesthetics[p.aesthetic] || 0) + 1;
- vendors[p.vendor] = (vendors[p.vendor] || 0) + 1;
- }
- res.json({ aesthetics, vendors, total: PRODUCTS.length });
-});
-
-app.get('/api/health', (req, res) => res.json({ status: 'ok', count: PRODUCTS.length, dropped: DROPPED }));
-
-app.get('/sample/:handle', (req, res) => {
- const p = PRODUCTS.find(x => x.handle === req.params.handle || x.sku === req.params.handle);
- if (!p) return res.status(404).send('Not found');
- res.redirect(302, p.product_url || `${DW_SHOPIFY}/products/${encodeURIComponent(p.handle)}#sample`);
-});
-
-// sitemap.xml + robots.txt for SEO
-app.get('/robots.txt', (req, res) => {
- res.type('text/plain').send(`User-agent: *
-Allow: /
-Sitemap: https://1930swallpaper.com/sitemap.xml
-`);
-});
-app.get('/sitemap.xml', (req, res) => {
- const urls = ['/'];
- const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${urls.map(u => ` <url><loc>https://1930swallpaper.com${u}</loc><changefreq>weekly</changefreq></url>`).join('\n')}
-</urlset>`;
- res.type('application/xml').send(xml);
-});
-
-app.listen(PORT, '127.0.0.1', () => {
- console.log(`1930swallpaper listening on http://127.0.0.1:${PORT}`);
-});
diff --git a/server.js.pre-pass12.bak b/server.js.pre-pass12.bak
deleted file mode 100644
index b62501f..0000000
--- a/server.js.pre-pass12.bak
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * 1930s WALLPAPER — DW family vertical
- * Curated slice from live designerwallcoverings.com Shopify catalog.
- */
-const express = require('express');
-const helmet = require('helmet');
-const path = require('path');
-const fs = require('fs');
-
-const PORT = process.env.PORT || 9837;
-const DW_SHOPIFY = 'https://designerwallcoverings.com';
-const __SITE = path.basename(__dirname);
-let DATA_RAW;
-try {
- const raw = fs.readFileSync(path.join(__dirname, 'data', 'products.json'), 'utf8');
- DATA_RAW = JSON.parse(raw);
- if (!Array.isArray(DATA_RAW)) throw new Error('products.json must be an array');
-} catch (e) {
- console.error(`[${__SITE}] FATAL: could not load products.json — ${e.message}`);
- console.error(`[${__SITE}] Starting with empty catalog. Run pull script to populate data/products.json.`);
- DATA_RAW = [];
-}
-
-function isJunk(p) {
- if (!p.image_url || !p.image_url.trim()) return true;
- if (!p.handle && !p.sku) return true;
- const t = p.title || '';
- if (/lamp|rug|pillow|throw|tripod|frame|mirror|vase|candle|sculpture|figurine/i.test(t)) return true;
- if (/visual.{0,3}merchandiser/i.test(t)) return true;
- if (/(?:^|\W)image[ _-]?4(?:\W|$)/i.test(t)) return true;
- if (/bh.?90210|beverly.?hills.?90210|iconic.{0,4}bh/i.test(t)) return true;
- return false;
-}
-
-const PRODUCTS = DATA_RAW.filter(p => !isJunk(p));
-const DROPPED = DATA_RAW.length - PRODUCTS.length;
-console.log(`Loaded ${DATA_RAW.length}, kept ${PRODUCTS.length}, dropped ${DROPPED}`);
-
-const app = express();
-// Security headers via helmet (added 2026-05-04 overnight YOLO loop)
-// DW STANDARD: sort by color/style/sku/title for any product-rendering site.
-const COLOR_RANK = {
- black:0,gray:1,grey:1,silver:2,white:3,ivory:4,cream:5,beige:6,brown:7,tan:8,khaki:9,copper:10,
- red:20,pink:21,coral:22,orange:23,peach:24,salmon:25,
- yellow:30,gold:31,mustard:32,olive:33,
- green:40,lime:41,mint:42,teal:50,aqua:51,turquoise:52,cyan:53,
- blue:60,navy:61,indigo:62,periwinkle:63,
- purple:70,violet:71,lavender:72,plum:73,magenta:74,fuchsia:75,
-};
-function colorRank(p) {
- const tags = (p.tags || []).map(t => String(t).toLowerCase());
- for (const t of tags) for (const k of Object.keys(COLOR_RANK)) if (t.includes(k)) return COLOR_RANK[k];
- return 999;
-}
-const STYLE_TAGS = ['traditional','transitional','modern','contemporary','minimalist','art deco','victorian','mid-century','mid century','rustic','industrial','farmhouse','bohemian','boho','geometric','floral','botanical','damask','toile','grasscloth','silk','linen','vinyl','natural'];
-function styleKey(p) {
- const tags = (p.tags || []).map(t => String(t).toLowerCase());
- for (const s of STYLE_TAGS) if (tags.some(t => t.includes(s))) return s;
- return 'zzz';
-}
-function sortProducts(list, mode) {
- if (mode === 'sku') return [...list].sort((a,b) => String(a.sku || a.handle || '').localeCompare(String(b.sku || b.handle || '')));
- if (mode === 'title') return [...list].sort((a,b) => String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'color') return [...list].sort((a,b) => colorRank(a) - colorRank(b) || String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'style') return [...list].sort((a,b) => styleKey(a).localeCompare(styleKey(b)) || String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'price-asc') return [...list].sort((a,b) => (Number(a.max_price) || 0) - (Number(b.max_price) || 0));
- if (mode === 'price-desc') return [...list].sort((a,b) => (Number(b.max_price) || 0) - (Number(a.max_price) || 0));
- return list;
-}
-
-
-app.use(helmet({ contentSecurityPolicy: false }));
-app.use(express.json({ limit: '256kb' }));
-// Universal contact module — modals, /api/send-inquiry, /api/send-sample, /zd-loader.js
-require('./_universal-contact')(app, { siteName: "1930s Wallpaper", zdColor: "#9eb8c8", zdPosition: 'right' });
-require('./_universal-auth')(app, { siteName: "1930swallpaper" });
-
-app.use(express.static(path.join(__dirname, 'public')));
-
-app.get('/api/products', (req, res) => {
- const { q, aesthetic, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
- let list = PRODUCTS;
- if (q) {
- const needle = q.toLowerCase();
- list = list.filter(p => (p.title || '').toLowerCase().includes(needle) || (p.tags || []).some(t => t.toLowerCase().includes(needle)));
- }
- if (aesthetic && aesthetic !== 'all') list = list.filter(p => p.aesthetic === aesthetic);
- if (vendor && vendor !== 'all') list = list.filter(p => p.vendor === vendor);
- list = sortProducts(list, sort);
- const total = list.length;
- const pageNum = Math.max(1, parseInt(page) || 1);
- const lim = Math.min(60, parseInt(limit) || 24);
- const start = (pageNum - 1) * lim;
- res.json({ total, page: pageNum, limit: lim, pages: Math.ceil(total/lim), sort, items: list.slice(start, start + lim) });
- // (replaced) old: pages: Math.ceil(total / lim), items: list.slice(start, start + lim) });
-});
-
-app.get('/api/sliders', (req, res) => {
- const SLIDER_AESTHETICS = ["streamline","deco","geometric","botanical","chrome","nouveau"];
- const out = [];
- for (const a of SLIDER_AESTHETICS) {
- const items = PRODUCTS.filter(p => p.aesthetic === a).slice(0, 12);
- if (items.length >= 4) out.push({ aesthetic: a, items });
- }
- res.json({ rails: out });
-});
-
-app.get('/api/facets', (req, res) => {
- const aesthetics = {}; const vendors = {};
- for (const p of PRODUCTS) {
- aesthetics[p.aesthetic] = (aesthetics[p.aesthetic] || 0) + 1;
- vendors[p.vendor] = (vendors[p.vendor] || 0) + 1;
- }
- res.json({ aesthetics, vendors, total: PRODUCTS.length });
-});
-
-app.get('/api/health', (req, res) => res.json({ status: 'ok', count: PRODUCTS.length, dropped: DROPPED }));
-
-app.get('/sample/:handle', (req, res) => {
- const p = PRODUCTS.find(x => x.handle === req.params.handle || x.sku === req.params.handle);
- if (!p) return res.status(404).send('Not found');
- res.redirect(302, p.product_url || `${DW_SHOPIFY}/products/${encodeURIComponent(p.handle)}#sample`);
-});
-
-// sitemap.xml + robots.txt for SEO
-app.get('/robots.txt', (req, res) => {
- res.type('text/plain').send(`User-agent: *
-Allow: /
-Sitemap: https://1930swallpaper.com/sitemap.xml
-`);
-});
-app.get('/sitemap.xml', (req, res) => {
- const urls = ['/'];
- const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${urls.map(u => ` <url><loc>https://1930swallpaper.com${u}</loc><changefreq>weekly</changefreq></url>`).join('\n')}
-</urlset>`;
- res.type('application/xml').send(xml);
-});
-
-app.listen(PORT, '127.0.0.1', () => {
- console.log(`1930swallpaper listening on http://127.0.0.1:${PORT}`);
-});
diff --git a/server.js.pre-sort-skill b/server.js.pre-sort-skill
deleted file mode 100644
index 3437027..0000000
--- a/server.js.pre-sort-skill
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * 1930s WALLPAPER — DW family vertical
- * Curated slice from live designerwallcoverings.com Shopify catalog.
- */
-const express = require('express');
-const helmet = require('helmet');
-const path = require('path');
-const fs = require('fs');
-
-const PORT = process.env.PORT || 9837;
-const DW_SHOPIFY = 'https://designerwallcoverings.com';
-const __SITE = path.basename(__dirname);
-let DATA_RAW;
-try {
- const raw = fs.readFileSync(path.join(__dirname, 'data', 'products.json'), 'utf8');
- DATA_RAW = JSON.parse(raw);
- if (!Array.isArray(DATA_RAW)) throw new Error('products.json must be an array');
-} catch (e) {
- console.error(`[${__SITE}] FATAL: could not load products.json — ${e.message}`);
- console.error(`[${__SITE}] Starting with empty catalog. Run pull script to populate data/products.json.`);
- DATA_RAW = [];
-}
-
-function isJunk(p) {
- if (!p.image_url || !p.image_url.trim()) return true;
- if (!p.handle && !p.sku) return true;
- const t = p.title || '';
- if (/lamp|rug|pillow|throw|tripod|frame|mirror|vase|candle|sculpture|figurine/i.test(t)) return true;
- if (/visual.{0,3}merchandiser/i.test(t)) return true;
- if (/(?:^|\W)image[ _-]?4(?:\W|$)/i.test(t)) return true;
- if (/bh.?90210|beverly.?hills.?90210|iconic.{0,4}bh/i.test(t)) return true;
- return false;
-}
-
-const PRODUCTS = DATA_RAW.filter(p => !isJunk(p));
-const DROPPED = DATA_RAW.length - PRODUCTS.length;
-console.log(`Loaded ${DATA_RAW.length}, kept ${PRODUCTS.length}, dropped ${DROPPED}`);
-
-// graphics-loop pass 12: niche keyword filter — only show products that fit this site's niche
-const NICHE_POS = ["streamline","machine age","moderne","chrome","1930","deco"];
-const NICHE_NEG = ["solid","blank","plain"];
-function nicheFit(p) {
- const blob = ((p.title || '') + ' ' + (p.tags || []).join(' ')).toLowerCase();
- if (NICHE_NEG.some(n => blob.includes(n.toLowerCase()))) return false;
- return NICHE_POS.length === 0 || NICHE_POS.some(k => blob.includes(k.toLowerCase()));
-}
-const PRODUCTS_NICHE = PRODUCTS.filter(nicheFit);
-const NICHE_DROPPED = PRODUCTS.length - PRODUCTS_NICHE.length;
-console.log(`Niche filter: kept ${PRODUCTS_NICHE.length} of ${PRODUCTS.length}, dropped ${NICHE_DROPPED}`);
-// Replace PRODUCTS reference with the niche-filtered list for all downstream handlers.
-const PRODUCTS_ORIG = PRODUCTS;
-Object.defineProperty(global, '__products_niche_applied', { value: true });
-
-
-const app = express();
-// Security headers via helmet (added 2026-05-04 overnight YOLO loop)
-// DW STANDARD: sort by color/style/sku/title for any product-rendering site.
-const COLOR_RANK = {
- black:0,gray:1,grey:1,silver:2,white:3,ivory:4,cream:5,beige:6,brown:7,tan:8,khaki:9,copper:10,
- red:20,pink:21,coral:22,orange:23,peach:24,salmon:25,
- yellow:30,gold:31,mustard:32,olive:33,
- green:40,lime:41,mint:42,teal:50,aqua:51,turquoise:52,cyan:53,
- blue:60,navy:61,indigo:62,periwinkle:63,
- purple:70,violet:71,lavender:72,plum:73,magenta:74,fuchsia:75,
-};
-function colorRank(p) {
- const tags = (p.tags || []).map(t => String(t).toLowerCase());
- for (const t of tags) for (const k of Object.keys(COLOR_RANK)) if (t.includes(k)) return COLOR_RANK[k];
- return 999;
-}
-const STYLE_TAGS = ['traditional','transitional','modern','contemporary','minimalist','art deco','victorian','mid-century','mid century','rustic','industrial','farmhouse','bohemian','boho','geometric','floral','botanical','damask','toile','grasscloth','silk','linen','vinyl','natural'];
-function styleKey(p) {
- const tags = (p.tags || []).map(t => String(t).toLowerCase());
- for (const s of STYLE_TAGS) if (tags.some(t => t.includes(s))) return s;
- return 'zzz';
-}
-function sortProducts(list, mode) {
- if (mode === 'sku') return [...list].sort((a,b) => String(a.sku || a.handle || '').localeCompare(String(b.sku || b.handle || '')));
- if (mode === 'title') return [...list].sort((a,b) => String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'color') return [...list].sort((a,b) => colorRank(a) - colorRank(b) || String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'style') return [...list].sort((a,b) => styleKey(a).localeCompare(styleKey(b)) || String(a.title || '').localeCompare(String(b.title || '')));
- if (mode === 'price-asc') return [...list].sort((a,b) => (Number(a.max_price) || 0) - (Number(b.max_price) || 0));
- if (mode === 'price-desc') return [...list].sort((a,b) => (Number(b.max_price) || 0) - (Number(a.max_price) || 0));
- return list;
-}
-
-
-app.use(helmet({ contentSecurityPolicy: false }));
-app.use(express.json({ limit: '256kb' }));
-// Universal contact module — modals, /api/send-inquiry, /api/send-sample, /zd-loader.js
-require('./_universal-contact')(app, { siteName: "1930s Wallpaper", zdColor: "#9eb8c8", zdPosition: 'right' });
-require('./_universal-auth')(app, { siteName: "1930swallpaper" });
-
-app.use(express.static(path.join(__dirname, 'public')));
-
-app.get('/api/products', (req, res) => {
- const { q, aesthetic, vendor, page = 1, limit = 24, sort = 'newest'} = req.query;
- let list = PRODUCTS_NICHE;
- if (q) {
- const needle = q.toLowerCase();
- list = list.filter(p => (p.title || '').toLowerCase().includes(needle) || (p.tags || []).some(t => t.toLowerCase().includes(needle)));
- }
- if (aesthetic && aesthetic !== 'all') list = list.filter(p => p.aesthetic === aesthetic);
- if (vendor && vendor !== 'all') list = list.filter(p => p.vendor === vendor);
- list = sortProducts(list, sort);
- const total = list.length;
- const pageNum = Math.max(1, parseInt(page) || 1);
- const lim = Math.min(60, parseInt(limit) || 24);
- const start = (pageNum - 1) * lim;
- res.json({ total, page: pageNum, limit: lim, pages: Math.ceil(total/lim), sort, items: list.slice(start, start + lim) });
- // (replaced) old: pages: Math.ceil(total / lim), items: list.slice(start, start + lim) });
-});
-
-app.get('/api/sliders', (req, res) => {
- const SLIDER_AESTHETICS = ["streamline","deco","geometric","botanical","chrome","nouveau"];
- const out = [];
- for (const a of SLIDER_AESTHETICS) {
- const items = PRODUCTS_NICHE.filter(p => p.aesthetic === a).slice(0, 12);
- if (items.length >= 4) out.push({ aesthetic: a, items });
- }
- res.json({ rails: out });
-});
-
-app.get('/api/facets', (req, res) => {
- const aesthetics = {}; const vendors = {};
- for (const p of PRODUCTS_NICHE) {
- aesthetics[p.aesthetic] = (aesthetics[p.aesthetic] || 0) + 1;
- vendors[p.vendor] = (vendors[p.vendor] || 0) + 1;
- }
- res.json({ aesthetics, vendors, total: PRODUCTS.length });
-});
-
-app.get('/api/health', (req, res) => res.json({ status: 'ok', count: PRODUCTS_NICHE.length, dropped: DROPPED }));
-
-app.get('/sample/:handle', (req, res) => {
- const p = PRODUCTS_NICHE.find(x => x.handle === req.params.handle || x.sku === req.params.handle);
- if (!p) return res.status(404).send('Not found');
- res.redirect(302, p.product_url || `${DW_SHOPIFY}/products/${encodeURIComponent(p.handle)}#sample`);
-});
-
-// sitemap.xml + robots.txt for SEO
-app.get('/robots.txt', (req, res) => {
- res.type('text/plain').send(`User-agent: *
-Allow: /
-Sitemap: https://1930swallpaper.com/sitemap.xml
-`);
-});
-app.get('/sitemap.xml', (req, res) => {
- const urls = ['/'];
- const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${urls.map(u => ` <url><loc>https://1930swallpaper.com${u}</loc><changefreq>weekly</changefreq></url>`).join('\n')}
-</urlset>`;
- res.type('application/xml').send(xml);
-});
-
-app.listen(PORT, '127.0.0.1', () => {
- console.log(`1930swallpaper listening on http://127.0.0.1:${PORT}`);
-});
← bc264e5 server: fix /api/facets total to count niche-filtered list,
·
back to 1930swallpaper
·
fix: add rel=noopener noreferrer to external Facebook link 398d6d1 →