@omega.js/extension 0.1.0

package/dist/assets/themes/classy/_theme.js

@@ -0,0 +1,31 @@
+// Import the theme entry point
+// __main_assets__ is a build alias that resolves to the framework's core assets
+import bootstrap from '__main_assets__/themes/bootstrap/js/index.umd.js';
+import { ready as domReady } from '@omega.js/client/modules/dom.js';
+
+// Make Bootstrap available globally
+window.bootstrap = bootstrap;
+
+// Log that we've MADE IT
+/* @dev-only:start */
+{
+  console.log('Classy theme loaded successfully (assets/themes/classy/_theme.js)');
+}
+/* @dev-only:end */
+
+// Nav glassiness, marquees, reveals, count-ups, and rotators all ride the
+// shared motion engine (core/js/core/motion.js) — no theme JS needed.
+
+// Import tooltip initialization (the shared core-layer helper — #99)
+import initializeTooltips from '__main_assets__/js/libs/initialize-tooltips.js';
+// Import hero demo form initialization
+import initHeroDemoForm from './js/hero-demo-form.js';
+
+// Initialize theme components when DOM is ready
+domReady().then(() => {
+  // Generic Bootstrap initializations
+  initializeTooltips();
+
+  // Initialize hero demo form if present
+  initHeroDemoForm();
+});

package/dist/assets/themes/classy/_theme.scss

@@ -0,0 +1,57 @@
+// Classy v2 — SCSS entry point.
+// Order matters: config (loads Bootstrap with our tokens) → root bridge
+// (Bootstrap CSS vars ← --omega-* tokens, both modes) → base → components →
+// layout → marketing → pages → universal Bootstrap overrides (shared across
+// all themes; after the theme so @extend works) → the no-raise opt-out.
+
+// Forward theme configuration (allows consuming project to override)
+@forward 'config';
+@use 'config' as *;
+
+// Vendored webfonts (Inter + Newsreader — D5)
+@import 'css/base/fonts';
+
+// Token bridge + root defaults
+@import 'css/base/root';
+
+// Base styles
+@import 'css/base/typography';
+@import 'css/base/utilities';
+
+// Components
+@import 'css/components/buttons';
+@import 'css/components/cards';
+@import 'css/components/forms';
+@import 'css/components/badges';
+@import 'css/components/receipt';
+@import 'css/components/alerts';
+@import 'css/components/dropdowns';
+
+// Layout
+@import 'css/layout/general';
+@import 'css/layout/nav';
+@import 'css/layout/footer';
+@import 'css/layout/shell';
+
+// App panels (App DNA — dashboard/admin content inside the shell)
+@import 'css/app/panels';
+
+// Marketing surfaces
+@import 'css/marketing/hero';
+@import 'css/marketing/bento';
+@import 'css/marketing/sections';
+@import 'css/marketing/downloads';
+@import 'css/marketing/content';
+
+// Pages (main-bundle partials; per-page THEME css lives at css/pages/<page>/index.scss
+// and loads LAST on its page — that's the slot that outranks core page css)
+@import 'css/pages/auth';
+
+// Universal Bootstrap overrides (shared across all omega themes)
+// Must come AFTER Bootstrap is loaded via config to use @extend
+@import '../bootstrap/overrides';
+
+// The no-raise opt-out (#686). LAST on purpose: it cancels the hover lifts
+// declared above it — core's motion idiom and the floor partials other themes
+// import — so it has to outlive every one of them.
+@import 'css/base/no-raise';

package/dist/assets/themes/classy/css/app/_panels.scss

