@zvndev/darkmown 0.19.0 → 1.0.0

package/site/pages/folio/-style.skin

@@ -0,0 +1,375 @@
+/* ===================================================================
+   Folio — a boutique storefront. Warm editorial luxe.
+
+   Sits on top of /base.wd (tokens, type, dark mode, .card/.btn/.tag).
+   The DISTINCT identity: a refined terracotta accent, a tight 2-column
+   product grid beside a sticky cart rail, compact uniform cards with a
+   soft emoji chip, and a filled brand "Add" button.
+   Shared by /folio/ and /folio/cart/ via `@include ./style.wd`.
+   =================================================================== */
+
+/* The brand accent — scoped to the app wrapper so it never leaks into
+   the rest of the site. Dark mode lifts it to a warmer, brighter clay. */
+.app-folio
+  --brand #b8462e
+  --brand-deep #97331f
+  --brand-soft #f8ece5
+  --brand-tint #fbf3ee
+  --shelf #fcf9f4
+
+@media (prefers-color-scheme: dark)
+  .app-folio
+    --brand #e88a6f
+    --brand-deep #f2a78f
+    --brand-soft #2c1d16
+    --brand-tint #221710
+    --shelf #18130e
+
+.app-folio
+  padding-top 1rem
+
+/* ── Storefront header / hero ───────────────────────────────────── */
+
+.shop-head
+  display flex
+  flex-wrap wrap
+  align-items flex-end
+  justify-content space-between
+  gap 1.25rem 2rem
+  padding 2.25rem 0 1.75rem
+  border-bottom 1px solid $line
+
+.shop-mark
+  max-width 44ch
+
+.shop-eyebrow
+  display inline-block
+  text-transform uppercase
+  letter-spacing .22em
+  font-size .72rem
+  font-weight 600
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  color var(--brand)
+  margin 0 0 .55rem
+
+.shop-name
+  font-size clamp(2.75rem, 7vw, 4.75rem)
+  line-height .92
+  letter-spacing -.03em
+  margin 0
+  font-weight 600
+
+.shop-name em
+  font-style italic
+  color var(--brand)
+
+.shop-tagline
+  font-size 1.08rem
+  color $ink-soft
+  margin .85rem 0 0
+  max-width 42ch
+
+/* ── Layout: catalog + sticky cart rail ─────────────────────────── */
+
+.shop-layout
+  display grid
+  grid-template-columns 1fr 300px
+  gap 2rem
+  align-items start
+  margin-top 2rem
+
+.shop-main
+  min-width 0
+
+@media (max-width: 900px)
+  .shop-layout
+    grid-template-columns 1fr
+    gap 1.5rem
+
+/* ── Search field (a :bind input) ───────────────────────────────── */
+
+.shop-search input[data-wd-bind-input]
+  width 100%
+  box-sizing border-box
+  font-family inherit
+  font-size 1.02rem
+  padding .8rem 1.1rem
+  border 1px solid $line
+  radius 999px
+  bg $panel
+  color $ink
+  margin .1rem 0 .35rem
+  transition border-color .15s ease, box-shadow .15s ease
+
+.shop-search input[data-wd-bind-input]:focus
+  outline none
+  border-color var(--brand)
+  box-shadow 0 0 0 3px var(--brand-soft)
+
+.shop-search input[data-wd-bind-input]::placeholder
+  color $faint
+
+.shop-hint
+  font-size .82rem
+  color $muted
+  font-style italic
+  margin .1rem 0 0
+
+/* ── Catalog grid ────────────────────────────────────────────────
+   The reactive @loop renders rows into a `<div data-wd-loop-out>`, so the
+   grid lives on that out container (its direct children are the cards). */
+
+.catalog
+  margin 1.5rem 0 0
+
+.catalog [data-wd-loop-out]
+  display grid
+  grid-template-columns repeat(2, 1fr)
+  gap 1rem
+
+@media (max-width: 620px)
+  .catalog [data-wd-loop-out]
+    grid-template-columns 1fr
+
+/* ── Product card ─────────────────────────────────────────────────
+   Compact and uniform: a small emoji chip top-left, the name + tag,
+   a one-line blurb, then a price/Add footer pinned to the bottom. */
+
+.product
+  position relative
+  display flex
+  flex-direction column
+  gap .7rem
+  padding 1.1rem 1.15rem 1.15rem
+  height 100%
+  box-sizing border-box
+  border 1px solid $line
+  radius $radius
+  bg $panel
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+  transition transform .16s ease, box-shadow .16s ease, border-color .16s ease
+
+.product:hover
+  transform translateY(-2px)
+  border-color var(--brand)
+  box-shadow 0 16px 34px -22px rgba(28,24,20,.45)
+
+/* Prose inside the card containers renders as <p>; strip its margins so
+   the compact layout holds (the chip is a tight 48px box). */
+.product .chip p, .product .pname p, .product .tag p, .product .blurb p, .product .price p
+  margin 0
+  max-width none
+
+/* The emoji chip — a small soft-tinted rounded square holding the emoji. */
+.product .chip
+  display flex
+  align-items center
+  justify-content center
+  width 48px
+  height 48px
+  font-size 1.65rem
+  line-height 1
+  radius 14px
+  background var(--brand-tint)
+  border 1px solid $line-soft
+  flex-shrink 0
+
+.product .body
+  display flex
+  flex-direction column
+  gap .4rem
+  flex 1
+  min-width 0
+
+.product .pname
+  font-size 1.18rem
+  line-height 1.18
+  letter-spacing -.015em
+  margin 0
+  font-weight 600
+
+.product .body .tag
+  align-self flex-start
+  margin 0
+  background var(--brand-soft)
+  color var(--brand-deep)
+
+.product .blurb
+  font-size .86rem
+  color $ink-soft
+  line-height 1.45
+  margin .1rem 0 0
+  flex 1
+  display -webkit-box
+  -webkit-line-clamp 2
+  -webkit-box-orient vertical
+  overflow hidden
+
+.product .foot
+  display flex
+  align-items center
+  justify-content space-between
+  gap .6rem
+  margin-top .55rem
+  padding-top .8rem
+  border-top 1px solid $line-soft
+
+.product .price
+  font-size 1.3rem
+  font-weight 650
+  letter-spacing -.02em
+  color $ink
+  margin 0
+
+/* The "Add" button — filled brand terracotta, white, fully rounded.
+   The `:button` directive emits a bare <button data-wd-action>, so we
+   target it by attribute (same pattern as the cart's remove button). */
+.product .foot button[data-wd-action]
+  border 0
+  margin 0
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .85rem
+  font-weight 600
+  letter-spacing .01em
+  padding .5rem 1.1rem
+  radius 999px
+  bg var(--brand)
+  color #fff
+  cursor pointer
+  flex-shrink 0
+  transition background .14s ease, transform .12s ease, box-shadow .12s ease
+
+.product .foot button[data-wd-action]:hover
+  bg var(--brand-deep)
+  transform translateY(-1px)
+  box-shadow 0 8px 16px -8px rgba(184,70,46,.5)
+
+.product .foot button[data-wd-action]:active
+  transform translateY(0)
+
+/* Empty / no-matches state — spans the whole grid row. */
+.catalog-empty
+  grid-column 1 / -1
+  padding 2.25rem 1.5rem
+  text-align center
+  border 1px dashed $line
+  radius $radius
+  bg $paper-2
+  color $muted
+
+.catalog-empty p
+  margin .3rem auto
+  max-width none
+
+/* ── Sticky cart rail (catalog page) — same card treatment ──────── */
+
+.cart-rail
+  position sticky
+  top 1.25rem
+  border 1px solid $line
+  radius $radius
+  bg $panel
+  padding 1.25rem 1.25rem 1.35rem
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+
+.cart-rail .rail-eyebrow
+  display flex
+  align-items center
+  justify-content space-between
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .7rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .12em
+  color $muted
+  margin 0 0 .15rem
+
+.cart-rail .rail-count
+  font-size 2.85rem
+  line-height 1
+  letter-spacing -.03em
+  color var(--brand)
+  margin .1rem 0 0
+  font-weight 650
+
+.cart-rail .rail-sub
+  font-size .88rem
+  color $ink-soft
+  margin .5rem 0 1rem
+
+.cart-rail .rail-link
+  display flex
+  align-items center
+  justify-content center
+  gap .4rem
+  width 100%
+  box-sizing border-box
+  margin 0
+  padding .75rem 1rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .92rem
+  font-weight 600
+  text-decoration none
+  radius 999px
+  bg var(--brand)
+  color #fff
+  border 1px solid var(--brand)
+  transition background .14s ease, transform .12s ease, box-shadow .12s ease
+
+.cart-rail .rail-link:hover
+  bg var(--brand-deep)
+  color #fff
+  transform translateY(-1px)
+  box-shadow 0 8px 16px -8px rgba(184,70,46,.5)
+
+.cart-rail .rail-note
+  margin 1rem 0 0
+  border-top 1px solid $line-soft
+  padding-top .9rem
+  font-size .8rem
+  color $muted
+  font-style italic
+  line-height 1.5
+
+/* ── Persistence ribbon ─────────────────────────────────────────── */
+
+.persist-note
+  display flex
+  gap .7rem
+  align-items flex-start
+  margin 1.75rem 0 0
+  padding 1rem 1.2rem
+  border 1px solid $line
+  border-left 3px solid var(--brand)
+  radius $radius-sm
+  bg var(--brand-soft)
+  color $ink-soft
+  font-size .9rem
+
+.persist-note .dot
+  font-size 1.05rem
+  line-height 1.5
+  color var(--brand)
+
+/* ── Footer cross-link strip ────────────────────────────────────── */
+
+.folio-foot
+  display flex
+  flex-wrap wrap
+  align-items center
+  justify-content space-between
+  gap 1rem
+  margin 3rem 0 0
+  padding-top 1.5rem
+  border-top 1px solid $line
+  font-size .92rem
+  color $muted
+
+.folio-foot a
+  color var(--brand)
+  font-weight 600
+  text-decoration none
+
+.folio-foot a:hover
+  color var(--brand-deep)
+  text-decoration underline

