[object Object]

← back to Dw Yolo Loop

Artmura site (C/production-readiness): APCA hero fix + perf + deploy scaffold

ecdd0e4685641969443cbe733551ed1f9a29a248 · 2026-06-12 09:21:43 -0700 · Steve Abrams

- Hero scrim relayered → white wordmark clears APCA Lc>=60 on every light room shot (worst 65, was ~38-56 FAIL); +wordmark text-shadow
- Grid swatches → lazy-loaded <img> w/ width/height (defers 160 offscreen images, kills CLS)
- SEO/social meta + noindex (staging); .deploy.conf + ecosystem.config.cjs scaffold (NOT wired to domain — gated on design approval)

Files touched

Diff

commit ecdd0e4685641969443cbe733551ed1f9a29a248
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Jun 12 09:21:43 2026 -0700

    Artmura site (C/production-readiness): APCA hero fix + perf + deploy scaffold
    
    - Hero scrim relayered → white wordmark clears APCA Lc>=60 on every light room shot (worst 65, was ~38-56 FAIL); +wordmark text-shadow
    - Grid swatches → lazy-loaded <img> w/ width/height (defers 160 offscreen images, kills CLS)
    - SEO/social meta + noindex (staging); .deploy.conf + ecosystem.config.cjs scaffold (NOT wired to domain — gated on design approval)
---
 artmura-site/.deploy.conf         |  9 +++++++++
 artmura-site/ecosystem.config.cjs | 13 +++++++++++++
 artmura-site/public/index.html    | 10 ++++++++--
 artmura-site/public/styles.css    | 10 ++++++++--
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/artmura-site/.deploy.conf b/artmura-site/.deploy.conf
new file mode 100644
index 0000000..279ae6e
--- /dev/null
+++ b/artmura-site/.deploy.conf
@@ -0,0 +1,9 @@
+# Artmura microsite — deploy config (scaffold; NOT yet wired to a domain).
+# Wire DEPLOY_PATH + HEALTH_URL + a real domain only after Steve approves the design
+# and the Artmura products go live. Do not deploy a gated/preview build.
+PROJECT_NAME=artmura-site
+DEPLOY_PATH=/root/Projects/artmura-site
+HEALTH_URL=http://127.0.0.1:9920/api/facets
+PM2_NAME=artmura-site
+PORT=9920
+# DOMAIN=artmura.designerwallcoverings.com   # placeholder — confirm with Steve before CF/NS wiring
diff --git a/artmura-site/ecosystem.config.cjs b/artmura-site/ecosystem.config.cjs
new file mode 100644
index 0000000..94935d0
--- /dev/null
+++ b/artmura-site/ecosystem.config.cjs
@@ -0,0 +1,13 @@
+// pm2 process config for the Artmura microsite.
+// Local: pm2 start ecosystem.config.cjs   ·   logs: pm2 logs artmura-site
+module.exports = {
+  apps: [{
+    name: 'artmura-site',
+    script: 'server.js',
+    cwd: __dirname,
+    env: { NODE_ENV: 'production', PORT: process.env.PORT || 9920 },
+    max_memory_restart: '200M',
+    autorestart: true,
+    watch: false,
+  }],
+};
diff --git a/artmura-site/public/index.html b/artmura-site/public/index.html
index a5b1148..ac64e93 100644
--- a/artmura-site/public/index.html
+++ b/artmura-site/public/index.html
@@ -3,7 +3,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Artmura — Italian Wallcoverings</title>
+<title>Artmura — Italian Non-Woven Wallcoverings</title>
+<meta name="description" content="Artmura: architectural, hand-finished non-woven wallcoverings made in Italy. 161 designs across the Opera and La Scala Milano collections, sold by the yard.">
+<meta name="robots" content="noindex"><!-- staging preview: do not index until launch -->
+<meta property="og:type" content="website">
+<meta property="og:title" content="Artmura — Italian Non-Woven Wallcoverings">
+<meta property="og:description" content="Architectural, hand-finished wallcoverings made in Italy.">
+<meta name="theme-color" content="#f6f2ec">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
@@ -122,7 +128,7 @@ function render(){
   $('#cnt').textContent=items.length;
   grid.innerHTML = items.map(p=>`
     <div class="card" data-h="${p.handle}">
-      <div class="ph" style="background-image:url('${p.swatch||p.room||''}')"></div>
+      <img class="ph" loading="lazy" decoding="async" width="400" height="400" alt="${(p.title||'').replace(/"/g,'&quot;')}" src="${p.swatch||p.room||''}">
       <div class="body">
         <div class="ser">${p.series||''}</div>
         <div class="nm">${p.color||p.title}</div>
diff --git a/artmura-site/public/styles.css b/artmura-site/public/styles.css
index 87c06af..88582da 100644
--- a/artmura-site/public/styles.css
+++ b/artmura-site/public/styles.css
@@ -26,6 +26,8 @@ img{display:block;max-width:100%}
 .corner.ur{right:0;gap:22px}
 .wordmark{font-family:var(--serif);font-weight:600;letter-spacing:.34em;font-size:20px;
   text-transform:uppercase;color:var(--ink)}
+.on-hero .wordmark{text-shadow:0 1px 18px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
+.on-hero.ur a{text-shadow:0 1px 14px rgba(0,0,0,.5)}
 .wordmark .dot{color:var(--gold)}
 .corner.ur a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
   transition:color .2s}
@@ -38,8 +40,12 @@ img{display:block;max-width:100%}
 .hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;
   opacity:0;transition:opacity 1.4s ease;transform:scale(1.04)}
 .hero .slide.on{opacity:1}
+/* layered scrim — top band (wordmark+nav), center vignette (headline), bottom (CTA);
+   tuned so a WHITE wordmark clears APCA Lc>=60 on light Italian room shots */
 .hero::after{content:"";position:absolute;inset:0;
-  background:linear-gradient(180deg,rgba(20,16,12,.42) 0%,rgba(20,16,12,.12) 38%,rgba(20,16,12,.62) 100%)}
+  background:
+    radial-gradient(ellipse 72% 52% at 50% 56%, rgba(18,14,10,.52) 0%, rgba(18,14,10,0) 72%),
+    linear-gradient(180deg, rgba(18,14,10,.64) 0%, rgba(18,14,10,.30) 30%, rgba(18,14,10,.26) 58%, rgba(18,14,10,.68) 100%)}
 .hero-inner{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
   align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px}
 .hero-kicker{font-size:11px;letter-spacing:.42em;text-transform:uppercase;opacity:.86;margin-bottom:18px}
@@ -91,7 +97,7 @@ body.scrolled .corner{opacity:0;pointer-events:none}
 .card{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;
   cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column}
 .card:hover{transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(33,29,24,.45)}
-.card .ph{aspect-ratio:1/1;background:#efe9df center/cover}
+.card .ph{aspect-ratio:1/1;width:100%;object-fit:cover;background:#efe9df;display:block}
 .card .body{padding:13px 14px 15px}
 .card .ser{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
 .card .nm{font-family:var(--serif);font-size:20px;line-height:1.1;margin:3px 0 2px}

← 1661105 Artmura: direct Shopify draft-create pusher (models thibaut  ·  back to Dw Yolo Loop  ·  Artmura site (B/catalog): dominant-color extraction → true-h 3e3a3bd →