@@ -0,0 +1,183 @@
+// Classy v2 app panels — the App-DNA surfaces inside .omega-shell
+// (dashboard/admin content): the merged stat card, panel heads, quiet
+// activity rows. Everything paints through tokens.
+
+// ── Merged stat card — ONE card, hairline column dividers ───────────────────
+.omega-statgrid {
+  // The cell floor: below it a column drops out of the row.
+  --omega-statgrid-cell: 10rem;
+
+  display: grid;
+  // Container-driven, never viewport-driven: `--omega-statgrid-cols` is the
+  // CEILING (100% / cols is the widest a cell asks for, so at most that many
+  // fit), the cell floor is the collapse point, and auto-fit picks the count
+  // from the grid's OWN width — so a statgrid nested in a half-width card
+  // reflows instead of overflowing.
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--omega-statgrid-cell), calc(100% / var(--omega-statgrid-cols, 4))), 1fr)
+  );
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  overflow: hidden;
+
+  .omega-statgrid__cell {
+    padding: 1.125rem 1.25rem 1.25rem;
+    // Hairlines that never count columns: each cell paints its start/top rule
+    // 1px OUTSIDE its box, and the card's overflow clip eats the ones on the
+    // first column and first row whatever count the reflow lands on.
+    box-shadow:
+      -1px 0 0 var(--omega-line),
+      0 -1px 0 var(--omega-line);
+  }
+
+  .omega-statgrid__label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.625rem;
+
+    svg {
+      color: var(--omega-ink-faint);
+    }
+  }
+
+  .omega-statgrid__value {
+    font-size: 1.5rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    color: var(--omega-ink);
+    margin-bottom: 0.5rem;
+  }
+}
+
+// ── Data table — the App-DNA table voice (admin directories, activity) ──────
+// Composes WITH Bootstrap's .table: kills its body-bg paint so rows sit on
+// the card's surface, micro-caps header on surface-2, hairline rows, quiet
+// hover. Use as `table omega-table` (drop table-hover — hover lives here).
+.omega-table {
+  --bs-table-bg: transparent;
+  --bs-table-color: var(--omega-ink);
+  --bs-table-border-color: var(--omega-line);
+  --bs-table-hover-bg: var(--omega-surface-2);
+  --bs-table-hover-color: var(--omega-ink);
+
+  margin-bottom: 0;
+
+  thead th {
+    padding: 0.6875rem 1rem;
+    font-size: 0.6875rem;
+    font-weight: 650;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    color: var(--omega-ink-faint);
+    background: var(--omega-surface-2);
+    border-bottom: 1px solid var(--omega-line);
+    white-space: nowrap;
+  }
+
+  tbody td {
+    padding: 0.8125rem 1rem;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--omega-line);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  tbody tr {
+    transition: background var(--omega-speed) var(--omega-ease);
+
+    &:hover td {
+      background: var(--omega-surface-2);
+    }
+  }
+}
+
+// ── Inline count — attention rows, list tallies ─────────────────────────────
+.omega-count {
+  flex-shrink: 0;
+  font-size: 1.125rem;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  color: var(--omega-ink);
+
+  &--warn {
+    color: var(--omega-warn);
+  }
+}
+
+// ── Ghost icon button — quiet ⋮ / inline actions ────────────────────────────
+.omega-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  color: var(--omega-ink-muted);
+  transition: background var(--omega-speed) var(--omega-ease), color var(--omega-speed) var(--omega-ease);
+
+  &:hover,
+  &:focus-visible,
+  &[aria-expanded='true'] {
+    background: var(--omega-surface-2);
+    color: var(--omega-ink);
+  }
+}
+
+// ── Panel head — the 14/650 card title voice ────────────────────────────────
+.omega-panel-title {
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--omega-ink);
+}
+
+// ── Activity rows — hairline-divided, neutral icon chips ────────────────────
+.omega-activity {
+  .omega-activity__row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.875rem;
+    padding: 0.875rem 0;
+    border-top: 1px solid var(--omega-line);
+
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  .omega-activity__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .omega-activity__title {
+    margin-bottom: 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+  }
+
+  .omega-activity__desc {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--omega-ink-muted);
+  }
+
+  .omega-activity__time {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--omega-ink-faint);
+  }
+}

package/dist/assets/themes/classy/css/base/_fonts.scss