package/site/pages/folio/-style.wd

@@ -0,0 +1,6 @@
+<!-- Folio — shared style carrier.
+
+     Both the catalog (/folio/) and the cart (/folio/cart/) `@include ./style.wd`
+     so the boutique look lives in exactly one place. This file renders no markup;
+     including it pulls in style.skin (the warm editorial-luxe layer that sits on
+     top of the base design system from /base.wd). -->

package/site/pages/folio/cart.skin

@@ -0,0 +1,309 @@
+/* Folio cart / checkout page — thin layer over style.skin and /base.wd.
+   Holds the line-item rows, the two-column cart layout, and the checkout
+   form + receipt styling. */
+
+/* ── Two-column: line items | checkout panel ────────────────────── */
+
+.app-folio .cart-grid
+  display grid
+  grid-template-columns 1.3fr 1fr
+  gap 2rem
+  align-items start
+  margin-top 2rem
+
+.app-folio .cart-lines h2, .app-folio .checkout-panel h2
+  margin-top 0
+
+@media (max-width: 860px)
+  .app-folio .cart-grid
+    grid-template-columns 1fr
+    gap 2rem
+
+/* ── A basket line — same compact card treatment as the catalog ──── */
+
+.app-folio .line
+  display flex
+  align-items center
+  gap .9rem
+  padding .85rem 1rem
+  margin .65rem 0
+  border 1px solid $line
+  radius $radius
+  bg $panel
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+  transition border-color .14s ease, box-shadow .14s ease
+
+.app-folio .line:hover
+  border-color var(--brand)
+  box-shadow 0 10px 24px -18px rgba(28,24,20,.45)
+
+/* Prose inside the line containers renders as <p>; strip its margins so
+   the compact row holds (the chip is a tight 46px box). */
+.app-folio .line .line-emoji p, .app-folio .line .line-name p, .app-folio .line .line-cat p, .app-folio .line .line-price p
+  margin 0
+  max-width none
+
+/* The emoji chip — matches the catalog card chip exactly. */
+.app-folio .line .line-emoji
+  font-size 1.55rem
+  line-height 1
+  width 46px
+  height 46px
+  display flex
+  align-items center
+  justify-content center
+  flex-shrink 0
+  radius 14px
+  background var(--brand-tint)
+  border 1px solid $line-soft
+
+.app-folio .line .line-body
+  flex 1
+  min-width 0
+
+.app-folio .line .line-name
+  font-size 1.08rem
+  font-weight 600
+  letter-spacing -.01em
+  line-height 1.2
+  margin 0
+
+.app-folio .line .line-cat
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .68rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .08em
+  color $muted
+  margin .2rem 0 0
+
+.app-folio .line .line-price
+  font-size 1.15rem
+  font-weight 650
+  letter-spacing -.02em
+  color $ink
+  margin 0
+  flex-shrink 0
+
+.app-folio .line button[data-wd-action]
+  border 1px solid $line
+  margin 0
+  flex-shrink 0
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .78rem
+  font-weight 600
+  padding .42rem .8rem
+  radius 999px
+  bg $panel
+  color $muted
+  cursor pointer
+  transition color .14s ease, border-color .14s ease, background .14s ease
+
+.app-folio .line button[data-wd-action]:hover
+  color var(--brand)
+  border-color var(--brand)
+  background var(--brand-soft)
+
+/* Empty basket card */
+.app-folio .cart-blank
+  padding 2.25rem 1.5rem
+  text-align center
+  border 1px dashed $line
+  radius $radius
+  bg $paper-2
+  color $muted
+
+.app-folio .cart-blank a
+  color var(--brand)
+  font-weight 600
+
+/* Clear-basket action row */
+.app-folio .cart-actions
+  display flex
+  align-items center
+  justify-content space-between
+  flex-wrap wrap
+  gap .75rem
+  margin-top 1.25rem
+  padding-top 1.1rem
+  border-top 1px solid $line-soft
+  font-size .9rem
+  color $muted
+
+.app-folio .cart-actions button[data-wd-action]
+  border 1px solid $line
+  margin 0
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .82rem
+  font-weight 600
+  padding .55rem 1rem
+  radius 999px
+  bg $panel
+  color $ink-soft
+  cursor pointer
+  transition color .14s ease, border-color .14s ease
+
+.app-folio .cart-actions button[data-wd-action]:hover
+  color var(--brand)
+  border-color var(--brand)
+
+/* ── Checkout panel ─────────────────────────────────────────────── */
+
+.app-folio .checkout-panel
+  position sticky
+  top 1.25rem
+  border 1px solid $line
+  radius $radius
+  bg $panel
+  padding 1.5rem 1.5rem 1.65rem
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+
+.app-folio .checkout-panel p
+  font-size .92rem
+  color $ink-soft
+
+.app-folio .checkout-panel form
+  display flex
+  flex-direction column
+  gap .75rem
+  margin 1.25rem 0 0
+
+.app-folio .checkout-panel input, .app-folio .checkout-panel select
+  width 100%
+  box-sizing border-box
+  font-family inherit
+  font-size 1rem
+  padding .75rem .9rem
+  border 1px solid $line
+  radius $radius-sm
+  bg $paper
+  color $ink
+  margin 0
+  transition border-color .15s ease, box-shadow .15s ease
+
+.app-folio .checkout-panel input:focus, .app-folio .checkout-panel select:focus
+  outline none
+  border-color var(--brand)
+  box-shadow 0 0 0 3px var(--brand-soft)
+
+.app-folio .checkout-panel input::placeholder
+  color $faint
+
+.app-folio .checkout-panel button[type="submit"]
+  border 0
+  margin .45rem 0 0
+  width 100%
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size 1rem
+  font-weight 600
+  letter-spacing .01em
+  padding .9rem 1rem
+  radius 999px
+  bg var(--brand)
+  color #fff
+  cursor pointer
+  transition background .14s ease, transform .12s ease, box-shadow .12s ease
+
+.app-folio .checkout-panel button[type="submit"]:hover
+  bg var(--brand-deep)
+  transform translateY(-1px)
+  box-shadow 0 10px 20px -8px rgba(184,70,46,.5)
+
+.app-folio .checkout-panel button[type="submit"]:active
+  transform translateY(0)
+
+.app-folio .checkout-hint
+  margin 1.1rem 0 0
+  padding-top 1rem
+  border-top 1px solid $line-soft
+  font-size .85rem
+  color $muted
+  font-style italic
+
+/* ── Receipt ────────────────────────────────────────────────────── */
+
+.app-folio .receipt
+  margin 1.25rem 0 0
+  padding 1.2rem 1.3rem
+  border 1px solid var(--brand)
+  border-left 3px solid var(--brand)
+  radius $radius
+  background var(--brand-soft)
+
+.app-folio .receipt strong
+  color var(--brand-deep)
+
+.app-folio .receipt p
+  color $ink-soft
+
+.app-folio .receipt .receipt-stamp
+  margin .6rem 0 0
+  font-family ui-monospace, "SF Mono", Menlo, monospace
+  font-size .76rem
+  color $muted
+
+.app-folio .receipt-error
+  margin 1rem 0 0
+  padding 1rem 1.2rem
+  border 1px solid $line
+  border-left 3px solid $warm
+  radius $radius-sm
+  background $warm-soft
+  color $ink-soft
+  font-size .9rem
+
+/* ── Order summary — live subtotal/tax/total via :computed sum() + | money ── */
+.app-folio .order-summary
+  margin-top 1.25rem
+  padding 1.1rem 1.2rem
+  border 1px solid $line-soft
+  radius 14px
+  bg $panel
+
+.app-folio .order-summary h3
+  margin 0 0 .75rem
+  font-size .78rem
+  font-weight 700
+  letter-spacing .08em
+  text-transform uppercase
+  color $muted
+
+.app-folio .sum-row
+  display flex
+  align-items baseline
+  justify-content space-between
+  gap 1rem
+  font-size .92rem
+  color $ink-soft
+  padding .3rem 0
+
+.app-folio .sum-row p
+  margin 0
+
+.app-folio .sum-val
+  font-variant-numeric tabular-nums
+  color $ink
+
+.app-folio .sum-total
+  margin-top .35rem
+  padding-top .7rem
+  border-top 1px solid $line-soft
+  font-size 1.05rem
+  color $ink
+
+.app-folio .order-summary button[data-wd-action]
+  margin-top 1rem
+  width 100%
+  border 1px solid $line
+  font-size .82rem
+  font-weight 600
+  padding .6rem 1rem
+  radius 999px
+  bg transparent
+  color $ink-soft
+  cursor pointer
+  transition color .14s ease, border-color .14s ease
+
+.app-folio .order-summary button[data-wd-action]:hover
+  color $ink
+  border-color $ink-soft