@omega.js/extension 0.1.0

package/dist/assets/themes/classy/css/marketing/_sections.scss

@@ -0,0 +1,649 @@
+// Classy v2 marketing sections — logo marquee band, stats band, pricing
+// cards, serif quote, CTA band, FAQ, comparison table, promo banner.
+
+// ── Logo marquee band ────────────────────────────────────────────────────────
+
+.omega-logos {
+  .omega-micro {
+    display: block;
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .omega-marquee__item {
+    display: inline-flex;
+    align-items: center;
+    opacity: 0.5;
+    filter: grayscale(1);
+    transition:
+      opacity var(--omega-speed) var(--omega-ease),
+      filter var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      opacity: 1;
+      filter: grayscale(0);
+    }
+
+    img,
+    svg {
+      height: 1.375rem;
+      width: auto;
+    }
+  }
+
+  // Real combomarks (Ian 2026-07-16: the legacy UJM wordmark set, ported to
+  // core/logos): full-color originals inlined, muted to a uniform wall by the
+  // item's grayscale — dark mode luminance-flips them so ink-dark marks stay
+  // legible on charcoal. Hover restores the brand color (the item drops its
+  // filter; the invert must go with it).
+  .omega-logos__mark {
+    display: inline-flex;
+    align-items: center;
+
+    svg {
+      height: 1.625rem;
+      width: auto;
+    }
+  }
+
+  [data-bs-theme='dark'] & .omega-marquee__item:not(:hover) {
+    filter: grayscale(1) invert(1);
+  }
+
+  // Logo lockups: inlined FA brand mark + name, muted like a proper logo wall
+  .omega-logos__lockup {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5625rem;
+    color: var(--omega-ink);
+    white-space: nowrap;
+    font-size: 1.09375rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+
+    svg {
+      width: 1.375em;
+      height: 1.375em;
+    }
+  }
+
+  // Word-logos (the draft-2 treatment): typographic brand names, alternating
+  // grotesk/serif voices so the row reads like a real logo wall.
+  .omega-logos__word {
+    font-size: 1.15625rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    color: var(--omega-ink);
+    text-transform: capitalize;
+    white-space: nowrap;
+  }
+
+  .omega-marquee__item:nth-child(even) .omega-logos__word {
+    font-family: var(--omega-font-serif);
+    font-weight: 560;
+    font-style: italic;
+  }
+
+  .omega-marquee__item:nth-child(3n) .omega-logos__word {
+    text-transform: uppercase;
+    font-size: 0.96875rem;
+    letter-spacing: 0.06em;
+  }
+}
+
+// ── Stats band ───────────────────────────────────────────────────────────────
+
+.omega-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2rem 1.5rem;
+
+  @media (min-width: 992px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.omega-stat {
+  padding-inline-start: 1.25rem;
+  border-inline-start: 1px solid var(--omega-line-strong);
+
+  // The stat's glyph takes its item's tone slot when one is named
+  // (`.omega-tone-<n>` sets --omega-tone), the brand accent when none is.
+  // The NUMBER stays ink either way: the tone marks the stat, it never
+  // recolors the typography.
+  .omega-stat__icon {
+    margin-bottom: 0.625rem;
+    color: var(--omega-tone, var(--omega-accent));
+    background: color-mix(in srgb, var(--omega-tone, var(--omega-accent)) 14%, transparent);
+  }
+
+  .omega-stat__num {
+    font-family: var(--omega-font-marketing);
+    font-size: clamp(2rem, 3.6vw, 2.75rem);
+    font-weight: 560;
+    letter-spacing: -0.02em;
+    line-height: 1.05;
+    color: var(--omega-ink);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .omega-stat__label {
+    margin-top: 0.375rem;
+    font-size: 0.84375rem;
+    font-weight: 550;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-stat__sub {
+    font-size: 0.71875rem;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── Pricing cards ────────────────────────────────────────────────────────────
+
+// Price card — bronn anatomy: quiet header block with FIXED rhythm so
+// feature rows line up across every card, thin muted checks, CTA pinned to
+// the bottom so buttons align. Enterprise rides the same card with a serif
+// "Custom" amount.
+.omega-price-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2rem 1.75rem 1.75rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+
+  // Recommended plan wears the iridescent gradient ring (2px, padding-box /
+  // border-box two-layer paint — see .omega-btn-ring for the button twin)
+  &.omega-price-card--popular {
+    border: 2px solid transparent;
+    background:
+      linear-gradient(var(--omega-surface), var(--omega-surface)) padding-box,
+      var(--omega-gradient) border-box;
+    box-shadow: var(--omega-shadow-2);
+  }
+
+  .omega-price-card__popular {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .omega-price-card__name {
+    font-size: 1.1875rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    color: var(--omega-ink);
+    margin-bottom: 0.25rem;
+  }
+
+  // Fixed two-line slot — keeps every card's price on the same baseline
+  .omega-price-card__tagline {
+    min-height: 2.6em;
+    margin-bottom: 1.25rem;
+    font-size: 0.875rem;
+    line-height: 1.45;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-price-card__price {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    min-height: 3rem;
+    color: var(--omega-ink);
+
+    // ONE amount voice — serif marketing display for numbers AND words
+    // (Ian 2026-07-16: "$29" rendered sans beside serif "Free"/"Custom")
+    .omega-price-card__amount {
+      font-family: var(--omega-font-marketing);
+      font-size: 2.625rem;
+      font-weight: 500;
+      letter-spacing: -0.02em;
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+
+    .omega-price-card__currency {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: var(--omega-ink-muted);
+    }
+
+    .omega-price-card__per {
+      font-size: 0.8125rem;
+      color: var(--omega-ink-faint);
+    }
+  }
+
+  // Fixed one-line slot (swaps with the billing toggle — a JS contract)
+  .omega-price-card__billing {
+    min-height: 1.25rem;
+    margin: 0.375rem 0 1.25rem;
+    font-size: 0.75rem;
+    color: var(--omega-ink-faint);
+  }
+
+  .omega-price-card__features {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.90625rem;
+    line-height: 1.5;
+    color: var(--omega-ink-muted);
+
+    // The bullet's check is `.omega-feature-check` — one home in
+    // core/css/core/_utilities.scss, shared with the enterprise band and the
+    // account page's change-plan modal.
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.6875rem;
+      padding-block: 0.5rem;
+    }
+
+    // Config-defined feature definitions — dotted underline + tooltip
+    .cursor-help {
+      text-decoration-color: var(--omega-ink-faint) !important;
+      text-underline-offset: 0.1875em;
+      transition: text-decoration-color var(--omega-speed) var(--omega-ease);
+
+      &:hover {
+        text-decoration-color: var(--omega-ink) !important;
+      }
+    }
+  }
+
+  .omega-price-card__tier-note {
+    margin: 0.875rem 0 0.25rem;
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--omega-ink-faint);
+  }
+
+  // CTA pinned to the card floor — buttons align across the row
+  .omega-price-card__cta {
+    margin-top: auto;
+    padding-top: 1.5rem;
+  }
+}
+
+// Billing toggle — segmented ink control.
+// The track is the RAISED surface: --omega-surface + the strong hairline lift
+// it off the page in BOTH modes, and the selected segment inverts to the
+// recessed surface-2 (the footer's appearance control re-skins its thumb the
+// same way). The platform rail below is the other reading of the same control:
+// a recessed track with a raised selected segment.
+.omega-billing-toggle {
+  display: inline-flex;
+  padding: 0.25rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line-strong);
+  border-radius: var(--omega-radius-m);
+  box-shadow: var(--omega-shadow-1);
+
+  .btn {
+    --bs-btn-color: var(--omega-ink-muted);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--omega-ink);
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--omega-ink);
+    --bs-btn-active-bg: var(--omega-surface-2);
+    --bs-btn-active-border-color: var(--omega-line-strong);
+
+    border-radius: var(--omega-radius-s) !important;
+    font-size: 0.875rem;
+    padding: 0.375rem 1rem;
+  }
+
+  // The accent SAVE chip rides inside the Annually segment
+  .omega-billing-toggle__save {
+    padding: 0.125rem 0.4375rem;
+    font-size: 0.625rem;
+    vertical-align: 0.0625em;
+  }
+
+  .btn-check:checked + .btn {
+    color: var(--omega-ink);
+    background: var(--omega-surface-2);
+    border-color: var(--omega-line-strong);
+    box-shadow: none;
+  }
+
+  // The gliding thumb carries the active surface once the engine is live
+  &[data-omega-segmented-ready] .btn-check:checked + .btn {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .omega-segmented__thumb {
+    background: var(--omega-surface-2);
+    border-color: var(--omega-line-strong);
+    box-shadow: none;
+  }
+}
+
+// Platform rail — the download page's segmented selector (Bootstrap tab
+// machinery underneath: .active is stamped by tab JS / platform detection).
+// The recessed track sits straight on the page ground, so it reads only
+// because surface-2 is a real well now (#152); the selected segment is the
+// raised white surface on top of it.
+.omega-platform-rail {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0.25rem;
+  gap: 0.25rem;
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+
+  .btn {
+    --bs-btn-color: var(--omega-ink-muted);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--omega-ink);
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--omega-ink);
+    --bs-btn-active-bg: var(--omega-surface);
+    --bs-btn-active-border-color: var(--omega-line);
+
+    border-radius: var(--omega-radius-s) !important;
+    font-size: 0.875rem;
+    font-weight: 550;
+    padding: 0.4375rem 1rem;
+
+    &.active {
+      color: var(--omega-ink);
+      background: var(--omega-surface);
+      border-color: var(--omega-line);
+      box-shadow: var(--omega-shadow-1);
+    }
+  }
+
+  // The gliding thumb carries the active surface once the engine is live
+  &[data-omega-segmented-ready] .btn.active {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+// ── Serif quote ──────────────────────────────────────────────────────────────
+
+.omega-quote {
+  max-width: 46rem;
+  margin-inline: auto;
+  text-align: center;
+
+  .omega-quote__text {
+    font-family: var(--omega-font-marketing);
+    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
+    font-weight: 460;
+    line-height: 1.42;
+    letter-spacing: -0.012em;
+    color: var(--omega-ink);
+
+    em,
+    i {
+      font-style: italic;
+    }
+  }
+
+  .omega-quote__attr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.625rem;
+    margin-top: 1.5rem;
+  }
+
+  .omega-quote__avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.78125rem;
+    font-weight: 650;
+    color: var(--omega-ink);
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    border-radius: 50%;
+    overflow: hidden;
+
+    // Photo variant — item.avatar in the testimonials data
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: inherit;
+    }
+  }
+
+  .omega-quote__name {
+    font-size: 0.84375rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+  }
+
+  .omega-quote__role {
+    font-size: 0.78125rem;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// ── CTA band (ink panel) ─────────────────────────────────────────────────────
+
+.omega-cta {
+  padding: 3.5rem 1.5rem;
+  text-align: center;
+
+  .omega-cta__headline {
+    font-family: var(--omega-font-marketing);
+    font-size: clamp(1.875rem, 4vw, 2.875rem);
+    font-weight: 560;
+    letter-spacing: -0.02em;
+    line-height: 1.08;
+    color: var(--omega-ink);
+    max-width: 22ch;
+    margin-inline: auto;
+  }
+
+  .omega-cta__sub {
+    max-width: 36rem;
+    margin: 1rem auto 0;
+    font-size: 0.96875rem;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-cta__ctas {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-top: 1.75rem;
+  }
+
+  // Paper button on the ink panel
+  .btn-adaptive {
+    --bs-btn-color: #17171a;
+    --bs-btn-bg: #f2f1ef;
+    --bs-btn-border-color: #f2f1ef;
+    --bs-btn-hover-color: #17171a;
+    --bs-btn-hover-bg: #e4e3e0;
+    --bs-btn-hover-border-color: #e4e3e0;
+    --bs-btn-active-color: #17171a;
+    --bs-btn-active-bg: #d8d7d4;
+    --bs-btn-active-border-color: #d8d7d4;
+  }
+
+  .btn.btn-outline-adaptive,
+  .btn-cmd {
+    --bs-btn-color: var(--omega-ink);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: var(--omega-line-strong);
+    --bs-btn-hover-color: var(--omega-ink);
+    --bs-btn-hover-bg: var(--omega-surface-2);
+    --bs-btn-hover-border-color: var(--omega-line-strong);
+    --bs-btn-active-color: var(--omega-ink);
+    --bs-btn-active-bg: var(--omega-surface-2);
+    --bs-btn-active-border-color: var(--omega-line-strong);
+
+    color: var(--omega-ink);
+    background: transparent;
+    border-color: var(--omega-line-strong);
+
+    &:not(:hover, :active, .active) {
+      background: transparent !important;
+    }
+  }
+}
+
+// ── FAQ accordion ────────────────────────────────────────────────────────────
+
+// FAQ — bronn pattern: no boxes, hairline-divided rows
+.omega-faq {
+  .accordion-item {
+    margin-bottom: 0;
+    background: transparent;
+    border: 0 !important;
+    border-bottom: 1px solid var(--omega-line) !important;
+    border-radius: 0 !important;
+
+    &:first-child {
+      border-top: 1px solid var(--omega-line) !important;
+    }
+  }
+
+  .accordion-button {
+    padding: 1.25rem 0.25rem;
+    font-size: 0.984375rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+    background: transparent;
+    box-shadow: none;
+
+    &:not(.collapsed) {
+      color: var(--omega-ink);
+      background: transparent;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--omega-accent-ring);
+      outline-offset: -2px;
+    }
+
+    &::after {
+      opacity: 0.45;
+    }
+  }
+
+  .accordion-body {
+    max-width: 62ch;
+    padding: 0 0.25rem 1.375rem;
+    font-size: 0.875rem;
+    line-height: 1.65;
+    color: var(--omega-ink-muted);
+  }
+}
+
+// ── Feature comparison table ─────────────────────────────────────────────────
+
+// The money-back guarantee line wears the ok-green shield (Ian 2026-07-16)
+.omega-guarantee-icon {
+  color: var(--omega-ok);
+}
+
+.omega-compare {
+  // Included/absent marks: filled-circle check, muted filled-circle X — state
+  // told by mark + color, readable in both themes. The check's ink is
+  // Bootstrap's `.text-success`, which the root bridge points at --omega-ok,
+  // so every affirmation tick and every status green are the same green.
+  .omega-compare__no {
+    color: var(--omega-ink-faint);
+    opacity: 0.7;
+  }
+
+  // A quantified yes (#562): the check, then the catalog's own value as its
+  // label — the shape the plan cards already render. It inherits the cell's
+  // ink, so only the mark is green.
+  .omega-compare__label {
+    margin-left: 0.375rem;
+  }
+
+  .table {
+    --bs-table-bg: transparent;
+    --bs-table-color: var(--omega-ink);
+    --bs-table-border-color: var(--omega-line);
+
+    font-size: 0.875rem;
+
+    caption {
+      font-size: 0.6875rem;
+      font-weight: 650;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+      color: var(--omega-ink-faint);
+    }
+
+    thead th {
+      font-size: 0.6875rem;
+      font-weight: 650;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+      color: var(--omega-ink-faint);
+      border-bottom: 1px solid var(--omega-line-strong);
+    }
+
+    tbody th {
+      font-weight: 550;
+      color: var(--omega-ink-muted);
+    }
+
+    td {
+      color: var(--omega-ink-muted);
+    }
+  }
+}
+
+// ── Promo banner (pricing) ───────────────────────────────────────────────────
+
+.omega-promo {
+  background: var(--omega-surface);
+  border-bottom: 1px solid var(--omega-line);
+  font-size: 0.84375rem;
+  color: var(--omega-ink-muted);
+
+  // Slides in when the JS un-hides it — the nav/section transitions glide down
+  &:not([hidden]) {
+    animation: omega-promo-in var(--omega-speed-slow) var(--omega-ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:not([hidden]) {
+      animation: none;
+    }
+  }
+
+  .omega-promo__countdown,
+  .omega-promo__code {
+    font-family: var(--omega-font-mono);
+    font-weight: 600;
+    color: var(--omega-ink);
+  }
+}
+
+@keyframes omega-promo-in {
+  from {
+    transform: translateY(-100%);
+  }
+}

package/dist/assets/themes/classy/css/pages/404/index.scss

@@ -0,0 +1,67 @@
+// classy 404 — the typographic moment: a giant serif code on the living
+// dotfield, one witty line, every exit one click away.
+
+.omega-404 {
+  display: flex;
+  align-items: center;
+  min-height: calc(100vh - 12rem);
+  padding-block: 4rem;
+}
+
+.omega-404__code {
+  font-family: var(--omega-font-marketing);
+  font-size: clamp(7rem, 20vw, 13rem);
+  font-weight: 550;
+  letter-spacing: -0.04em;
+  line-height: 0.95;
+  color: var(--omega-ink);
+
+  em {
+    font-style: italic;
+    color: var(--omega-accent);
+  }
+}
+
+.omega-404__line {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.375rem;
+  color: var(--omega-ink-muted);
+  max-width: 34rem;
+  margin: 1rem auto 1.75rem;
+  text-wrap: balance;
+
+  em {
+    color: var(--omega-ink);
+  }
+}
+
+.omega-404__url {
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  background: var(--omega-surface);
+}
+
+.omega-404__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.75rem;
+}
+
+.omega-404__trail {
+  margin-top: 2rem;
+
+  a {
+    color: var(--omega-ink-muted);
+    text-decoration: none;
+    border-bottom: 1px solid var(--omega-line-strong);
+    transition: color var(--omega-speed) var(--omega-ease), border-color var(--omega-speed) var(--omega-ease);
+
+    &:hover {
+      color: var(--omega-ink);
+      border-bottom-color: var(--omega-ink);
+    }
+  }
+}