@omega.js/web 0.1.0

package/themes/newsflash/_theme.scss

@@ -0,0 +1,70 @@
+// Newsflash Theme — SCSS entry point
+// Forwards config (so consuming projects can override vars), loads Bootstrap
+// via config, then layers the editorial system on top. Import order matters:
+// config → mixins → root vars → base → layout → components → bootstrap overrides.
+
+// Forward theme configuration (allows consuming project to override)
+@forward 'config';
+@use 'config' as *;
+
+// Mixins must be available to every partial below.
+// @import (not @use) so the mixins land in the global scope the @imports share.
+@import 'css/base/mixins';
+
+// Vendored webfonts (Fraunces + Schibsted Grotesk — D5)
+@import 'css/base/fonts';
+
+// Token re-value + Bootstrap bridge (--omega-* contract, light/dark)
+@import 'css/base/root';
+
+// ── The classy FLOOR (cp190, widened for #177 phase 2) ──────────────────────
+// Fall-through surfaces render BASE markup (omega-* classes), and the
+// structural css for that vocabulary lives in classy's partials, which are
+// deliberately TOKEN-PURE, so a full sibling theme imports them directly
+// and they paint through THIS theme's token re-values (paper/ink/frames),
+// no classy Bootstrap involved. Phase 2 widened the floor beyond app/auth to
+// the marketing vocabulary (omega-cta, omega-stats, omega-price-card,
+// omega-person, omega-rowlist, omega-duo, and the rest) because newsflash
+// now renders the base 404/about/contact/pricing/team/taxonomy surfaces
+// unforked.
+// Imported EARLY on purpose: the floor sits UNDER the theme's own voice, so
+// later newsflash rules win every collision (e.g. classy's .badge base).
+// NOT imported: classy's typography (its h1-h6 element rules would beat the
+// Fraunces headings this theme sets through Bootstrap vars), layout/general
+// (fixed-nav clearance rhythm; the sticky masthead needs none), and
+// layout/nav (fixed glassy bar; the masthead re-skins .omega-nav below).
+// Partial/consumer themes take the whole-chain hatch instead
+// (`@forward 'omega:theme'` — see docs/shared/theming.md).
+@import '../classy/css/layout/shell';
+@import '../classy/css/layout/footer';
+@import '../classy/css/app/panels';
+@import '../classy/css/pages/auth';
+@import '../classy/css/components/receipt';
+@import '../classy/css/components/badges';
+@import '../classy/css/base/utilities';
+@import '../classy/css/marketing/hero';
+@import '../classy/css/marketing/content';
+@import '../classy/css/marketing/sections';
+
+// Base styles
+@import 'css/base/typography';
+@import 'css/base/utilities';
+
+// Layout styles
+@import 'css/layout/general';
+@import 'css/layout/navigation';
+
+// Component styles
+@import 'css/components/buttons';
+@import 'css/components/cards';
+@import 'css/components/forms';
+@import 'css/components/badges';
+@import 'css/components/ticker';
+@import 'css/components/editorial';
+@import 'css/components/panels';
+@import 'css/components/infinite-scroll';
+@import 'css/components/billing-toggle';
+
+// Universal Bootstrap overrides (shared across all omega themes).
+// Must come AFTER Bootstrap is loaded via config to use @extend.
+@import '../bootstrap/overrides';

package/themes/newsflash/css/base/_fonts.scss

