@zvndev/darkmown 0.20.0 → 1.0.0

package/site/pages/forge/index.skin

@@ -0,0 +1,676 @@
+/* ===================================================================
+   Forge — interactive plan / pricing configurator.
+   A confident, modern SaaS identity layered ON TOP of /base.skin
+   (tokens + .card + .source-reveal). Vivid violet brand, big rounded
+   cards, a gradient price that dominates the rail, and selectable
+   tier / feature cards whose ON state is unmistakable.
+
+   IMPORTANT: the :button / :submit directives emit *bare* <button>
+   elements (no .btn class), so every interactive element here is
+   styled by targeting `button` directly inside its container — not
+   `.btn`. That mismatch is why the old buttons fell back to ugly
+   browser defaults; this file fixes it.
+
+   Everything is scoped to .app-forge so it never leaks into the
+   shared design system. The accent lives in one token — --brand —
+   with a dark-mode override, so light and dark both stay premium.
+   =================================================================== */
+
+.app-forge
+  --brand #6d5ae6
+  --brand-deep #5a47d6
+  --brand-ink #4636b8
+  --brand-soft #f1eefe
+  --brand-tint #f7f5ff
+  --brand-line #e0dafc
+  --brand-grad linear-gradient(135deg, #7d6bff 0%, #6d5ae6 45%, #8b5cf6 100%)
+  --brand-glow rgba(109, 90, 230, .28)
+  --brand-shadow rgba(80, 60, 200, .35)
+  --on-bg #ffffff
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+
+@media (prefers-color-scheme: dark)
+  .app-forge
+    --brand #9b8bff
+    --brand-deep #b3a6ff
+    --brand-ink #cfc6ff
+    --brand-soft #1d1830
+    --brand-tint #181426
+    --brand-line #2c2548
+    --brand-grad linear-gradient(135deg, #a594ff 0%, #9b8bff 45%, #b78bff 100%)
+    --brand-glow rgba(155, 139, 255, .32)
+    --brand-shadow rgba(120, 100, 255, .4)
+    --on-bg #1a1626
+
+/* Confident sans headings, tighter than the serif default. */
+.app-forge h1, .app-forge h2, .app-forge h3
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+  letter-spacing -.02em
+
+.app-forge .eyebrow
+  color $brand
+
+.app-forge a
+  color $brand-deep
+
+/* ── Shared button reset for this app ───────────────────────────────
+   :button emits a bare <button> — give every one of them the pill
+   foundation here, then specialize per zone below. */
+.app-forge button
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+  font-size .95rem
+  font-weight 600
+  line-height 1
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .45rem
+  cursor pointer
+  border 1.5px solid transparent
+  radius 12px
+  padding .8rem 1.15rem
+  transition transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease
+  -webkit-tap-highlight-color transparent
+
+.app-forge button:active
+  transform translateY(1px) scale(.99)
+
+.app-forge button:focus-visible
+  outline none
+  box-shadow 0 0 0 4px $brand-glow
+
+/* ── Hero ───────────────────────────────────────────────────────── */
+
+.forge-hero
+  text-align center
+  max-width 760px
+  margin 0 auto
+  padding 1rem 0 .5rem
+
+.forge-hero h1
+  font-size clamp(2.7rem, 6.5vw, 4.5rem)
+  font-weight 760
+  margin .25rem 0 .5rem
+  line-height 1.02
+  background var(--brand-grad)
+  -webkit-background-clip text
+  background-clip text
+  color transparent
+
+.forge-hero p
+  margin-left auto
+  margin-right auto
+  color $ink-soft
+  font-size 1.14rem
+
+.forge-trust
+  display flex
+  flex-wrap wrap
+  gap .5rem .65rem
+  justify-content center
+  margin 1.5rem 0 .5rem
+
+.forge-trust-item
+  display inline-flex
+  align-items center
+  gap .4rem
+  font-size .82rem
+  font-weight 600
+  color $ink-soft
+  padding .42rem .9rem
+  background $panel
+  border 1px solid $brand-line
+  radius 999px
+
+.forge-trust-item::before
+  content "✓"
+  color $brand
+  font-weight 800
+
+/* ── Layout: build column + sticky summary rail ─────────────────── */
+
+.forge-layout
+  display grid
+  grid-template-columns minmax(0, 1fr) 360px
+  gap 2.25rem
+  align-items start
+  margin-top 3rem
+
+@media (max-width: 900px)
+  .forge-layout
+    grid-template-columns 1fr
+
+.forge-build h2
+  font-size 1.55rem
+  margin 2.8rem 0 1.1rem
+  font-weight 720
+  display flex
+  align-items center
+  gap .65rem
+
+.forge-build h2:first-of-type
+  margin-top 0
+
+/* Step number chip drawn from the "N · " prefix is left in the text;
+   give the heading a subtle brand underline accent instead. */
+.forge-build h2::after
+  content ""
+  flex 1
+  height 1px
+  background linear-gradient(90deg, $brand-line, transparent)
+
+/* ── Tier selector ──────────────────────────────────────────────── */
+
+.tier-grid
+  display grid
+  grid-template-columns repeat(3, 1fr)
+  gap 1rem
+
+@media (max-width: 620px)
+  .tier-grid
+    grid-template-columns 1fr
+
+.app-forge .tier
+  position relative
+  border 1.5px solid $line
+  radius 20px
+  padding 1.5rem 1.4rem
+  background $panel
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+  transition border-color .18s ease, box-shadow .2s ease, transform .18s ease, background .2s ease
+  cursor default
+  overflow hidden
+
+.app-forge .tier:hover
+  border-color $brand-line
+  transform translateY(-2px)
+  box-shadow 0 16px 36px -24px $brand-shadow
+
+.app-forge .tier h3
+  margin 0 0 .4rem
+  font-size 1.2rem
+
+.app-forge .tier p
+  font-size .92rem
+  color $muted
+  margin .5rem 0 1.2rem
+
+.app-forge .tier p:first-of-type
+  color $ink
+  margin-bottom .85rem
+
+.app-forge .tier p strong
+  font-size 1.55rem
+  font-weight 760
+  color $ink
+  letter-spacing -.02em
+
+/* Default (unselected) select button — bold outline, brand text. */
+.app-forge .tier button
+  width 100%
+  margin 0
+  background $panel
+  border-color $brand-line
+  color $brand-deep
+
+.app-forge .tier button:hover
+  border-color $brand
+  background $brand-tint
+  transform translateY(-1px)
+
+/* Active tier — driven by `.on when base == N`. Filled, lifted, ringed. */
+.app-forge .tier.on
+  border-color $brand
+  background $brand-tint
+  box-shadow 0 0 0 2px $brand, 0 22px 44px -22px $brand-shadow
+  transform translateY(-3px)
+
+.app-forge .tier.on h3
+  color $brand-ink
+
+/* The active tier's button becomes a solid gradient primary. */
+.app-forge .tier.on button
+  background var(--brand-grad)
+  border-color transparent
+  color #fff
+  box-shadow 0 10px 24px -10px $brand-shadow
+
+.app-forge .tier.on button:hover
+  filter brightness(1.06)
+  transform translateY(-1px)
+
+/* "Current" badge in the corner of the active card. */
+.tier-active
+  position absolute
+  top 1rem
+  right 1rem
+  font-size .64rem
+  font-weight 800
+  text-transform uppercase
+  letter-spacing .08em
+  color #fff
+  background var(--brand-grad)
+  padding .3rem .6rem
+  radius 999px
+  box-shadow 0 6px 16px -8px $brand-shadow
+
+.tier-active p
+  margin 0
+
+/* ── Seats stepper ──────────────────────────────────────────────── */
+
+.app-forge .seats-card
+  display flex
+  flex-wrap wrap
+  align-items center
+  justify-content space-between
+  gap 1rem
+  border 1.5px solid $brand-line
+  radius 18px
+  padding 1.4rem 1.5rem
+  background linear-gradient(180deg, $brand-tint, $panel 70%)
+
+.seat-stepper
+  display inline-flex
+  align-items center
+  gap .85rem
+  background $panel
+  border 1.5px solid $brand-line
+  radius 999px
+  padding .4rem
+
+/* Round, brand-tinted +/- pills with a number between them. */
+.app-forge .seat-stepper button
+  margin 0
+  width 2.85rem
+  height 2.85rem
+  padding 0
+  font-size 1.5rem
+  font-weight 500
+  radius 999px
+  background var(--brand-grad)
+  border-color transparent
+  color #fff
+  box-shadow 0 6px 16px -8px $brand-shadow
+
+.app-forge .seat-stepper button:hover
+  filter brightness(1.08)
+  transform translateY(-1px)
+  box-shadow 0 12px 24px -10px $brand-shadow
+
+.seat-count
+  min-width 6.5rem
+  text-align center
+  font-size 1rem
+  color $ink-soft
+
+.seat-count strong
+  display block
+  font-size 1.7rem
+  font-weight 780
+  color $brand-deep
+  letter-spacing -.02em
+  line-height 1.1
+
+.seat-meta
+  font-size .98rem
+  color $ink-soft
+
+.seat-meta strong
+  color $brand-deep
+  font-weight 700
+
+.seat-hint
+  flex-basis 100%
+  margin-top .5rem
+  font-size .85rem
+  color $muted
+  padding-top .8rem
+  border-top 1px dashed $brand-line
+
+/* ── Feature toggles — the key fix ──────────────────────────────── */
+
+.feature-grid
+  display grid
+  gap 1rem
+
+.app-forge .feature
+  position relative
+  border 1.5px solid $line
+  radius 18px
+  padding 1.4rem 1.5rem
+  background $panel
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+  transition border-color .18s ease, box-shadow .2s ease, background .2s ease, transform .18s ease
+
+.app-forge .feature:hover
+  border-color $brand-line
+  transform translateY(-1px)
+
+.feature-head
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+
+.app-forge .feature-head h3
+  margin 0
+  font-size 1.12rem
+  display flex
+  align-items center
+  gap .55rem
+
+.feature-head strong
+  font-size 1rem
+  font-weight 700
+  color $brand-deep
+  white-space nowrap
+  background $brand-soft
+  border 1px solid $brand-line
+  padding .25rem .6rem
+  radius 999px
+
+.app-forge .feature p
+  margin .6rem 0 1.1rem
+  font-size .92rem
+  color $muted
+
+/* OFF state — outline "Add +" button on a plain card. */
+.app-forge .feature button
+  margin 0
+  background $panel
+  border-color $brand-line
+  color $brand-deep
+
+.app-forge .feature button:hover
+  border-color $brand
+  background $brand-tint
+  transform translateY(-1px)
+
+/* ON state — `.on when <flag>`: brand ring + tint, unmistakable. */
+.app-forge .feature.on
+  border-color $brand
+  background $brand-tint
+  box-shadow 0 0 0 2px $brand, 0 18px 40px -24px $brand-shadow
+
+/* A check dot appears before the title when the feature is on. */
+.app-forge .feature.on .feature-head h3::before
+  content "✓"
+  display inline-flex
+  align-items center
+  justify-content center
+  width 1.35rem
+  height 1.35rem
+  font-size .8rem
+  font-weight 900
+  color #fff
+  background var(--brand-grad)
+  radius 999px
+  box-shadow 0 4px 12px -4px $brand-shadow
+
+/* When ON, the "Remove" button is the filled "Added" affordance. */
+.app-forge .feature.on button
+  background var(--brand-grad)
+  border-color transparent
+  color #fff
+  box-shadow 0 10px 24px -12px $brand-shadow
+
+.app-forge .feature.on button:hover
+  filter brightness(1.06)
+  border-color transparent
+  background var(--brand-grad)
+  transform translateY(-1px)
+
+/* The "On — counted in your total" badge above the button. */
+.feature-state
+  display inline-flex
+  align-items center
+  gap .45rem
+  font-size .76rem
+  font-weight 800
+  text-transform uppercase
+  letter-spacing .05em
+  color $brand-deep
+  margin-bottom .8rem
+  background $brand-soft
+  border 1px solid $brand-line
+  padding .35rem .7rem
+  radius 999px
+
+.feature-state.is-on::before
+  content ""
+  width .5rem
+  height .5rem
+  radius 999px
+  background $brand
+  box-shadow 0 0 0 3px $brand-glow
+
+/* ── Upsell hints ───────────────────────────────────────────────── */
+
+.forge-hints
+  display grid
+  gap .6rem
+  margin-top 1.4rem
+
+.hint
+  font-size .9rem
+  line-height 1.5
+  padding .9rem 1.1rem
+  radius 14px
+  border 1px solid $line
+  border-left 3px solid $muted
+  background $panel
+  color $ink-soft
+
+.hint strong
+  color $ink
+
+.hint-suggest
+  border-left-color $brand
+  background $brand-soft
+
+.hint-suggest strong
+  color $brand-deep
+
+.hint-good
+  border-left-color #1f9d6b
+  background rgba(31, 157, 107, .08)
+
+.hint-unlock
+  border-left-color $gold
+  background rgba(182, 130, 43, .1)
+
+.hint-unlock strong
+  color $gold
+
+/* ── Sticky summary rail ────────────────────────────────────────── */
+
+.forge-summary
+  position sticky
+  top 1.5rem
+
+.summary-card
+  border 1.5px solid $brand-line
+  radius 24px
+  padding 1.6rem 1.6rem 1.5rem
+  background $panel
+  box-shadow 0 24px 60px -34px $brand-shadow, 0 1px 2px rgba(28,24,20,.05)
+
+.summary-card h3
+  margin 0 0 .35rem
+  font-size .78rem
+  text-transform uppercase
+  letter-spacing .12em
+  color $muted
+  font-weight 800
+
+/* The price block — a big gradient number that dominates the rail. */
+.price-block
+  display flex
+  align-items baseline
+  flex-wrap wrap
+  gap .35rem
+  margin .5rem 0 1.2rem
+
+.price-now
+  font-size clamp(3rem, 9vw, 4rem)
+  font-weight 820
+  line-height 1
+  letter-spacing -.04em
+  background var(--brand-grad)
+  -webkit-background-clip text
+  background-clip text
+  color transparent
+
+.price-now strong
+  font-weight 820
+  color inherit
+
+.price-unit
+  font-size .95rem
+  color $muted
+  font-weight 600
+
+.summary-lines
+  display grid
+  gap .6rem
+  padding 1.1rem 0
+  border-top 1px solid $line
+  border-bottom 1px solid $line
+
+.summary-line
+  display flex
+  justify-content space-between
+  font-size .92rem
+  color $ink-soft
+
+.annual-block
+  margin 1.1rem 0
+  font-size .9rem
+  line-height 1.55
+  color $ink-soft
+  padding .9rem 1rem
+  background $brand-soft
+  border 1px solid $brand-line
+  radius 14px
+
+.annual-block strong
+  color $brand-deep
+  font-weight 750
+
+.summary-cta
+  margin .5rem 0 .9rem
+
+/* Reset = quiet ghost button. */
+.app-forge .summary-cta button
+  width 100%
+  margin 0
+  background transparent
+  border-color $line
+  color $muted
+  font-weight 650
+
+.app-forge .summary-cta button:hover
+  border-color $brand
+  color $brand-deep
+  background $brand-tint
+
+.summary-card p
+  font-size .8rem
+  color $muted
+  margin .2rem 0 0
+  max-width none
+
+/* ── Checkout ───────────────────────────────────────────────────── */
+
+.checkout-card
+  border 1.5px solid $brand-line
+  radius 24px
+  padding 1.8rem
+  background linear-gradient(165deg, $brand-soft, $panel 65%)
+  max-width 560px
+  margin-top 1rem
+  box-shadow 0 20px 50px -32px $brand-shadow
+
+.app-forge .checkout-card form
+  display flex
+  flex-direction column
+  gap .25rem
+
+.app-forge .checkout-card input
+  font-size 1rem
+  padding .85rem .95rem
+  border 1.5px solid $brand-line
+  background $panel
+  color $ink
+  radius 14px
+  width 100%
+  margin .35rem 0
+  transition border-color .15s ease, box-shadow .15s ease
+
+.app-forge .checkout-card input:focus
+  outline none
+  border-color $brand
+  box-shadow 0 0 0 4px $brand-glow
+
+/* Strong, filled "Start trial" submit. */
+.app-forge .checkout-card button
+  margin .7rem 0 0
+  width 100%
+  padding .95rem 1.2rem
+  font-size 1.02rem
+  font-weight 700
+  background var(--brand-grad)
+  border-color transparent
+  color #fff
+  radius 14px
+  box-shadow 0 14px 32px -14px $brand-shadow
+
+.app-forge .checkout-card button:hover
+  filter brightness(1.06)
+  transform translateY(-2px)
+  box-shadow 0 20px 40px -16px $brand-shadow
+
+.checkout-note
+  margin-top 1rem
+  font-size .88rem
+  color $ink-soft
+
+.checkout-note strong
+  color $brand-deep
+
+.receipt
+  margin-top 1.1rem
+  padding 1.3rem 1.4rem
+  border 1.5px solid $brand
+  background $brand-tint
+  radius 18px
+  box-shadow 0 0 0 2px $brand-glow
+
+.receipt h3
+  margin 0 0 .4rem
+  font-size 1.2rem
+  color $brand-ink
+
+.receipt p
+  margin .2rem 0
+  font-size .95rem
+  color $ink-soft
+
+.receipt strong
+  color $brand-deep
+  font-weight 700
+
+.checkout-error
+  margin-top 1rem
+  padding .9rem 1.1rem
+  radius 14px
+  border 1px solid $warm
+  border-left 3px solid $warm
+  background $warm-soft
+  color $warm
+  font-size .9rem
+
+/* Source-reveal sits inside the violet wrapper — keep its summary on-brand. */
+.app-forge .source-reveal summary
+  color $brand-deep