`public/page-theme.css`

40 lines
/* Shared page-theme (theme1 / theme2) preview surface — single source of truth
   across index + editorial pages (Steve 2026-06-01). Pairs with the inline
   FOUC-guard bootstrap in each page <head> and /page-theme.js (toggle wiring).
   Key ('wallco-page-theme') matches wallco.ai for cross-site continuity. */

[data-page-theme="theme2"] body{
  background:#fff !important; color:#0a0a0a !important;
}
[data-page-theme="theme2"] h1,
[data-page-theme="theme2"] h2,
[data-page-theme="theme2"] h3{ letter-spacing:-0.01em; font-weight:500; }

/* Explicit card classes only — the previous [class*="card"] wildcard also matched
   unrelated elements (anything with "card" anywhere in a class name). These are the
   two real card surfaces on the catalog page; editorial pages have neither, so this
   simply no-ops there. */
[data-page-theme="theme2"] .card,
[data-page-theme="theme2"] .rail-card{
  background:#fafafa !important; border:1px solid #e5e5e5 !important; box-shadow:none !important;
}

#page-theme-toggle{ display:none; }
/* Sticky opt-in: visible in BOTH themes once preview engaged, so "Theme 1" isn't a
   one-way trap. Default visitors who never opted in never see it. */
[data-theme-preview="on"] #page-theme-toggle{ display:inline-flex; }
#page-theme-toggle{
  position:fixed; top:96px; right:14px; z-index:90;
  gap:0; align-items:center;
  background:rgba(255,255,255,.92); border:1px solid #d8d2c5;
  border-radius:999px; padding:3px; backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  font:600 11px ui-sans-serif,system-ui; letter-spacing:.06em; text-transform:uppercase;
}
#page-theme-toggle button{
  border:0; background:transparent; color:#5a5048; cursor:pointer;
  padding:6px 14px; border-radius:999px; font:inherit; transition:all .15s;
}
#page-theme-toggle button[aria-pressed="true"]{ background:#1a1714; color:#faf7f2; }
#page-theme-toggle button:hover:not([aria-pressed="true"]){ color:#1a1714; }