@@ -0,0 +1,80 @@
+// Vendored webfonts (D5): Fraunces (optical-sized display serif) + Schibsted
+// Grotesk (UI grotesk), 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. Replaces the cp71-era Google Fonts CDN link in base.html.
+
+/* fraunces italic latin-ext */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/fraunces-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;
+}
+/* fraunces italic latin */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/fraunces-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;
+}
+/* fraunces normal latin-ext */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/fraunces-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;
+}
+/* fraunces normal latin */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(/assets/fonts/fraunces-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;
+}
+/* schibsted grotesk italic latin-ext */
+@font-face {
+  font-family: 'Schibsted Grotesk';
+  font-style: italic;
+  font-weight: 400 900;
+  font-display: swap;
+  src: url(/assets/fonts/schibsted-grotesk-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;
+}
+/* schibsted grotesk italic latin */
+@font-face {
+  font-family: 'Schibsted Grotesk';
+  font-style: italic;
+  font-weight: 400 900;
+  font-display: swap;
+  src: url(/assets/fonts/schibsted-grotesk-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;
+}
+/* schibsted grotesk normal latin-ext */
+@font-face {
+  font-family: 'Schibsted Grotesk';
+  font-style: normal;
+  font-weight: 400 900;
+  font-display: swap;
+  src: url(/assets/fonts/schibsted-grotesk-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;
+}
+/* schibsted grotesk normal latin */
+@font-face {
+  font-family: 'Schibsted Grotesk';
+  font-style: normal;
+  font-weight: 400 900;
+  font-display: swap;
+  src: url(/assets/fonts/schibsted-grotesk-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/themes/newsflash/css/base/_mixins.scss

@@ -0,0 +1,51 @@
+// Newsflash Theme — Mixins
+// The shared building blocks of the editorial look. Components @include these
+// so the frame/shadow/lift system lives in ONE place (SSOT) rather than being
+// copy-pasted across buttons, cards, inputs, etc.
+
+// Hairline frame in the current ink color.
+@mixin nf-border($width: var(--nf-border-width)) {
+  border: $width solid var(--omega-line-strong);
+}
+
+// Small hard offset shadow (no blur) — the resting state of controls.
+@mixin nf-shadow-hard() {
+  box-shadow: var(--nf-shadow-hard);
+}
+
+// Soft "pop" shadow — depth for frames and panels (hero art, signup rail).
+// Rides the shared big-shadow slot, which the root re-values editorially.
+@mixin nf-shadow-pop() {
+  box-shadow: var(--omega-shadow-2);
+}
+
+// The signature interaction: the element rests on a small hard shadow, then
+// LIFTS up-left on hover (shadow grows beneath it) and presses flush on
+// active. Pure transform + shadow — no color shift.
+@mixin nf-lift() {
+  transition: $nf-transition;
+
+  &:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--nf-shadow-hard-hover);
+  }
+
+  &:active {
+    transform: translate(0, 0);
+    box-shadow: 1px 1px 0 var(--omega-ink);
+  }
+}
+
+// Headline hover underline — an accent rule that grows from the left under
+// the text (the editorial "this is a link" affordance on serif headlines).
+@mixin nf-underline-grow($color: var(--omega-accent), $thickness: 2px) {
+  background-image: linear-gradient($color, $color);
+  background-repeat: no-repeat;
+  background-size: 0% $thickness;
+  background-position: 0 96%;
+  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+
+  &:hover {
+    background-size: 100% $thickness;
+  }
+}

package/themes/newsflash/css/base/_root.scss

@@ -0,0 +1,257 @@
+// Newsflash root — the editorial skin re-VALUED onto the shared --omega-*
+// token contract (core/css/tokens/_index.scss). The core sheet ships classy
+// values as placeholders; this file restamps the same NAMES with paper/ink,
+// so core chrome (shell, motion, fall-through app surfaces) and newsflash
+// components all paint editorial without a parallel token economy. Genuinely
+// newsflash-only extras (volt, ink panels, hard-offset shadows, grain) keep
+// the --nf-* namespace.
+//
+// Plumbing mirrors the core sheet exactly (three stamps: OS preference via
+// media query, appearance.js's data-bs-theme attribute beats it both ways),
+// and the Bootstrap bridge mirrors classy's _root.scss: the
+// `:root[data-bs-theme]` arm (0,1,1) outranks Bootstrap's own compiled
+// [data-bs-theme='dark'] block (0,1,0) regardless of load order — which is
+// what the cp71-era doubled-selector hack did, retired here.
+//
+// brand.color: when the consumer sets it, head.html emits inline accent
+// ramps AFTER the css bundles — those win over the vermilion placeholders
+// stamped here, exactly as the contract intends.
+
+// Vendored faces take over the font tokens (scheme-agnostic — one :root
+// stamp). Everything below (Bootstrap bridge, typography, components) reads
+// THESE tokens, so a consumer re-points fonts by redefining two properties.
+// --omega-font-marketing already defaults to the serif slot (the "mix"
+// pairing) — exactly newsflash's voice; app display stays grotesk.
+:root {
+  --omega-font-ui: 'Schibsted Grotesk', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
+  --omega-font-serif: 'Fraunces', ui-serif, georgia, 'Times New Roman', times, serif;
+}
+
+// Dark-mode accent derives from the COMPILE-TIME $primary so a consumer's
+// Sass brand override survives dark mode (the stock vermilion keeps its
+// hand-tuned brightening; any other color gets a generic white-mix lift).
+// brand.color consumers get the real per-mode ramp from head.html instead.
+$nf-primary-dark-mode: if($primary == $nf-vermilion, $nf-vermilion-dark-mode, mix(white, $primary, 15%));
+
+// ============================================
+// The editorial token sheet (light / dark)
+// ============================================
+// Values compute from the _config.scss knobs so a consumer's Sass overrides
+// flow into the runtime tokens automatically.
+@mixin nf-light-tokens {
+  --omega-ground: #{$nf-paper};
+  --omega-surface: #{$nf-paper}; // cards sit ON the paper — ink frames, not tint, mark the edge
+  --omega-surface-2: #{$nf-paper-2};
+  --omega-ink: #{$nf-ink};
+  --omega-ink-muted: #{$nf-ink-soft};
+  --omega-ink-faint: #{mix($nf-ink-soft, $nf-paper, 65%)};
+  --omega-line: #{rgba($nf-ink, 0.16)}; // soft in-content dividers
+  --omega-line-strong: #{$nf-ink}; // FULL ink — hairline frames are the identity
+  --omega-accent: #{$nf-vermilion}; // placeholder — brand.color wins at build
+  --omega-accent-hover: #{mix(black, $nf-vermilion, 10%)};
+  --omega-accent-active: #{mix(black, $nf-vermilion, 16%)};
+  --omega-accent-subtle: #{rgba($nf-vermilion, 0.12)};
+  --omega-accent-ink: #{$nf-ink}; // ink-on-vermilion (the ramp's WCAG pick too)
+  --omega-accent-ring: #{rgba($nf-vermilion, 0.35)};
+  --omega-ok: #2e7d4f;
+  --omega-ok-rgb: 46, 125, 79;
+  --omega-warn: #b45309; // true status amber — volt is a highlight, never a warning
+  --omega-warn-rgb: 180, 83, 9;
+  --omega-danger: #c81e1e;
+  --omega-danger-rgb: 200, 30, 30;
+  --omega-chart-2: #0f8fa9; // the CVD-validated teal (contract value)
+  --omega-shadow-1: 0 1px 2px rgb(23 19 16 / 8%);
+  --omega-shadow-2: #{$nf-shadow-pop};
+
+  // Editorial extras that flip with the scheme
+  --nf-blue: #{$nf-blue};
+  --nf-panel-bg: #{$nf-panel-bg};
+  --nf-panel-color: #{$nf-panel-color};
+  --nf-paper-translucent: #{rgba($nf-paper, 0.88)};
+  --nf-grain-opacity: 0.05;
+}
+
+@mixin nf-dark-tokens {
+  --omega-ground: #{$nf-paper-dark};
+  --omega-surface: #{$nf-paper-2-dark}; // cards lift a step off the dark paper
+  --omega-surface-2: #{$nf-paper-2-dark};
+  --omega-ink: #{$nf-ink-dark};
+  --omega-ink-muted: #{$nf-ink-soft-dark};
+  --omega-ink-faint: #{mix($nf-ink-soft-dark, $nf-paper-dark, 65%)};
+  --omega-line: #{rgba($nf-ink-dark, 0.18)};
+  --omega-line-strong: #{$nf-ink-dark}; // cream frames on dark paper
+  --omega-accent: #{$nf-primary-dark-mode};
+  --omega-accent-hover: #{mix(black, $nf-primary-dark-mode, 10%)};
+  --omega-accent-active: #{mix(black, $nf-primary-dark-mode, 16%)};
+  --omega-accent-subtle: #{rgba($nf-primary-dark-mode, 0.16)};
+  --omega-accent-ink: #{$nf-ink}; // still ink — the brightened accent stays a light fill
+  --omega-accent-ring: #{rgba($nf-primary-dark-mode, 0.35)};
+  --omega-ok: #3fbf83;
+  --omega-ok-rgb: 63, 191, 131;
+  --omega-warn: #f5a524;
+  --omega-warn-rgb: 245, 165, 36;
+  --omega-danger: #f0574d;
+  --omega-danger-rgb: 240, 87, 77;
+  --omega-chart-2: #1f9fb4;
+  --omega-shadow-1: 0 1px 2px rgb(0 0 0 / 35%);
+  --omega-shadow-2: 0 18px 40px -18px rgb(0 0 0 / 80%); // pop barely reads on dark paper — deeper, tighter
+
+  --nf-blue: #{$nf-blue-dark-mode};
+  --nf-panel-bg: #{$nf-panel-bg-dark};
+  --nf-panel-color: #{$nf-panel-color-dark};
+  --nf-paper-translucent: #{rgba($nf-paper-dark, 0.88)};
+  --nf-grain-opacity: 0.07;
+}
+
+:root {
+  @include nf-light-tokens;
+
+  // Shape + motion (scheme-agnostic re-values of the core slots)
+  --omega-radius-xs: 8px;
+  --omega-radius-s: 10px;
+  --omega-radius-m: #{$nf-radius-sm};
+  --omega-radius-l: #{$nf-radius};
+  --omega-radius-xl: 24px;
+  --omega-speed: 200ms;
+  --omega-speed-slow: 600ms;
+  --omega-ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+  // Editorial constants (deliberately identical in both modes)
+  --nf-volt: #{$nf-volt};
+  --nf-volt-ink: #{$nf-volt-ink};
+  --nf-border-width: #{$nf-border-width};
+
+  // Frame + hard-shadow recipes — ink-colored, so they auto-flip to cream
+  // in dark mode through the tokens they reference.
+  --nf-border: var(--nf-border-width) solid var(--omega-line-strong);
+  --nf-shadow-hard: #{$nf-shadow-offset} #{$nf-shadow-offset} 0 var(--omega-ink);
+  --nf-shadow-hard-hover: #{$nf-shadow-offset-hover} #{$nf-shadow-offset-hover} 0 var(--omega-ink);
+}
+
+// OS preference carries when no explicit choice is stamped…
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include nf-dark-tokens;
+  }
+}
+
+// …and the appearance.js stamp beats the OS in BOTH directions.
+:root[data-bs-theme='dark'] {
+  @include nf-dark-tokens;
+}
+
+:root[data-bs-theme='light'] {
+  @include nf-light-tokens;
+}
+
+// ============================================
+// Bootstrap bridge
+// ============================================
+// Bootstrap's CSS variables re-pointed at the tokens (classy's pattern), so
+// mode switching, brand ramps, and consumer token overrides restyle every
+// Bootstrap component with ZERO recompilation.
+: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-2); // wells are paper-2 — newsflash has no white tier
+  --bs-heading-color: var(--omega-ink);
+
+  // Lines — soft dividers by default; frames opt into full ink via --nf-border
+  --bs-border-color: var(--omega-line);
+  --bs-border-color-translucent: var(--omega-line);
+
+  // Status (#13) — one green/amber/red across utilities and token paint alike
+  --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);
+
+  // Accent + links track the ramp (replaces the cp71 dark-block primary hack)
+  --bs-primary: var(--omega-accent);
+  --bs-link-color: var(--omega-accent);
+  --bs-link-hover-color: var(--omega-accent-hover);
+
+  // 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 paint from
+// rgba(var(--bs-*-rgb), opacity), which var() can't feed) — computed from
+// the Sass knobs, same three-stamp plumbing as the sheet.
+@mixin nf-light-rgb {
+  --bs-body-bg-rgb: #{red($nf-paper)}, #{green($nf-paper)}, #{blue($nf-paper)};
+  --bs-body-color-rgb: #{red($nf-ink)}, #{green($nf-ink)}, #{blue($nf-ink)};
+  --bs-emphasis-color-rgb: #{red($nf-ink)}, #{green($nf-ink)}, #{blue($nf-ink)};
+  --bs-secondary-color-rgb: #{red($nf-ink-soft)}, #{green($nf-ink-soft)}, #{blue($nf-ink-soft)};
+  --bs-secondary-bg-rgb: #{red($nf-paper-2)}, #{green($nf-paper-2)}, #{blue($nf-paper-2)};
+  --bs-tertiary-bg-rgb: #{red($nf-paper-2)}, #{green($nf-paper-2)}, #{blue($nf-paper-2)};
+  --bs-primary-rgb: #{red($nf-vermilion)}, #{green($nf-vermilion)}, #{blue($nf-vermilion)};
+  --bs-link-color-rgb: #{red($nf-vermilion)}, #{green($nf-vermilion)}, #{blue($nf-vermilion)};
+}
+
+@mixin nf-dark-rgb {
+  --bs-body-bg-rgb: #{red($nf-paper-dark)}, #{green($nf-paper-dark)}, #{blue($nf-paper-dark)};
+  --bs-body-color-rgb: #{red($nf-ink-dark)}, #{green($nf-ink-dark)}, #{blue($nf-ink-dark)};
+  --bs-emphasis-color-rgb: #{red($nf-ink-dark)}, #{green($nf-ink-dark)}, #{blue($nf-ink-dark)};
+  --bs-secondary-color-rgb: #{red($nf-ink-soft-dark)}, #{green($nf-ink-soft-dark)}, #{blue($nf-ink-soft-dark)};
+  --bs-secondary-bg-rgb: #{red($nf-paper-2-dark)}, #{green($nf-paper-2-dark)}, #{blue($nf-paper-2-dark)};
+  --bs-tertiary-bg-rgb: #{red($nf-paper-2-dark)}, #{green($nf-paper-2-dark)}, #{blue($nf-paper-2-dark)};
+  --bs-primary-rgb: #{red($nf-primary-dark-mode)}, #{green($nf-primary-dark-mode)}, #{blue($nf-primary-dark-mode)};
+  --bs-link-color-rgb: #{red($nf-primary-dark-mode)}, #{green($nf-primary-dark-mode)}, #{blue($nf-primary-dark-mode)};
+}
+
+:root {
+  @include nf-light-rgb;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include nf-dark-rgb;
+  }
+}
+
+:root[data-bs-theme='dark'] {
+  @include nf-dark-rgb;
+}
+
+:root[data-bs-theme='light'] {
+  @include nf-light-rgb;
+}
+
+// The theme uses --bs-card-bg as its universal "framed paper" background
+// (dropdowns, the mobile nav drawer, accordions, pricing chrome). Root-level
+// so it resolves on EVERY consumer; an undefined var() in a background
+// shorthand computes to transparent, which is how invisible panels happen.
+:root {
+  --bs-card-bg: var(--omega-surface);
+}
+
+// Component surfaces ride the tokens too. (Volt ::selection lives in
+// css/base/_utilities.scss with the rest of the editorial garnish.)
+.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);
+}

