@omega.js/extension 0.1.0

package/dist/assets/themes/classy/css/pages/payment/checkout/index.scss

@@ -0,0 +1,585 @@
+// classy checkout — the commitment moment on real surfaces. The left column
+// is two hairline PANELS (plan, account) on --omega-surface, each led by an
+// icon chip, with the pay zone BARE beneath them (#374 — the buttons are the
+// one thing on the page no card contains); the right column is the order
+// summary as a receipt CARD composed from the shared receipt vocabulary
+// (components/_receipt.scss) so checkout and confirmation read as one story.
+// Tokens only, both modes.
+
+.omega-checkout {
+  max-width: 72rem;
+}
+
+// ── Header — one brand lockup, left (#373) ──────────────────────────────────
+.omega-checkout__head {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.25rem;
+
+  @media (min-width: 992px) {
+    margin-bottom: 1.75rem;
+  }
+}
+
+// The lockup is the page's h1, so its size is STATED here — an h1 default is a
+// hero, and this is a header. It sits at the panel titles' weight, one notch up
+// in size, so the mark reads as chrome above the surfaces, never as a headline.
+.omega-checkout__head-mark {
+  min-width: 0;
+  font-size: 1.0625rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+// ── Brand lockup — cover pages have no nav, so the mark lives in the head ───
+.omega-checkout__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--omega-ink);
+  font-size: inherit;
+  text-decoration: none;
+  transition: opacity var(--omega-speed) var(--omega-ease);
+
+  img {
+    width: 2rem;
+    height: 2rem;
+    object-fit: contain;
+    border-radius: var(--omega-radius-s);
+  }
+
+  &:hover {
+    color: var(--omega-ink);
+    opacity: 0.75;
+  }
+}
+
+// ── Quiet links (change plan, switch account, help) ─────────────────────────
+.omega-checkout__quiet-link {
+  color: var(--omega-ink-muted);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    color: var(--omega-accent);
+  }
+}
+
+// ── Panels — the hairline surfaces the left column is built from ────────────
+// The padding is the ORDER SUMMARY's, at both widths (Ian 2026-08-19, #370):
+// the panels used to sit looser than the summary beside them, and the tighter
+// values are the ones that read right. One card padding on the page — change
+// it here and in .omega-checkout__summary together, never one alone.
+.omega-checkout__panel {
+  padding: 1rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+
+  @media (min-width: 992px) {
+    padding: 1.375rem;
+  }
+
+  & + & {
+    margin-top: 0.75rem;
+
+    @media (min-width: 992px) {
+      margin-top: 1rem;
+    }
+  }
+
+  // One-time products hide the plan panel via bindings — the next panel then
+  // opens the column and must not carry an orphan top margin.
+  &[hidden] + & {
+    margin-top: 0;
+  }
+}
+
+.omega-checkout__panel-head {
+  margin-bottom: 1rem;
+}
+
+.omega-checkout__panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.875rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--omega-ink);
+}
+
+.omega-checkout__account {
+  color: var(--omega-ink-muted);
+  font-size: 0.9375rem;
+  // An address is one unbreakable word: let it break anywhere rather than
+  // run out of a phone-width panel.
+  overflow-wrap: anywhere;
+
+  strong {
+    color: var(--omega-ink);
+  }
+}
+
+// ── Mobile collapsed rows (Shopify-style: every card folds) ─────────────────
+// Deliberate, and ratified again in #370: the folded rows are what buy the
+// one-screen fit. They carry desktop's words, never a phone-only vocabulary.
+// The summary folds with them — it just starts OPEN, and its row states the
+// total, so nothing that matters is ever a tap away by default.
+.omega-checkout__rowtoggle {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  text-align: left;
+
+  .omega-checkout__rowtoggle-chev {
+    color: var(--omega-ink-faint);
+    flex-shrink: 0;
+    transition: transform var(--omega-speed) var(--omega-ease);
+  }
+
+  &[aria-expanded='true'] .omega-checkout__rowtoggle-chev {
+    transform: rotate(180deg);
+  }
+}
+
+.omega-checkout__rowtoggle-value {
+  margin-left: auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--omega-ink);
+  text-align: right;
+}
+
+@media (max-width: 991.98px) {
+  // A folded card IS its one-line row; expanded content pads under it
+  .omega-checkout__panel:has(> .omega-checkout__rowtoggle),
+  .omega-checkout__summary:has(> .omega-checkout__rowtoggle) {
+    > .collapse.show,
+    > .collapsing {
+      padding-top: 1rem;
+    }
+  }
+
+  // Expanded, the account panel is one block. Its head is desktop's title row,
+  // and the title is the row above on phones — so the head would be a lone
+  // right-floating "Switch account" over a gap. Order it UNDER the line it
+  // belongs to instead (#370).
+  .omega-checkout__account-block {
+    display: flex;
+    flex-direction: column;
+
+    .omega-checkout__panel-head {
+      order: 2;
+      margin-top: 0.375rem;
+      margin-bottom: 0;
+    }
+  }
+
+  // ── One-screen fit (Ian: pay button above the fold, page must not scroll) ──
+  // The cover shell's py-5 is desktop air — reclaim it on phones.
+  main.py-5 {
+    padding-top: 0.875rem !important;
+    padding-bottom: 0.625rem !important;
+  }
+
+  .omega-checkout__panel-head {
+    margin-bottom: 0.75rem;
+  }
+
+  // The summary opens by default, so its rows are what the phone lands on —
+  // they just tighten up
+  .omega-checkout .omega-receipt__panel {
+    padding: 0.125rem 1rem;
+  }
+
+  .omega-checkout .omega-receipt__row {
+    padding-block: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .omega-checkout .omega-receipt__total {
+    font-size: 1.25rem;
+  }
+
+  .omega-checkout__fineprint {
+    font-size: 0.75rem;
+  }
+
+  .omega-checkout__discount .form-control,
+  .omega-checkout__discount .btn {
+    padding-block: 0.3125rem;
+    font-size: 0.875rem;
+  }
+
+  .omega-checkout__trust {
+    gap: 0.375rem 1.25rem;
+  }
+
+  // The phone stacks the same full-width buttons desktop does — it only rides a
+  // tighter slab, and STATES that slab so every button here matches too. It
+  // lives inside the phone query so the short-phone block below can outrank it.
+  // The zone is the same class on both viewports now (#374); at this width only
+  // the phone's copy is displayed, so scoping to it is scoping to the phone.
+  .omega-checkout__pay .payment-button {
+    --omega-payment-button-height: 2.75rem;
+
+    padding-block: 0.5625rem;
+  }
+}
+
+// Short phones (SE-class ≤700px tall): same content, tighter rhythm — nothing
+// hides. The fit holds down to an SE with the payment methods a phone actually
+// offers; a device showing all five wallets scrolls the last one into reach.
+@media (max-width: 991.98px) and (max-height: 700px) {
+  main.py-5 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .omega-checkout__head {
+    margin-bottom: 0.625rem;
+  }
+
+  .omega-checkout__panel,
+  .omega-checkout__summary {
+    padding: 0.8125rem;
+  }
+
+  .omega-checkout .row {
+    --bs-gutter-y: 0.75rem;
+  }
+
+  .omega-checkout .omega-receipt__row {
+    padding-block: 0.4375rem;
+  }
+
+  .omega-checkout__fineprint {
+    font-size: 0.6875rem;
+    line-height: 1.4;
+  }
+
+  .omega-checkout__pay .payment-button {
+    --omega-payment-button-height: 2.625rem;
+
+    padding-block: 0.5rem;
+  }
+
+  .omega-checkout__terms {
+    font-size: 0.6875rem;
+  }
+}
+
+// ── Billing cycle tiles ─────────────────────────────────────────────────────
+// The tiles are equal-height columns with the price pinned to the foot, so the
+// annual tile's SAVE chip — which wraps to a second line at phone widths — can
+// never push its price below the monthly tile's (#370).
+.omega-checkout__tile {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 1.125rem;
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  cursor: pointer;
+  transition: border-color var(--omega-speed) var(--omega-ease), box-shadow var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    border-color: var(--omega-line-strong);
+  }
+}
+
+.btn-check:checked + .omega-checkout__tile {
+  border-color: var(--omega-ink);
+  box-shadow: 0 0 0 1px var(--omega-ink);
+}
+
+.btn-check:focus-visible + .omega-checkout__tile {
+  outline: 2px solid var(--omega-accent);
+  outline-offset: 2px;
+}
+
+.omega-checkout__tile-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.omega-checkout__tile-radio {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1.5px solid var(--omega-line-strong);
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: border-color var(--omega-speed) var(--omega-ease), background var(--omega-speed) var(--omega-ease);
+
+  .btn-check:checked + .omega-checkout__tile & {
+    border-color: var(--omega-accent);
+    background: var(--omega-accent);
+    box-shadow: inset 0 0 0 3.5px var(--omega-surface);
+  }
+}
+
+.omega-checkout__tile-name {
+  font-size: 0.875rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--omega-ink);
+}
+
+.omega-checkout__tile-price {
+  display: block;
+  margin-top: auto;
+  font-family: var(--omega-font-marketing);
+  font-size: 1.5rem;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  color: var(--omega-ink);
+}
+
+.omega-checkout__tile-per {
+  font-family: var(--omega-font-display);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--omega-ink-muted);
+  margin-left: 2px;
+}
+
+.omega-checkout__cadence {
+  color: var(--omega-ink-muted);
+}
+
+// ── Inline notes (guarantee / trial) — quiet, not alert boxes ───────────────
+.omega-checkout__note {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--omega-ink-muted);
+
+  &--ok .omega-icon-chip {
+    color: var(--omega-ok);
+    border-color: color-mix(in srgb, var(--omega-ok) 35%, var(--omega-line));
+    background: color-mix(in srgb, var(--omega-ok) 8%, var(--omega-surface));
+  }
+}
+
+// ── The pay zone — open space, never a card (Ian 2026-08-19, #374) ──────────
+// The buttons are the page's conclusion, so nothing boxes them in: this
+// wrapper is LAYOUT and nothing else — no background, no border, no card
+// padding. Only desktop states a rhythm, because only there does the zone
+// follow the account panel inside one column; the phone's copy is its own grid
+// cell and the row gutter already spaces it. The value IS the panel-to-panel
+// gap (.omega-checkout__panel + &): headless buttons are just the column's next
+// block, so they sit on the column's own rhythm — the extra quarter-rem existed
+// to stand the deleted head off the panel above it.
+.omega-checkout__pay {
+  @media (min-width: 992px) {
+    margin-top: 1rem;
+  }
+}
+
+// ── Payment buttons ─────────────────────────────────────────────────────────
+// One width, one HEIGHT, every viewport (#370). The wallet buttons carry brand
+// IMAGES and the rest carry a glyph + label, and a 24px image is a taller flex
+// item than that text line box — which is why PayPal measured 52px against
+// Credit/Debit's 49 (44 vs 41 on phones). So the slab height is STATED, not
+// inferred from content: padding only pads, and every viewport that retunes the
+// padding restates the height with it.
+.payment-button {
+  --omega-payment-button-height: 3.25rem;
+
+  min-height: var(--omega-payment-button-height);
+  padding-block: 0.8125rem;
+  font-weight: 600;
+  border-radius: var(--omega-radius-m);
+}
+
+// Apple Pay — ink slab (black in light, near-white in dark; both sanctioned looks)
+.payment-button--apple {
+  background: var(--omega-ink);
+  color: var(--omega-ground);
+  border-color: var(--omega-ink);
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in srgb, var(--omega-ink) 86%, var(--omega-ground));
+    color: var(--omega-ground);
+    border-color: transparent;
+  }
+}
+
+// Google Pay — white per brand guidelines (the gstatic mark is dark)
+.payment-button--gpay {
+  background: #fff;
+  color: #3c4043;
+  border-color: var(--omega-line-strong);
+
+  &:hover,
+  &:focus-visible {
+    background: #f6f5f3;
+    color: #3c4043;
+    border-color: var(--omega-line-strong);
+  }
+}
+
+// PayPal — brand yellow (kept from the pre-classy sheet)
+.btn-paypal {
+  --bs-btn-color: #333;
+  --bs-btn-bg: #ffc439;
+  --bs-btn-border-color: #ffc439;
+  --bs-btn-hover-color: #333;
+  --bs-btn-hover-bg: #eabc53;
+  --bs-btn-hover-border-color: #eabc53;
+  --bs-btn-focus-shadow-rgb: 246, 198, 87;
+  --bs-btn-active-color: #333;
+  --bs-btn-active-bg: #e8ad2e;
+  --bs-btn-active-border-color: #e8ad2e;
+  --bs-btn-disabled-color: #333;
+  --bs-btn-disabled-bg: #ffc439;
+  --bs-btn-disabled-border-color: #ffc439;
+}
+
+.omega-checkout__terms {
+  margin-top: 0.375rem;
+  text-align: center;
+  color: var(--omega-ink-faint);
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover {
+      color: var(--omega-accent);
+    }
+  }
+}
+
+// ── Order summary — the receipt card ────────────────────────────────────────
+.omega-checkout__sticky {
+  position: sticky;
+  top: 2rem;
+}
+
+@media (max-width: 991.98px) {
+  .omega-checkout__sticky {
+    position: static;
+  }
+}
+
+// The padding here is the page's card padding — .omega-checkout__panel states
+// the same pair (#370). The two move together or not at all.
+.omega-checkout__summary {
+  padding: 1rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line-strong);
+  border-radius: var(--omega-radius-l);
+
+  @media (min-width: 992px) {
+    padding: 1.375rem;
+  }
+}
+
+.omega-checkout__product {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.875rem;
+}
+
+.omega-checkout__product-name {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.125rem;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  color: var(--omega-ink);
+}
+
+.omega-checkout__discount-zone {
+  margin-bottom: 0.875rem;
+}
+
+// Negative rows (discount / trial credit) — the good kind of red ink
+.omega-checkout__row-ok {
+  color: var(--omega-ok);
+  font-variant-numeric: tabular-nums;
+}
+
+.omega-checkout__row-bad {
+  color: var(--omega-danger);
+}
+
+// Subscription terms — the fine print under the numbers
+.omega-checkout__fineprint {
+  margin-top: 0.875rem;
+  color: var(--omega-ink-faint);
+  line-height: 1.5;
+}
+
+// ── Trust chips — green marks under the buttons (Ian 2026-08-19, #374) ─────
+// Placement: CENTERED inside the pay stack, directly under the terms line, one
+// copy per zone — the whole stack (buttons, terms, chips, help) shares one
+// center axis, so nothing under the buttons reads as a stray edge. The margin is
+// stated here rather than as mt-* on the markup, because the markup is captured
+// once and rendered twice — one rhythm, both viewports, and the phone block
+// above only retunes the gap between chips.
+.omega-checkout__trust {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.625rem 1.75rem;
+  margin-top: 0.75rem;
+  font-size: 0.78125rem;
+  color: var(--omega-ink-muted);
+
+  svg {
+    color: var(--omega-ok);
+    margin-right: 0.25rem;
+  }
+}
+
+// ── Help line — the pay stack's last word (Ian 2026-08-19, #374) ────────────
+// It used to be the page foot's one line, centered by utilities on a wrapper
+// below the form; it rides the buttons' capture now, so its centering and its
+// gap are stated here — the captured markup renders twice and cannot carry a
+// rhythm of its own. The link itself keeps the quiet-link look above.
+.omega-checkout__help {
+  margin-top: 0.5rem;
+  text-align: center;
+}
+
+// ── Discount input — rounded ends on the group ──────────────────────────────
+.omega-checkout__discount {
+  .form-control {
+    border-radius: var(--omega-radius-m) 0 0 var(--omega-radius-m);
+  }
+
+  .btn {
+    border-radius: 0 var(--omega-radius-m) var(--omega-radius-m) 0;
+  }
+}
+
+// ── reCAPTCHA badge — bottom left, out of the payment column's way ──────────
+.grecaptcha-badge {
+  bottom: 0.5rem !important;
+  left: 0.5rem !important;
+  right: auto !important;
+  width: 50px !important;
+}

package/dist/assets/themes/classy/css/pages/payment/confirmation/index.scss

@@ -0,0 +1,9 @@
+// classy payment confirmation — the receipt moment.
+// The shared receipt vocabulary (panel/row/total/note) lives in
+// components/_receipt.scss (checkout composes the same panel).
+
+.omega-receipt__check {
+  color: var(--omega-ok);
+  border-color: color-mix(in srgb, var(--omega-ok) 35%, var(--omega-line));
+  background: color-mix(in srgb, var(--omega-ok) 8%, var(--omega-surface));
+}

package/dist/assets/themes/classy/css/pages/privacy.scss

@@ -0,0 +1,2 @@
+// /privacy — the shared classy legal-document treatment (legal/_document.scss).
+@use 'legal/document';