@tokenoftrust/storefront-runner 1.3.4-rc.4 → 1.4.0

package/apps/storefront/public/shared/commerce-marketing.css

@@ -0,0 +1,221 @@
+/* ============================================================================
+   Shared commerce-MARKETING stylesheet — the raw-marketing-fragment page layer
+   (go-live workstream, unit F5 `shared-css-layer`). Companion to
+   /shared/commerce-chrome.css (unit F2): chrome styles the SITE FRAME (header,
+   nav, footer, announcement, age gate); THIS sheet styles the RAW MARKETING PAGE
+   BODY patterns a hybrid commerce tenant repeats across its static content pages
+   (about / contact / policy / compliance / membership): page hero, breadcrumbs,
+   eyebrow, prose, needs-review + illustrative callouts, TOC chips, value grid,
+   contact form, membership tier cards / comparison table, how-it-works, FAQ, and
+   the closing CTA band.
+
+   WHY (spec §F5): "page-local CSS in every tenant file is not maintainable." Every
+   sample-store.com content page shipped a ~90–290-line <style> block that was
+   ~80% byte-identical page-to-page (the `.container`/`.section`/`.page-hero`/
+   `.crumbs`/`.eyebrow`/`.needs-review`/`.nr`/`.prose` core repeated verbatim), so a
+   copy drifted the moment one page was edited. This lifts the framework-generic
+   patterns into ONE platform-shipped sheet a page LINKS; the tenant pages keep
+   little or no page-local CSS (acceptance: "Hybrid tenant pages need little or no
+   page-local CSS for standard patterns").
+
+   OPT-IN, not automatic. A tenant links this only when its chrome.json sets
+   `sharedMarketingCss: true` (see lib/rawChrome.ts SHARED_MARKETING_STYLESHEET) —
+   the same deliberate-adoption gate `sharedChrome` uses, so a SHIPPED tenant that
+   already hand-authored its own page CSS (e.g. sample-store-2's tenant-scoped
+   /tenants/sample-store-2.net/pages/page.css, which reuses names like `.cta-band` /
+   `.sec-head` with DIFFERENT semantics) never silently flips until its integration
+   unit reconciles. Linked AFTER commerce-chrome.css so its page-level `.sec-head`
+   variant intentionally wins over chrome's centered home-section `.sec-head`.
+
+   CONTRACT-TOKEN-ONLY (docs/architecture/token-contract.md, unit F1) — enforced by
+   commerce-marketing.contract.test.ts, same gate as the chrome sheet. Every value
+   reads the shared `--color-*` / `--font-*` / `--radius-*` / `--shadow-*` /
+   `--container-max` vocabulary and NO tenant-private brand var (never `--brand-red`,
+   `--brand-blue`, `--ink`/`--ink-2`, `--surface`, `--accent`, `--container`,
+   `--radius`) and no hard-coded brand hex. The retired page <style> blocks mixed
+   PVC-private vars with the contract; this normalizes them:
+     --container            -> (dropped; chrome owns .container via --container-max)
+     --surface / --surface-2 -> --color-surface / --color-surface-2
+     --bg                   -> --color-bg
+     --border               -> --color-border
+     --ink / --ink-2        -> --color-text   (contract has ONE body/heading ink)
+     --muted                -> --color-muted
+     --brand-blue           -> --color-accent  (PVC secondary brand / links)
+     --accent (amber fill)  -> semantic tint: --color-info (illustrative note) /
+                               --color-warning (compliance + needs-review flag) mixed
+                               over --color-surface, so the callout is token-driven
+                               and AA without a solid-fill contrast token
+     --accent-ink           -> --color-warning (needs-review badge/icon)
+     --radius               -> --radius-md
+     .cta-band pale-blue-band/white/hairline -> --color-text ground +
+                               --color-primary-contrast text via color-mix (mirrors
+                               the chrome footer's on-dark derivation; this removed
+                               the only hard-coded hex the page blocks carried).
+   Tenant colour/type stays 100% token-driven: a tenant reskins every pattern here
+   by supplying tokens/aliases — nothing PVC-specific is baked in.
+
+   CSP: this is a LINKED same-origin sheet (style-src 'self'), so it needs no nonce
+   and does not weaken policy — strictly better than the nonce-stamped inline
+   <style> blocks it replaces (rawMarketingHtml.nonceInlineTags).
+
+   DELIVERY: platform static asset served at /shared/commerce-marketing.css (root,
+   global — like /shared/commerce-chrome.css). prefixTenantLinks exempts /shared/
+   so the link survives path-prefix tenant routing.
+   ========================================================================== */
+
+/* --- Page shell ----------------------------------------------------------- */
+/* .container / .section / .section--surface are owned by commerce-chrome.css and
+   NOT redefined here. Raw fragments use <main id="main"> as the page-body root. */
+#main { display: block; }
+
+/* --- Page hero (policy / marketing subpage header) ------------------------ */
+.page-hero { background: linear-gradient(180deg, var(--color-surface-2), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
+.page-hero h1 { max-width: 22ch; }
+.page-hero .lede { margin-top: 12px; font-size: 1.1rem; max-width: 64ch; color: var(--color-muted); }
+.page-hero p { margin-top: 10px; max-width: 62ch; color: var(--color-muted); }
+
+/* --- Breadcrumbs + eyebrow ------------------------------------------------ */
+.crumbs { font-size: .82rem; color: var(--color-muted); margin-bottom: 14px; }
+.crumbs a { color: var(--color-accent); }
+.eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .5rem; }
+
+/* --- Section heads (marketing-page variant) -------------------------------
+   Distinct from chrome's centered home-section .sec-head: left by default, with a
+   --center modifier. Loaded after the chrome sheet, so these win for pages that
+   link this layer; the eyebrow inside is re-tinted to --color-accent to match the
+   standalone .eyebrow (chrome scopes .sec-head .eyebrow to --color-primary). */
+.sec-head { max-width: 60ch; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); text-align: left; }
+.sec-head--center { max-width: 62ch; margin-inline: auto; text-align: center; }
+.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
+.sec-head p { margin-top: .5rem; color: var(--color-muted); }
+.sec-head .eyebrow { color: var(--color-accent); }
+
+/* --- Prose (policy / long-form copy) -------------------------------------- */
+.prose { max-width: 76ch; }
+.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-top: 2rem; scroll-margin-top: 90px; }
+.prose p { margin-top: .7rem; color: var(--color-text); }
+.prose ul { margin-top: .7rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
+.prose li { list-style: disc; color: var(--color-text); }
+.prose a { color: var(--color-accent); }
+
+/* --- Callouts ------------------------------------------------------------- */
+/* Illustrative / informational note (e.g. "illustrative demo — figures unconfirmed").
+   Info-tinted over surface with --color-text so it is AA without needing a
+   solid-fill-with-contrast token; the old solid amber fill had no contract slot. */
+.disclaimer { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 12px 16px; background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-info) 32%, var(--color-border)); color: var(--color-text); border-radius: var(--radius-md); font-size: .86rem; font-weight: 600; max-width: 70ch; }
+.disclaimer svg { flex: none; width: 18px; height: 18px; stroke: var(--color-info); fill: none; stroke-width: 2; margin-top: 1px; }
+
+/* Compliance warning band (prominent, warning-toned). */
+.warn-band { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 12px 16px; background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); border-left: 4px solid var(--color-warning); color: var(--color-text); border-radius: var(--radius-md); font-size: .86rem; font-weight: 700; max-width: 76ch; }
+.warn-band svg { flex: none; width: 18px; height: 18px; stroke: var(--color-warning); fill: none; stroke-width: 2; margin-top: 1px; }
+
+/* Needs-review flag: source content pending confirmation (never fabricated proof). */
+.needs-review { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); font-size: .86rem; color: var(--color-text); max-width: 76ch; }
+.needs-review svg { flex: none; width: 18px; height: 18px; stroke: var(--color-warning); fill: none; stroke-width: 2; margin-top: 1px; }
+.nr { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-warning); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 5px; vertical-align: middle; margin-left: 4px; }
+
+/* --- Table-of-contents chips (long policy pages) -------------------------- */
+.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
+.toc a { font-size: .82rem; font-weight: 600; color: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 12px; background: var(--color-surface); }
+.toc a:hover { border-color: var(--color-accent); text-decoration: none; }
+
+/* --- Value / feature card grid (about) ------------------------------------ */
+.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); margin-top: 1.4rem; }
+.val-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; }
+.val-card h3 { font-size: 1.05rem; }
+.val-card p { margin-top: .5rem; color: var(--color-text); font-size: .92rem; }
+
+/* --- Contact: info column + form ------------------------------------------ */
+.contact-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
+.contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; }
+.contact-card h3 { font-size: 1.05rem; }
+.contact-card p { margin-top: .4rem; color: var(--color-text); font-size: .92rem; }
+.contact-card a { color: var(--color-accent); }
+.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
+.contact-form h2 { font-size: 1.25rem; margin-bottom: 4px; }
+.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 11px 13px; font: inherit; font-size: .92rem; background: var(--color-surface); color: var(--color-text); }
+.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-muted); }
+.contact-form textarea { min-height: 120px; resize: vertical; }
+.contact-form .attest { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--color-muted); }
+.contact-form .attest input { width: auto; margin-top: 3px; }
+.contact-form .btn { align-self: flex-start; }
+
+/* --- Membership tier cards (mirrors components/membership/TierCards.astro) --
+   Illustrative figures carry an "e.g." affordance + data-illustrative hooks in the
+   markup; this sheet is presentational only. */
+.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
+.tier-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 22px; }
+.tier-card--featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); }
+.tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-primary-contrast); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-full); white-space: nowrap; }
+.tier-card h3 { font-size: 1.15rem; color: var(--color-text); }
+.tier-tagline { margin-top: 4px; font-size: .88rem; color: var(--color-muted); }
+.tier-figure { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--color-text); }
+.tier-figure-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; }
+.tier-figure-cap { font-size: .84rem; color: var(--color-muted); }
+.tier-eg { font-size: .72rem; font-weight: 500; color: var(--color-muted); }
+.tier-feats { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
+.tier-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--color-text); }
+.tier-feats li.is-no { color: var(--color-muted); }
+.tier-feats li.is-no > span:last-child { text-decoration: line-through; }
+.tier-feats .glyph { flex: none; margin-top: 1px; font-weight: 700; color: var(--color-success); }
+.tier-feats li.is-no .glyph { color: var(--color-muted); }
+.tier-cta { margin-top: 24px; width: 100%; }
+
+/* --- Illustrative label (mirrors components/membership/IllustrativeLabel.astro) */
+.illus-badge-wrap { margin-top: 14px; }
+.illus-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-full); padding: 2px 9px; font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
+.illus-note { margin-top: 16px; text-align: center; font-size: .75rem; font-style: italic; color: var(--color-muted); }
+
+/* --- Tier comparison table (mirrors components/membership/TierComparisonTable.astro) */
+.cmp-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
+table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--color-surface); }
+table.cmp th, table.cmp td { padding: 13px 16px; border-bottom: 1px solid var(--color-border); font-size: .9rem; vertical-align: middle; }
+table.cmp tbody th[scope="row"] { text-align: left; color: var(--color-text); font-weight: 600; }
+table.cmp thead th { text-align: center; background: var(--color-surface-2); vertical-align: bottom; }
+table.cmp thead th:first-child { background: transparent; }
+table.cmp td { text-align: center; color: var(--color-text); }
+.cmp-tier { display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--color-text); }
+.col-feat .cmp-tier { color: var(--color-primary); }
+.cmp-fig { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: var(--color-muted); }
+.cell-yes { color: var(--color-success); font-weight: 700; }
+.cell-no { color: var(--color-muted); }
+
+/* --- How it works --------------------------------------------------------- */
+.how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
+.how-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
+.how-card h3 { font-size: 1.15rem; }
+.how-card ol { margin-top: 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
+.how-card ol li { color: var(--color-text); font-size: .92rem; list-style: decimal; }
+
+/* --- FAQ (native <details> accordion) ------------------------------------- */
+.faq { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
+.faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--color-text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
+.faq summary::-webkit-details-marker { display: none; }
+.faq summary::after { content: "+"; color: var(--color-accent); font-weight: 700; }
+.faq details[open] summary::after { content: "\2013"; }
+.faq details > p { padding: 0 18px 16px; color: var(--color-text); font-size: .92rem; }
+
+/* --- Closing CTA band (on-dark, mirrors chrome footer's token derivation) --- */
+.cta-band { background: var(--color-text); color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); text-align: center; }
+.cta-band h2 { color: var(--color-primary-contrast); }
+.cta-band p { color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); margin-top: 8px; max-width: 52ch; margin-inline: auto; }
+.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
+
+/* --- CTA / button helpers (class-based, never inline style) --------------- */
+/* Button base + variants (.btn / .btn-primary / .btn-secondary / .btn-outline)
+   live in commerce-chrome.css + the tenant theme; these are marketing-page layout
+   helpers on top of them. */
+.btn.mt { margin-top: 1.6rem; }
+
+/* --- Responsive ----------------------------------------------------------- */
+@media (max-width: 860px) {
+  .tier-grid { grid-template-columns: 1fr; }
+  .how-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 780px) {
+  .val-grid { grid-template-columns: 1fr; }
+  .contact-cols { grid-template-columns: 1fr; }
+  .contact-form .row2 { grid-template-columns: 1fr; }
+}

package/apps/storefront/src/components/CollectionCard.astro

@@ -20,6 +20,7 @@ const image = collection.image;
 
 <a
   href={withBase(basePath, `/collections/${collection.handle}`)}
+  data-astro-prefetch
   class="group relative block aspect-[3/2] overflow-hidden rounded-md bg-border"
   data-reveal
 >

package/apps/storefront/src/components/ProductCard.astro

@@ -188,6 +188,7 @@ const quickview = {
     <h3 class="mt-1 font-display text-[0.95rem] font-medium leading-snug">
       <a
         href={withBase(basePath, `/products/${product.handle}`)}
+        data-astro-prefetch
         class="after:absolute after:inset-0 after:z-0 transition-colors motion-safe:group-hover:text-primary"
       >
         {product.title}