package/themes/newsflash/css/base/_typography.scss

@@ -0,0 +1,49 @@
+// Newsflash Theme — Typography
+// Optical-sized serif headlines over a clean grotesk body — the editorial
+// voice of the theme. Fonts are loaded via the theme's `head` block in
+// base.html (Google Fonts), NOT @import-ed here, to avoid render-blocking
+// duplicate loads.
+
+// NOTE: families, weights, and line-heights ship as Bootstrap vars in
+// _config.scss ($headings-*, $display-*, $lead-font-weight, $line-height-base)
+// — NOT as element rules here. Page bundles re-emit Bootstrap AFTER the main
+// bundle, so element-rule overrides of Bootstrap-owned props would silently
+// lose on any page that ships page CSS (the stock 300 display/lead weights
+// would come back). Only non-Bootstrap props live below.
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-optical-sizing: auto;
+  letter-spacing: $nf-heading-letter-spacing;
+  text-wrap: balance;
+}
+
+// Display headlines: tighter tracking — the front-page splash voice
+// (weight 550 + leading 1.04 come from $display-* in _config.scss).
+.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+  font-family: $nf-font-display;
+  font-optical-sizing: auto;
+  letter-spacing: -0.022em;
+}
+
+// Deks (the standfirst under a headline) — .lead reads as ink-soft prose.
+.lead {
+  color: var(--bs-secondary-color);
+  line-height: 1.6;
+}
+
+// Plain in-content links: vermilion with a visible underline. Buttons set
+// their own text color via --bs-btn-color — guard them so labels never turn
+// vermilion on hover.
+a {
+  text-underline-offset: 0.15em;
+  text-decoration-thickness: 1.5px;
+}
+
+a.btn:hover {
+  color: var(--bs-btn-color);
+}