@@ -0,0 +1,79 @@
+// Vendored webfonts (D5): Inter (UI grotesk) + Newsreader (marketing serif),
+// both OFL — safe to redistribute inside the published theme. Variable fonts,
+// latin + latin-ext subsets; the files ship in the theme's fonts/ dir and the
+// asset pipeline copies every layer's fonts/ to /assets/fonts (first-wins),
+// so a consumer theme can override the files OR just re-point the
+// --omega-font-* tokens (see _root.scss) at different families.
+
+/* inter italic latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/inter-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* inter italic latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/inter-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* inter normal latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* inter normal latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* newsreader italic latin-ext */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url(/assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* newsreader italic latin */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* newsreader normal latin-ext */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url(/assets/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* newsreader normal latin */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url(/assets/fonts/newsreader-normal-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/assets/themes/classy/css/base/_no-raise.scss

@@ -0,0 +1,49 @@
+// Classy never RAISES on hover (Ian 2026-08-29, #686). Nothing travels upward
+// under the pointer — the highlight, the ring, the shadow and the press all
+// stay, and so does the hero's tilt; only the lift goes.
+//
+// Every rule below is shared css another theme still lifts with, which is why
+// classy opts OUT here instead of the rule losing its raise at the source:
+// core's motion library serves every skin, and newsflash/neobrutalism import
+// classy's floor partials wholesale. Raises classy owns alone are gone from
+// their own files.
+//
+// _theme.scss loads this LAST, so equal specificity is enough for everything
+// the theme emits above it.
+
+// The core hover idiom (core/css/motion/_index.scss), which main.scss lands
+// ahead of every theme.
+.omega-hover-lift,
+.omega-hover-raise,
+.omega-interactive--lift {
+  &:hover,
+  &:focus-visible {
+    transform: none;
+  }
+}
+
+// The floor partials (css/marketing/_content.scss, css/marketing/_hero.scss).
+.omega-person:hover {
+  transform: none;
+}
+
+// The frame still tips toward the pointer — the tilt mirrors _hero.scss, only
+// its 3px of travel is dropped. A media query adds no specificity, so the
+// re-declaration carries _hero.scss's park with it or the frame would tip
+// under reduced motion.
+.omega-hero__frame:hover .omega-hero__frame-inner {
+  transform: rotateX(1.1deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .omega-hero__frame:hover .omega-hero__frame-inner {
+    transform: none;
+  }
+}
+
+// core/css/core/_animations.scss lands AFTER the theme (main.scss loads core's
+// utilities last), so the legacy raise utility cannot be cancelled at equal
+// specificity: the `html` prefix is one step stronger wherever it lands.
+html .hover-up:hover {
+  transform: none;
+}

package/dist/assets/themes/classy/css/base/_root.scss

@@ -0,0 +1,113 @@
+// Classy v2 root bridge — Bootstrap's CSS variables re-pointed at the shared
+// --omega-* token contract, so light/dark switching, brand.color ramps, and
+// consumer token overrides (main.scss) restyle every Bootstrap component with
+// ZERO recompilation. The `:root[data-bs-theme]` arm outranks Bootstrap's own
+// compiled [data-bs-theme='dark'] block, so the bridge wins in both modes.
+
+// Classy's vendored faces take over the font tokens (scheme-agnostic — one
+// :root stamp). The system stacks stay as fallbacks, and everything below
+// (Bootstrap bridge, type presets, .omega-display) reads THESE tokens, so a
+// consumer re-points fonts by redefining two custom properties.
+:root {
+  --omega-font-ui: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
+  --omega-font-serif: 'Newsreader', ui-serif, georgia, 'Times New Roman', times, serif;
+}
+
+:root,
+:root[data-bs-theme] {
+  // Surfaces + text
+  --bs-body-bg: var(--omega-ground);
+  --bs-body-color: var(--omega-ink);
+  --bs-emphasis-color: var(--omega-ink);
+  --bs-secondary-color: var(--omega-ink-muted);
+  --bs-tertiary-color: var(--omega-ink-faint);
+  --bs-secondary-bg: var(--omega-surface-2);
+  --bs-tertiary-bg: var(--omega-surface);
+  --bs-heading-color: var(--omega-ink);
+
+  // Lines
+  --bs-border-color: var(--omega-line);
+  --bs-border-color-translucent: var(--omega-line);
+
+  // Status (#13): Bootstrap compiles ONE hex per level at build time, so
+  // `bg-success` kept the light green in dark mode while every token-painted
+  // glyph followed --omega-ok. Pointing both halves at the token gives the
+  // whole site one green (one amber, one red) that flips with the scheme.
+  --bs-success: var(--omega-ok);
+  --bs-success-rgb: var(--omega-ok-rgb);
+  --bs-warning: var(--omega-warn);
+  --bs-warning-rgb: var(--omega-warn-rgb);
+  --bs-danger: var(--omega-danger);
+  --bs-danger-rgb: var(--omega-danger-rgb);
+
+  // Type
+  --bs-body-font-family: var(--omega-font-ui);
+  --bs-font-monospace: var(--omega-font-mono);
+
+  // Focus
+  --bs-focus-ring-color: var(--omega-accent-ring);
+
+  // Code
+  --bs-code-color: var(--omega-ink);
+}
+
+// RGB triplets (Bootstrap's translucency utilities need raw channels, which
+// var() can't provide) — same three-stamp plumbing as the token sheet.
+@mixin light-rgb {
+  --bs-body-bg-rgb: 245, 245, 244;
+  --bs-body-color-rgb: 26, 26, 25;
+  --bs-emphasis-color-rgb: 26, 26, 25;
+  --bs-secondary-bg-rgb: 236, 236, 235;
+  --bs-tertiary-bg-rgb: 255, 255, 255;
+}
+
+@mixin dark-rgb {
+  --bs-body-bg-rgb: 13, 13, 14;
+  --bs-body-color-rgb: 235, 235, 234;
+  --bs-emphasis-color-rgb: 235, 235, 234;
+  --bs-secondary-bg-rgb: 29, 29, 31;
+  --bs-tertiary-bg-rgb: 21, 21, 22;
+}
+
+:root {
+  @include light-rgb;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-rgb;
+  }
+}
+
+:root[data-bs-theme='dark'] {
+  @include dark-rgb;
+}
+
+:root[data-bs-theme='light'] {
+  @include light-rgb;
+}
+
+// Component surfaces ride the tokens too.
+.card,
+.modal-content,
+.offcanvas,
+.toast,
+.popover {
+  --bs-card-bg: var(--omega-surface);
+  --bs-card-border-color: var(--omega-line);
+  --bs-modal-bg: var(--omega-surface);
+  --bs-offcanvas-bg: var(--omega-surface);
+  --bs-toast-bg: var(--omega-surface);
+  --bs-popover-bg: var(--omega-surface);
+}
+
+// Selection + smoothing: the whole surface reads crisp.
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
+}
+
+::selection {
+  background: var(--omega-accent-subtle);
+}

package/dist/assets/themes/classy/css/base/_typography.scss

@@ -0,0 +1,154 @@
+// Classy v2 typography — Manus-calibrated scale on the split type system:
+// app/UI text reads --omega-font-ui, app display reads --omega-font-display,
+// marketing display reads --omega-font-marketing (serif by default; the
+// data-omega-type presets re-pair them).
+
+body {
+  font-family: var(--omega-font-ui);
+  letter-spacing: -0.006em;
+  line-height: 1.55;
+}
+
+// ============================================
+// Headings — app display face, tight metrics
+// ============================================
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  font-family: $headings-font-family;
+  letter-spacing: -0.02em;
+}
+
+// ============================================
+// Marketing display — the serif voice
+// ============================================
+.omega-display {
+  font-family: var(--omega-font-marketing);
+  font-weight: 560;
+  letter-spacing: -0.022em;
+  line-height: 1.04;
+}
+
+.omega-display--hero {
+  font-size: clamp(2.75rem, 6.2vw, 4.625rem);
+}
+
+.omega-display--section {
+  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
+  line-height: 1.08;
+}
+
+.omega-display--page {
+  font-size: clamp(2.25rem, 4.6vw, 3.375rem);
+  line-height: 1.06;
+}
+
+.omega-display em,
+.omega-display i {
+  font-style: italic;
+}
+
+// Serif voice on arbitrary elements (quotes, stats numbers)
+.text-marketing {
+  font-family: var(--omega-font-marketing);
+}
+
+// ============================================
+// Micro labels — the uppercase 11px voice
+// ============================================
+.omega-micro {
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--omega-ink-faint);
+}
+
+// ============================================
+// Lead / muted body
+// ============================================
+.lead {
+  font-size: 1.09375rem;
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--omega-ink-muted);
+}
+
+.text-muted {
+  color: var(--omega-ink-muted) !important;
+}
+
+// The faintest voice — footnotes, reassurance lines, fine print
+.omega-quiet {
+  color: var(--omega-ink-faint);
+}
+
+// ============================================
+// Links — accent-driven (brand.color aware)
+// ============================================
+a {
+  color: var(--omega-accent);
+
+  &:hover {
+    color: var(--omega-accent-hover);
+  }
+}
+
+// ============================================
+// Code + kbd
+// ============================================
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--omega-font-mono);
+}
+
+code {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.85em;
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-xs);
+}
+
+pre {
+  padding: 1rem 1.25rem;
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  overflow-x: auto;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+kbd {
+  padding: 0.1rem 0.4rem;
+  font-size: 0.75em;
+  font-weight: 600;
+  color: var(--omega-ink-muted);
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--omega-radius-xs);
+}
+
+// ============================================
+// Blockquotes — the serif quote voice
+// ============================================
+blockquote {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.25rem;
+  line-height: 1.45;
+  padding-inline-start: 1.25rem;
+  border-inline-start: 2px solid var(--omega-line-strong);
+}