@omega.js/web 0.1.0

package/themes/newsflash/css/components/_badges.scss

@@ -0,0 +1,65 @@
+// Newsflash Theme — Badges, Chips & Pagination
+// Badges become uppercase pill chips with hairline ink frames (the "FEATURED"
+// sticker from the masthead design). Pagination becomes a row of pills.
+
+.badge {
+  border-radius: 50rem;
+  font-weight: 800;
+  font-size: 0.68em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 0.55em 0.95em;
+  @include nf-border();
+}
+
+// Tertiary "superheadline" badges (inherited layouts emit these above
+// headlines) become the volt sticker chip.
+.badge.bg-body-tertiary {
+  background: var(--nf-volt) !important;
+  color: var(--nf-volt-ink) !important;
+}
+
+// Soft category chips (blog cards) keep their soft fill but read editorial
+.badge[class*="-soft"] {
+  border-color: currentColor;
+}
+
+// ============================================
+// Pagination — pill links, vermilion active
+// ============================================
+.pagination {
+  gap: 0.4rem;
+
+  .page-link {
+    border: var(--nf-border);
+    border-radius: 50rem !important; // beats Bootstrap's first/last corner rounding
+    background: transparent;
+    color: var(--bs-body-color);
+    font-weight: 700;
+    font-size: 0.9rem;
+    padding: 0.5rem 0.95rem;
+    transition: $nf-transition;
+
+    &:hover {
+      background: var(--omega-ink);
+      color: var(--omega-ground);
+      border-color: var(--omega-line-strong);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 3px var(--nf-volt);
+    }
+  }
+
+  .page-item.active .page-link {
+    background: var(--omega-accent);
+    color: var(--omega-accent-ink);
+    border-color: var(--omega-line-strong);
+  }
+
+  .page-item.disabled .page-link {
+    background: transparent;
+    border-color: var(--omega-line);
+    color: var(--bs-secondary-color);
+  }
+}

package/themes/newsflash/css/components/_billing-toggle.scss

@@ -0,0 +1,61 @@
+// Newsflash Theme — Billing cadence toggle
+// The `omega-billing-toggle` segmented control, wherever it renders: the
+// pricing page's Monthly|Annually switch AND the account page's change-plan
+// modal (`core/js/pages/dashboard/account/sections/billing.js`) build the same
+// markup, so the skin lives in the MAIN bundle — page-scoped, the modal wore
+// the undressed classy floor while the pricing page was themed ([#236] QA
+// round 3). Structure comes from the classy floor partial imported in
+// _theme.scss; these rules land after and win.
+
+.omega-billing-toggle {
+  padding: 0.35rem;
+  gap: 0.35rem;
+  border: var(--nf-border);
+  border-radius: 50rem;
+  background: var(--bs-card-bg);
+  box-shadow: none;
+
+  // The segment labels are .btn: flatten the theme's hard-shadow pill and
+  // let the checked state fill ink.
+  .btn {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--bs-body-color);
+    font-weight: 700;
+    padding: 0.5rem 1.25rem;
+  }
+
+  // Hover goes through the RADIO on purpose. Bootstrap's own segment
+  // neutraliser (`.btn-check + .btn:hover`, which resets the label to its
+  // resting colours) is (0,3,0), and every theme PAGE sheet re-emits Bootstrap
+  // after the main bundle — so a plain `.omega-billing-toggle .btn:hover`, the
+  // same (0,3,0), lost the tie on /pricing and the segments went dead on
+  // hover. Reached through `.btn-check` this is (0,4,0) and wins on every
+  // surface the toggle renders on.
+  .btn-check + .btn:hover {
+    background: var(--omega-surface-2);
+    transform: none;
+  }
+
+  .btn-check:checked + .btn {
+    background: var(--omega-ink);
+    color: var(--omega-ground);
+  }
+
+  // The moving thumb (shared segmented engine) sits under the labels
+  .omega-segmented__thumb {
+    border-radius: 50rem;
+    background: var(--omega-ink);
+  }
+
+  .omega-billing-toggle__save {
+    font-size: 0.68rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: var(--nf-volt);
+    color: var(--nf-volt-ink);
+    border-color: var(--nf-volt);
+  }
+}