package/themes/newsflash/css/base/_utilities.scss

@@ -0,0 +1,122 @@
+// Newsflash Theme — Base
+// Body surface, the film-grain overlay, selection color, and editorial
+// treatments of utility classes the shared (Classy-derived) layouts emit.
+// No theme-prefixed classes in markup: the look comes from restyling
+// STANDARD classes so markup stays swappable across themes.
+
+// Body surface
+body {
+  background-color: var(--omega-ground);
+  color: var(--bs-body-color);
+}
+
+// ============================================
+// Film grain — the analog print texture over everything
+// ============================================
+// Fixed SVG-noise overlay; pointer-events none so it never intercepts input.
+// Multiply on paper, screen on dark paper (multiply would just vanish).
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
+  opacity: var(--nf-grain-opacity);
+  mix-blend-mode: multiply;
+}
+
+[data-bs-theme="dark"] body::after {
+  mix-blend-mode: screen;
+}
+
+// Volt selection — the highlighter
+::selection {
+  background: var(--nf-volt);
+  color: var(--nf-volt-ink);
+}
+
+// ============================================
+// Accent text (headline_accent spans) — italic serif vermilion
+// ============================================
+// Fork markup wears newsflash-accent; base markup reaches the same look
+// through the .omega-display em rule below.
+.newsflash-accent {
+  font-family: $nf-font-display;
+  font-style: italic;
+  color: var(--omega-accent);
+}
+
+// ============================================
+// Base voice re-tunes: the omega-* type vocabulary the fallthrough
+// surfaces speak (classy's typography partial is deliberately NOT imported;
+// these are the pieces base markup actually uses, in the editorial voice)
+// ============================================
+// Marketing display: optical serif (Fraunces via --omega-font-marketing),
+// accents italic vermilion (the newsflash-accent treatment on base markup).
+.omega-display {
+  font-family: var(--omega-font-marketing);
+  font-optical-sizing: auto;
+  font-weight: 550;
+  letter-spacing: -0.022em;
+  line-height: 1.06;
+
+  em,
+  i {
+    font-style: italic;
+    color: var(--omega-accent);
+  }
+}
+
+.omega-display--hero {
+  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
+  line-height: 1.04;
+}
+
+.omega-display--page {
+  font-size: clamp(2.25rem, 4.6vw, 3.375rem);
+}
+
+.omega-display--section {
+  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
+  line-height: 1.08;
+}
+
+// Micro labels become the vermilion kicker voice (sans dot; the dot is the
+// fork kicker's flourish). Authored in full: classy's typography partial
+// (the usual .omega-micro home) is not imported.
+.omega-micro {
+  font-family: $font-family-sans-serif;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--omega-accent);
+}
+
+// The faintest voice (footnotes, reassurance lines): same home story.
+.omega-quiet {
+  color: var(--omega-ink-faint);
+}
+
+// Serif voice on arbitrary elements (status page numbers): same home story.
+.text-marketing {
+  font-family: var(--omega-font-marketing);
+}
+
+// In-page anchors clear the sticky masthead.
+[id] {
+  scroll-margin-top: 6rem;
+}
+
+// ============================================
+// Highlighter swipe — volt half-height marker behind inline text
+// ============================================
+mark,
+.highlight {
+  background: linear-gradient(transparent 55%, var(--nf-volt) 55%);
+  color: inherit;
+  padding: 0 0.12em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}