package/themes/newsflash/css/components/_buttons.scss

@@ -0,0 +1,139 @@
+// Newsflash Theme — Buttons
+// Pill buttons framed in ink, resting on a small hard offset shadow that
+// LIFTS on hover. This restyles Bootstrap's own .btn / .btn-* classes so all
+// existing markup (nav CTAs, hero buttons, forms) inherits the look with
+// zero HTML changes.
+
+.btn {
+  font-family: $font-family-sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 50rem;
+  @include nf-border();
+  @include nf-shadow-hard();
+  padding: 0.6rem 1.4rem;
+}
+
+// The lift interaction. Doubled `.btn.btn` selector (specificity 0,2,0) on
+// purpose: every theme page bundle re-emits Bootstrap's own `.btn` rules
+// (because page SCSS @forwards Bootstrap) and those load AFTER the main
+// bundle — the doubled class beats them so the lift is pure transform+shadow.
+// Outline and link buttons are flat — they opt out below.
+.btn.btn:not([class*="btn-outline-"]):not(.btn-link) {
+  @include nf-lift();
+
+  // Focus shows an OUTLINE ring (outside the box, never conflicts with the
+  // offset shadow).
+  &:focus { outline: 0; }
+  &:focus-visible {
+    outline: 3px solid var(--nf-volt);
+    outline-offset: 2px;
+  }
+}
+
+.btn {
+  // Bootstrap adds a subtle border-color per-variant; force ink so the
+  // hairline frame is consistent across every color.
+  // (btn-adaptive / -inverse are the mode-flipping solids used by the nav
+  // CTA, auth buttons, etc. — they MUST be in this list or they'd keep
+  // Bootstrap's default "darken on hover" and feel different.)
+  &.btn-primary,
+  &.btn-secondary,
+  &.btn-success,
+  &.btn-info,
+  &.btn-warning,
+  &.btn-danger,
+  &.btn-light,
+  &.btn-dark,
+  &.btn-adaptive,
+  &.btn-adaptive-inverse {
+    border-color: var(--omega-line-strong);
+    --bs-btn-hover-border-color: var(--omega-line-strong);
+    --bs-btn-active-border-color: var(--omega-line-strong);
+  }
+
+  // SOLID buttons: freeze hover/active fill to the resting color so the lift
+  // is pure transform+shadow (no color shift). Outline buttons are excluded —
+  // they keep their fill-on-hover.
+  &.btn-primary,   &.btn-secondary, &.btn-success,
+  &.btn-info,      &.btn-warning,   &.btn-danger,
+  &.btn-light,     &.btn-dark,
+  &.btn-adaptive,  &.btn-adaptive-inverse {
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-hover-color: var(--bs-btn-color);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    --bs-btn-active-color: var(--bs-btn-color);
+  }
+}
+
+// btn-adaptive / -inverse RESTING fill. The global _buttons-adaptive.scss sets
+// these via `.btn-adaptive` (0,1,0), but Bootstrap's own re-emitted
+// `.btn { --bs-btn-bg: transparent }` can tie/beat it on order. Restate the
+// resting fill at `.btn.btn-adaptive` (0,2,0) so it always wins.
+.btn.btn-adaptive {
+  --bs-btn-color: #{$nf-paper};
+  --bs-btn-bg: #{$nf-ink};
+  --bs-btn-border-color: var(--omega-line-strong);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive {
+  --bs-btn-color: #{$nf-paper-dark};
+  --bs-btn-bg: #{$nf-ink-dark};
+}
+.btn.btn-adaptive-inverse {
+  --bs-btn-color: #{$nf-paper-dark};
+  --bs-btn-bg: #{$nf-ink-dark};
+  --bs-btn-border-color: var(--omega-line-strong);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive-inverse {
+  --bs-btn-color: #{$nf-paper};
+  --bs-btn-bg: #{$nf-ink};
+}
+
+// Size variants keep the pill proportions
+.btn-lg {
+  padding: 0.85rem 1.75rem;
+  font-size: 1.05rem;
+}
+
+.btn-sm {
+  padding: 0.35rem 0.9rem;
+  font-size: 0.82rem;
+}
+
+// Outline ("ghost") buttons: flat — transparent fill, ink frame, no shadow,
+// no lift. Hover fills with ink + paper text, true to the editorial ghost.
+// DOUBLED attribute selector (0,2,0) on purpose: page bundles re-emit
+// Bootstrap's .btn / .btn-outline-* rules after the main bundle; the doubled
+// selector wins regardless of load order (the variant's compile-time ink
+// color is invisible on dark paper otherwise).
+[class*="btn-outline-"][class*="btn-outline-"] {
+  box-shadow: none;
+  background: transparent;
+  border-color: var(--omega-line-strong);
+  color: var(--bs-body-color);
+  --bs-btn-hover-bg: var(--omega-ink);
+  --bs-btn-hover-color: var(--omega-ground);
+  --bs-btn-hover-border-color: var(--omega-line-strong);
+  --bs-btn-active-bg: var(--omega-ink);
+  --bs-btn-active-color: var(--omega-ground);
+  --bs-btn-active-border-color: var(--omega-line-strong);
+
+  &:hover {
+    color: var(--omega-ground);
+    background: var(--omega-ink);
+  }
+}
+
+// Link-style button stays flat (no frame/shadow) but bold + underlined
+.btn-link {
+  border: 0;
+  box-shadow: none;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+// NOTE: There are intentionally NO theme-specific accent button classes.
+// Themes must restyle the STANDARD Bootstrap button classes so the same
+// markup works across themes (swap theme.id, done). Need a volt CTA? Use
+// `.btn-warning` ($warning is volt). Vermilion? `.btn-primary`.

package/themes/newsflash/css/components/_cards.scss

@@ -0,0 +1,47 @@
+// Newsflash Theme — Cards
+// Framed paper objects: hairline ink border, editorial radius, serif titles.
+// Cards that ARE links lift gently and grow their framed image on hover.
+
+.card {
+  background: var(--bs-card-bg);
+  @include nf-border();
+  border-radius: var(--bs-border-radius-lg);
+  transition: $nf-transition;
+
+  .card-title {
+    font-family: $nf-font-display;
+    font-optical-sizing: auto;
+    letter-spacing: -0.012em;
+    line-height: 1.22;
+  }
+
+  // Serif headline links read as ink until hovered — then the vermilion
+  // rule grows in underneath (see nf-underline-grow).
+  .card-title a {
+    color: inherit;
+    text-decoration: none;
+    @include nf-underline-grow();
+  }
+}
+
+a.card {
+  color: inherit;
+  text-decoration: none;
+}
+
+// Framed images inside hovered cards/links zoom slowly (cinematic pan feel)
+.card:hover .newsflash-frame img,
+a:hover > .newsflash-frame img {
+  transform: scale(1.04);
+}
+
+// Card footers used as byline rows stay flush with the editorial look
+.card-footer {
+  background: transparent;
+  border-top: 1px solid var(--omega-line);
+}
+
+.card-header {
+  background: transparent;
+  border-bottom: 1px solid var(--omega-line);
+}

package/themes/newsflash/css/components/_editorial.scss

@@ -0,0 +1,173 @@
+// Newsflash Theme — Editorial Primitives
+// The cross-page newsroom vocabulary the KEPT forks speak: kickers, rule
+// heads, framed images, story cards, feed rows. Fork markup, so the classes
+// are theme-prefixed BEM (docs/web/sections.md "Markup convention").
+
+// ============================================
+// Kicker — the uppercase vermilion micro-label above headlines
+// ============================================
+.newsflash-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-family: $font-family-sans-serif;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--omega-accent);
+
+  &::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: 50%;
+    flex: none;
+  }
+}
+
+// ============================================
+// Rule head — uppercase label + full-width ink rule (+ optional link)
+// ============================================
+.newsflash-rule-head {
+  display: flex;
+  align-items: baseline;
+  gap: 1.25rem;
+  margin-bottom: 1.75rem;
+
+  h2, h3, .h2, .h3 {
+    font-family: $font-family-sans-serif;
+    font-size: 1.05rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .newsflash-rule-head__rule {
+    flex: 1;
+    height: var(--nf-border-width);
+    background: var(--omega-line-strong);
+    align-self: center;
+  }
+
+  a {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--omega-accent);
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+}
+
+// ============================================
+// Art frame — the framed editorial image
+// ============================================
+// Hairline ink border + radius; images zoom slowly when the parent
+// link/card is hovered (rule lives in _cards.scss).
+.newsflash-frame {
+  border: var(--nf-border);
+  border-radius: var(--bs-border-radius-lg);
+  overflow: hidden;
+  background: var(--omega-surface-2);
+
+  // omega_post image-tags render as <picture><img>. The wrapper must fill the
+  // frame or the img's percentage height resolves against the auto-height
+  // picture instead — leaving a blank strip inside the frame.
+  picture {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .newsflash-frame img { transition: none; }
+}
+
+// ============================================
+// Story card — a whole-tile link to an article (home, blog index, read-next)
+// ============================================
+// Framed image + kicker + serif headline + byline meta. The tile lifts and
+// its framed image zooms on hover.
+.newsflash-story-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  transition: $nf-transition;
+
+  &:hover {
+    color: inherit;
+    transform: translateY(-5px);
+  }
+
+  &:hover .newsflash-frame img {
+    transform: scale(1.04);
+  }
+
+  h2, h3, .h4, .h5 {
+    font-optical-sizing: auto;
+    letter-spacing: -0.012em;
+    line-height: 1.22;
+  }
+
+  .newsflash-frame {
+    aspect-ratio: 16 / 10;
+  }
+}
+
+// ============================================
+// Feed item — an editorial list row (thumb/number + headline + dek)
+// ============================================
+.newsflash-feed__item {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 1.5rem;
+  align-items: center;
+  padding: 1.6rem 0;
+  border-bottom: 1.5px dashed var(--omega-line);
+  color: inherit;
+  text-decoration: none;
+
+  &:first-child { padding-top: 0; }
+  &:last-child { border-bottom: 0; }
+
+  .newsflash-frame {
+    aspect-ratio: 1 / 1;
+    border-radius: var(--bs-border-radius);
+  }
+}
+
+a.newsflash-feed__item:hover {
+  color: inherit;
+
+  .newsflash-frame img {
+    transform: scale(1.04);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .newsflash-feed__item {
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+
+    .newsflash-frame {
+      aspect-ratio: 16 / 9;
+    }
+  }
+}

package/themes/newsflash/css/components/_forms.scss

@@ -0,0 +1,75 @@
+// Newsflash Theme — Forms
+// Pill inputs framed in ink with a volt focus ring — the newsletter-signup
+// look applied to every form control.
+
+.form-control,
+.form-select {
+  background-color: var(--bs-body-bg);
+  border: var(--nf-border);
+  color: var(--bs-body-color);
+  border-radius: 50rem;
+  font-weight: 500;
+  padding: 0.6rem 1.1rem;
+  transition: $nf-transition;
+
+  &::placeholder {
+    color: var(--bs-secondary-color);
+    opacity: 0.8;
+  }
+
+  &:focus {
+    background-color: var(--bs-body-bg);
+    border-color: var(--omega-line-strong);
+    color: var(--bs-body-color);
+    box-shadow: 0 0 0 3px var(--nf-volt);
+  }
+}
+
+// Multiline fields keep the editorial frame radius (a pill textarea is silly)
+textarea.form-control {
+  border-radius: var(--bs-border-radius);
+}
+
+// Checks + radios: ink frames, vermilion when checked
+.form-check-input {
+  border: var(--nf-border);
+  background-color: var(--bs-body-bg);
+
+  &:checked {
+    background-color: var(--omega-accent);
+    border-color: var(--omega-line-strong);
+  }
+
+  &:focus {
+    border-color: var(--omega-line-strong);
+    box-shadow: 0 0 0 3px var(--nf-volt);
+  }
+}
+
+// Switches keep the pill but pick up the ink frame
+.form-switch .form-check-input {
+  border-radius: 50rem;
+}
+
+// Labels read as compact editorial labels
+.form-label {
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+// Input groups: joined pill — round only the outer corners
+.input-group {
+  > .form-control:not(:last-child),
+  > .form-select:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .btn:last-child {
+    border-top-right-radius: 50rem;
+    border-bottom-right-radius: 50rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none; // joined controls share one frame; no floating shadow
+  }
+}

package/themes/newsflash/css/components/_infinite-scroll.scss

@@ -0,0 +1,102 @@
+// Newsflash Theme — Infinite Scroll
+// Structural marquee used by the shared layouts (trusted-by logo strip,
+// testimonial scroll). Mostly layout/animation (theme-agnostic); cosmetic
+// bits are tuned to the editorial look (framed cards, paper fade edges).
+// NOTE: this is structural behavior the inherited Classy layouts depend on —
+// see docs/web/sections.md (the base theme owns shared structural markup).
+
+.infinite-scroll-wrapper {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  overflow: hidden;
+
+  &.infinite-scroll-fade-edges {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100px;
+      z-index: 10;
+      pointer-events: none;
+    }
+    &::before { left: 0;  background: linear-gradient(to right, var(--bs-body-bg), transparent); }
+    &::after  { right: 0; background: linear-gradient(to left,  var(--bs-body-bg), transparent); }
+  }
+}
+
+.infinite-scroll-track {
+  display: flex;
+  width: fit-content;
+  animation: infinite-scroll var(--infinite-scroll-duration, 30s) linear infinite;
+
+  &:hover { animation-play-state: paused; }
+
+  &.gap-sm { gap: 1rem; }
+  &.gap-md { gap: 1.5rem; }
+  &.gap-lg { gap: 2rem; }
+}
+
+.infinite-scroll-item { flex-shrink: 0; }
+
+@keyframes infinite-scroll {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(var(--infinite-scroll-distance, -50%)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .infinite-scroll-track { animation: none; }
+  .infinite-scroll-wrapper { overflow-x: auto; }
+}
+
+// Logo items — quiet ink-tinted marks that wake on hover
+.infinite-scroll-item--logo {
+  padding: 0 3rem;
+  display: flex;
+  align-items: center;
+  height: 60px;
+
+  img, svg {
+    height: 40px;
+    width: auto;
+    max-width: 150px;
+    opacity: 0.65;
+    transition: $nf-transition;
+  }
+
+  &:hover img,
+  &:hover svg {
+    opacity: 1;
+  }
+}
+
+// Card items (testimonials) — framed paper, pop on hover
+.infinite-scroll-item--card {
+  width: 320px;
+  padding: 0.5rem 0.5rem 1.5rem 0; // room for the pop shadow
+
+  .card {
+    height: 100%;
+
+    &:hover {
+      @include nf-shadow-pop();
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .infinite-scroll-wrapper.infinite-scroll-fade-edges {
+    &::before,
+    &::after { width: 50px; }
+  }
+
+  .infinite-scroll-item--logo {
+    padding: 0 2rem;
+    height: 50px;
+    img, svg { height: 30px; }
+  }
+
+  .infinite-scroll-item--card { width: 280px; }
+}