ultimate-jekyll-manager 1.4.3 → 1.5.0

package/dist/assets/themes/neobrutalism/pages/index.scss

@@ -0,0 +1,227 @@
+// Neobrutalism Theme — Homepage page-specific CSS
+// Styles the neobrutalist homepage override
+// (_layouts/themes/neobrutalism/frontend/pages/index.html).
+//
+// Class names are UNIVERSAL (section-hero, showcase-row, stat-block, cta-panel,
+// .card, Bootstrap .text-bg-* …) — no theme prefix — so the same markup is
+// swappable across themes. This file gives those classes the neobrutalist look.
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// Shared section heading block
+.section-head { max-width: 60ch; }
+.section-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin: 0;
+}
+
+// ============================================
+// Hero — asymmetric split (.text-bg-warning gives the yellow block + ink text)
+// ============================================
+.section-hero {
+  padding-top: clamp(3rem, 8vw, 7rem);
+  padding-bottom: clamp(3rem, 8vw, 7rem);
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+
+  .text-uppercase {
+    display: inline-block;
+    font-family: $nb-font-mono;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    background: #111111;
+    color: var(--nb-accent-yellow);
+    padding: 0.4rem 0.8rem;
+  }
+}
+
+.hero-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2.75rem, 8vw, 6rem);
+  line-height: 0.92;
+  letter-spacing: -0.04em;
+  margin: 0;
+
+  .text-accent {
+    background: #111111;
+    color: var(--nb-accent-yellow);
+    padding: 0 0.1em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+}
+
+// Hero CTAs use Bootstrap `.d-grid.gap-3` (full-width stacked buttons) in the
+// markup. The only theme-specific bit is the slight rightward offset on large
+// screens that gives the split hero its asymmetry.
+.hero-actions {
+  @media (min-width: 992px) { margin-left: 1.5rem; }
+}
+
+// ============================================
+// Trusted-by — framed marquee strip
+// ============================================
+.logo-strip { padding: clamp(2.5rem, 6vw, 4rem) 0; }
+.logo-strip-box {
+  position: relative;
+  padding: 2rem 0 1.75rem;
+  background: var(--nb-surface);
+  @include nb-border();
+  @include nb-shadow(md);
+  overflow: hidden;
+}
+.logo-strip-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-family: $nb-font-mono;
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: #111111;
+  color: var(--nb-accent-yellow);
+  padding: 0.3rem 0.7rem;
+  z-index: 5;
+}
+
+// ============================================
+// Showcase — alternating offset rows
+// ============================================
+.showcase { padding: clamp(3rem, 8vw, 6rem) 0; }
+.showcase-list { display: flex; flex-direction: column; gap: 2rem; }
+.showcase-row {
+  display: grid;
+  // Number column fixed; text column sized to content so it sits next to the
+  // number instead of stretching across the row (which left an awkward gap).
+  grid-template-columns: minmax(120px, 180px) minmax(auto, 60ch);
+  gap: 2.5rem;
+  align-items: center;
+  justify-content: start;
+
+  @media (max-width: 767.98px) { grid-template-columns: 1fr; gap: 1rem; }
+
+  // Flipped rows: number moves to the right, the whole pair sits to the right edge.
+  &--flip {
+    @media (min-width: 768px) {
+      grid-template-columns: minmax(auto, 60ch) minmax(120px, 180px);
+      justify-content: end;
+      .showcase-num { order: 2; }
+      .showcase-body { order: 1; }
+    }
+  }
+}
+.showcase-num {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(3rem, 9vw, 6rem);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+  // Color comes from the Bootstrap .text-bg-* utility on the element.
+}
+.showcase-body { max-width: 60ch; }
+.showcase-title {
+  font-family: $nb-font-display;
+  font-weight: 800;
+  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75rem;
+}
+.showcase-desc { font-size: 1.1rem; margin: 0; color: var(--bs-body-color); }
+
+// ============================================
+// Steps (features) — numbered .card blocks
+// ============================================
+.steps {
+  padding: clamp(3rem, 8vw, 6rem) 0;
+  border-top: $nb-border-width-lg solid var(--nb-border-color);
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+}
+.step-card { // sits on .card (gets the neobrutalist frame from the card component)
+  .card-body { padding: 1.75rem; }
+}
+.step-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+.step-card-num { font-family: $nb-font-display; font-weight: 900; font-size: 2.5rem; line-height: 1; }
+.step-card-icon {
+  font-size: 1.75rem;
+  width: 3.25rem;
+  height: 3.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  @include nb-border($nb-border-width-sm);
+}
+.step-card-title { font-family: $nb-font-display; font-weight: 800; font-size: 1.5rem; margin-bottom: 0.5rem; }
+.step-card-desc { margin: 0; color: var(--bs-body-color); }
+
+// ============================================
+// Stats — oversized color-block cells (.text-bg-* gives the fill)
+// ============================================
+.stats { padding: clamp(3rem, 8vw, 6rem) 0; }
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+
+  @media (max-width: 991.98px) { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 479.98px) { grid-template-columns: 1fr; }
+}
+.stat-block {
+  display: flex;
+  flex-direction: column;
+  padding: 1.75rem;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+  @include nb-press($nb-shadow-offset-lg); // press matched to the lg resting shadow
+}
+.stat-block-num { font-family: $nb-font-display; font-weight: 900; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; }
+.stat-block-label { font-weight: 800; font-size: 1.1rem; margin-top: 0.5rem; }
+.stat-block-sub { font-family: $nb-font-mono; font-size: 0.8rem; margin-top: 0.25rem; }
+
+// ============================================
+// CTA — full-bleed ink panel
+// ============================================
+.cta { padding: clamp(3rem, 8vw, 6rem) 0; }
+.cta-panel {
+  background: #111111;
+  color: #FFFEF2;
+  padding: clamp(2.5rem, 6vw, 4.5rem);
+  text-align: center;
+  // Frame + offset shadow in the accent (not ink) so both read against the dark panel.
+  border: $nb-border-width-lg solid var(--nb-accent-yellow);
+  box-shadow: #{$nb-shadow-offset-lg} #{$nb-shadow-offset-lg} 0 var(--nb-accent-yellow);
+}
+.cta-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2rem, 6vw, 4rem);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  margin-bottom: 1.25rem;
+
+  .text-accent {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    padding: 0 0.1em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+}
+.cta-desc { font-size: 1.25rem; max-width: 50ch; margin: 0 auto 2rem; opacity: 0.85; }

package/dist/assets/themes/neobrutalism/pages/pricing/index.scss

@@ -0,0 +1,267 @@
+// Neobrutalism Theme — Pricing page-specific CSS
+// Styles the neobrutalist pricing override. Class names are UNIVERSAL (no theme
+// prefix) so the markup is swappable across themes. Compiles to its own bundle
+// (pages/pricing/index.neobrutalism.bundle.css). See docs/themes.md.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// Section heading (also defined in homepage bundle; page bundles are independent)
+.section-head { max-width: 60ch; }
+.section-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin: 0;
+}
+
+// ============================================
+// Hero
+// ============================================
+.pricing-hero {
+  text-align: center;
+  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
+}
+.pricing-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2.5rem, 7vw, 5rem);
+  line-height: 0.95;
+  letter-spacing: -0.03em;
+  margin-bottom: 1rem;
+
+  .text-accent {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    padding: 0 0.1em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+}
+
+// ============================================
+// Billing toggle — hard square segmented control
+// ============================================
+.billing-toggle {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  width: 100%;
+  max-width: 420px;
+  @include nb-border();
+  @include nb-shadow(md);
+}
+.billing-option {
+  flex: 1;
+  text-align: center;
+  padding: 0.85rem 1rem;
+  font-family: $nb-font-display;
+  font-weight: 700;
+  cursor: pointer;
+  background: var(--nb-surface);
+  color: var(--bs-body-color);
+  transition: $nb-transition;
+  margin: 0;
+
+  & + .billing-option { border-left: $nb-border-width solid var(--nb-border-color); }
+
+  .btn-check:checked + & {
+    background: #111111;
+    color: var(--nb-accent-yellow);
+  }
+}
+.billing-save {
+  display: inline-block;
+  font-family: $nb-font-mono;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  padding: 0.1rem 0.35rem;
+  margin-left: 0.35rem;
+  vertical-align: middle;
+}
+.btn-check:checked + .billing-option .billing-save { background: var(--nb-accent-yellow); }
+
+// ============================================
+// Plan grid — popular plan emphasized (equal height, same baseline)
+// ============================================
+.pricing-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+  align-items: stretch; // all cards fill the row's full height → equal height
+  margin-bottom: 2rem;
+
+  @media (max-width: 1199.98px) { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 575.98px) { grid-template-columns: 1fr; }
+}
+.pricing-plan { // sits on .card (frame/shadow come from the card component)
+  position: relative;
+  display: flex;
+  flex-direction: column; // lets the features list grow so footers align
+  padding: 1.75rem 1.5rem;
+  // No press interaction on the card itself — it's not clickable. Only the CTA
+  // button inside reacts to the pointer.
+
+  // Features sit directly under the divider (top of the lower half), not pushed
+  // to the bottom. Cards stay equal height via the grid's align-items: stretch.
+
+  // Popular plan: accent fill + thicker frame. Same height + same press as the others.
+  &--popular {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    @include nb-border($nb-border-width-lg);
+  }
+}
+.pricing-plan-flag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateY(-50%);
+  font-family: $nb-font-mono;
+  font-weight: 700;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #111111;
+  color: var(--nb-accent-yellow);
+  padding: 0.3rem 0.6rem;
+}
+.pricing-plan-name {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: 1.75rem;
+  margin-bottom: 0.15rem;
+}
+.pricing-plan-tagline {
+  font-family: $nb-font-mono;
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin-bottom: 1rem;
+}
+.pricing-plan-price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.1rem;
+  margin-bottom: 0.25rem;
+}
+.pricing-plan-currency { font-family: $nb-font-display; font-weight: 900; font-size: 1.5rem; }
+.pricing-plan-amount { font-family: $nb-font-display; font-weight: 900; font-size: 3rem; line-height: 1; }
+.pricing-plan-per { font-family: $nb-font-mono; font-size: 0.85rem; opacity: 0.7; }
+.pricing-plan-ppu { font-family: $nb-font-mono; font-size: 0.75rem; opacity: 0.7; margin-bottom: 1.25rem; min-height: 1.2em; }
+.pricing-plan-billing { font-size: 0.8rem; text-align: center; opacity: 0.75; margin-bottom: 0.4rem; }
+.pricing-plan-guarantee { font-size: 0.8rem; text-align: center; opacity: 0.8; margin-bottom: 1rem; }
+.pricing-plan-rule {
+  border: 0;
+  border-top: $nb-border-width-sm solid currentColor;
+  opacity: 0.25;
+  margin: 0 0 1.25rem;
+}
+.pricing-plan-features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+
+  li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; font-weight: 500; }
+
+  // Spacing when a second (additional-features) list follows the inherit label
+  & + .pricing-plan-inherit { margin-top: 1rem; }
+}
+
+// "Everything in <plan>, and more:" / "What you get:" tier-inheritance label
+.pricing-plan-inherit {
+  font-family: $nb-font-mono;
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin: 0 0 0.6rem;
+
+  strong { font-weight: 700; opacity: 1; }
+}
+.pricing-plan-feature-icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nb-accent-green);
+  color: #111111;
+  @include nb-border($nb-border-width-sm);
+}
+
+// Enterprise strip (sits on .card)
+.enterprise-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.75rem 2rem;
+  flex-wrap: wrap;
+}
+.enterprise-panel-title { font-family: $nb-font-display; font-weight: 900; font-size: 1.75rem; margin-bottom: 0.25rem; }
+
+// ============================================
+// Stats / social proof (.text-bg-* gives the fill)
+// ============================================
+.stats { padding: clamp(3rem, 8vw, 6rem) 0; }
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+
+  @media (max-width: 991.98px) { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 479.98px) { grid-template-columns: 1fr; }
+}
+.stat-block {
+  display: flex;
+  flex-direction: column;
+  padding: 1.75rem;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+  @include nb-press($nb-shadow-offset-lg); // press matched to the lg resting shadow
+}
+.stat-block-num { font-family: $nb-font-display; font-weight: 900; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; }
+.stat-block-label { font-weight: 800; font-size: 1.1rem; margin-top: 0.5rem; }
+
+// ============================================
+// FAQ
+// ============================================
+.faq { padding: clamp(3rem, 8vw, 6rem) 0; }
+
+// ============================================
+// CTA — full-bleed ink panel
+// ============================================
+.cta { padding: clamp(3rem, 8vw, 6rem) 0; }
+.cta-panel {
+  background: #111111;
+  color: #FFFEF2;
+  padding: clamp(2.5rem, 6vw, 4.5rem);
+  text-align: center;
+  // Frame + offset shadow in the accent (not ink) so both read against the dark panel.
+  border: $nb-border-width-lg solid var(--nb-accent-yellow);
+  box-shadow: #{$nb-shadow-offset-lg} #{$nb-shadow-offset-lg} 0 var(--nb-accent-yellow);
+}
+.cta-title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2rem, 6vw, 4rem);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  margin-bottom: 1.25rem;
+
+  .text-accent {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    padding: 0 0.1em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+}
+.cta-desc { font-size: 1.25rem; max-width: 50ch; margin: 0 auto 2rem; opacity: 0.85; }

package/dist/assets/themes/neobrutalism/pages/test/libraries/layers/index.js

@@ -0,0 +1,9 @@
+// /test — Theme (neobrutalism) page JS — the #theme layer.
+// Runs AFTER #main, BEFORE #project. Turns the "js-theme" dot green.
+export default ({ manager, options }) => {
+  const dot = document.querySelector('.layer-dot[data-layer="js-theme"]');
+  if (dot) {
+    dot.style.background = '#30a46c'; // green
+  }
+  console.log('[test-layer] #theme JS ran → js-theme dot green');
+};

package/dist/assets/themes/neobrutalism/pages/test/libraries/layers/index.scss

@@ -0,0 +1,7 @@
+// /test — Theme (neobrutalism) page CSS — the #theme layer.
+// Loads AFTER the universal layer and turns the "css-theme" dot green.
+// Compiles standalone, so no theme tokens are needed here — just the proof.
+
+.layer-dot[data-layer="css-theme"] {
+  background: #30a46c; // green
+}

package/dist/build.js

@@ -110,11 +110,8 @@ Manager.actLikeProduction = function () {
 }
 Manager.prototype.actLikeProduction = Manager.actLikeProduction;
 
-// getEnvironment (calls isServer ? 'production' : 'development')
-Manager.getEnvironment = function () {
-  return Manager.isServer() ? 'production' : 'development';
-}
-Manager.prototype.getEnvironment = Manager.getEnvironment;
+// getEnvironment() is the SSOT and lives in src/utils/mode-helpers.js (alongside the is*()
+// family). It's mixed onto the Manager via the attachTo() call below, same as in EM/BXM.
 
 // getConfig: requires and parses config.yml
 Manager.getConfig = function (type) {

package/dist/commands/install.js

@@ -17,7 +17,7 @@ module.exports = async function (options) {
 
   try {
     // Install production
-    if (['prod', 'p', 'production'].includes(type)) {
+    if (['live', 'prod', 'p', 'production'].includes(type)) {
       // Log
       logger.log('Installing production...');
 

package/dist/commands/setup.js

@@ -39,6 +39,7 @@ module.exports = async function (options) {
   options.checkLocality = options.checkLocality !== 'false';
   options.publishGitHubToken = options.publishGitHubToken !== 'false';
   options.deduplicatePosts = options.deduplicatePosts !== 'false';
+  options.removeLegacyTeamMembers = options.removeLegacyTeamMembers !== 'false';
   options.migrate = options.migrate !== 'false';
 
   // Quick mode: skip slow/network operations
@@ -137,6 +138,11 @@ module.exports = async function (options) {
   if (options.deduplicatePosts) {
     await deduplicatePosts();
   }
+
+  // Remove legacy default team members (first-name-only format, e.g. team/alex)
+  if (options.removeLegacyTeamMembers) {
+    await removeLegacyTeamMembers();
+  }
 };
 
 // --- Version check functions ---
@@ -527,6 +533,41 @@ async function deduplicatePosts() {
   }
 }
 
+async function removeLegacyTeamMembers() {
+  // Legacy default team members that used the first-name-only format.
+  // These shipped before team members were renamed to first-last (e.g. team/alex -> team/alex-raeburn).
+  const legacyTeamMembers = ['alex'];
+
+  logger.log('Checking for legacy default team members to remove...');
+
+  let removedCount = 0;
+
+  legacyTeamMembers.forEach((slug) => {
+    // The _team collection file (any markdown/html extension)
+    const memberFiles = glob(`src/_team/${slug}.{md,markdown,html}`, { nodir: true });
+
+    memberFiles.forEach((filePath) => {
+      jetpack.remove(filePath);
+      logger.log(`  ✓ Removed legacy team member: ${filePath}`);
+      removedCount++;
+    });
+
+    // The associated image directory (src/assets/images/team/<slug>)
+    const imageDir = path.join(process.cwd(), 'src', 'assets', 'images', 'team', slug);
+
+    if (jetpack.exists(imageDir)) {
+      jetpack.remove(imageDir);
+      logger.log(`  ✓ Removed legacy team member image directory: team/${slug}`);
+    }
+  });
+
+  if (removedCount > 0) {
+    logger.log(logger.format.green(`✓ Removed ${removedCount} legacy team member(s)`));
+  } else {
+    logger.log('No legacy team members found');
+  }
+}
+
 // --- Migration functions ---
 
 async function migrate() {

package/dist/defaults/CLAUDE.md

@@ -29,8 +29,12 @@ npm run build       # production build (UJ_BUILD_MODE=true): clean → setup →
 npm run deploy      # build → `npu sync --message='Deploy'` (publishes _site/)
 npx mgr test        # run framework + project test suites (build / page / boot layers)
 npx mgr audit       # HTML validation + spellcheck + optional Lighthouse
+npx mgr install dev  # use LOCAL ultimate-jekyll-manager source (to test framework edits)
+npx mgr install live # restore the published ultimate-jekyll-manager from npm
 ```
 
+> Editing the UJM framework source while working here? Run `npx mgr install dev` so this project picks up your uncommitted framework changes (it otherwise uses its installed `node_modules/ultimate-jekyll-manager`). Run `npx mgr install live` to switch back.
+
 ## Where things live
 
 - `src/_config.yml` — Jekyll config: brand, theme, meta, web_manager (Firebase). `Manager.getConfig('project')` reads this. **`brand.id` + `theme.id` are required.**
@@ -72,7 +76,7 @@ At build time, `require('ultimate-jekyll-manager/build')` exposes:
 - `Manager.getConfig(type)` — read `_config.yml` (`'project'` or `'main'`)
 - `Manager.getPackage(type)` — read `package.json` (`'project'` or `'main'`)
 - `Manager.getUJMConfig()` — read `config/ultimate-jekyll-manager.json`
-- `Manager.getEnvironment()` — `'development'` or `'production'`
+- `Manager.getEnvironment()` — `'development' | 'testing' | 'production'` (mutually exclusive; testing wins). Gate side effects on the intentional check (`isProduction()` for prod-only; `isDevelopment() || isTesting()` for local-or-test) — never `!isDevelopment()`.
 - `Manager.isBuildMode()` / `isQuickMode()` / `isServer()` / `actLikeProduction()` — env-gated flags
 - `Manager.logger(name)` — timestamped logger instance
 - `Manager.require(path)` — escape hatch for UJM transitive deps (use sparingly)

package/dist/defaults/dist/_includes/core/head.html

@@ -26,12 +26,15 @@
 
 {% iftruthy page.resolved.asset_path %}
   {% capture page-css-path %}/assets/css/pages/{{ page.resolved.asset_path }}.bundle.css{% endcapture %}
+  {% capture page-css-theme-path %}/assets/css/pages/{{ page.resolved.asset_path }}.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
 {% endiftruthy %}
 {% iffalsy page.resolved.asset_path %}
   {% if page.canonical.path == "/" %}
     {% capture page-css-path %}/assets/css/pages/index.bundle.css{% endcapture %}
+    {% capture page-css-theme-path %}/assets/css/pages/index.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
   {% else %}
     {% capture page-css-path %}/assets/css/pages{{ page.canonical.path }}/index.bundle.css{% endcapture %}
+    {% capture page-css-theme-path %}/assets/css/pages{{ page.canonical.path }}/index.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
   {% endif %}
 {% endiffalsy %}
 
@@ -210,6 +213,20 @@
   {% endif %}
 {% endiffile %}
 
+<!-- Then, the active theme's page-specific bundle (loaded AFTER base so it can override).
+     Only present when the theme ships page CSS for this path — otherwise nothing loads
+     and the theme's component/general styles handle the page. No fallback needed. -->
+{% iffile page-css-theme-path %}
+  <link rel="stylesheet" type="text/css" href="{{ site.url }}{{ page-css-theme-path }}?cb={{ site.uj.cache_breaker }}"/>
+
+  <!-- Dev log -->
+  {% if jekyll.environment == "development" %}
+    <script>
+      console.info("Theme page-specific css loading: #main{{ page-css-theme-path }}");
+    </script>
+  {% endif %}
+{% endiffile %}
+
 <!-- Style - Scripts are Disabled -->
 <noscript>
   {{ page-ie-script }}

package/dist/defaults/dist/_includes/themes/classy/frontend/sections/footer.html

@@ -70,10 +70,10 @@
     </div>
 
     <!-- Bottom Section -->
-    <div class="row mt-4 pt-3 border-top">
+    <div class="row mt-4 pt-3 border-top align-items-center">
       <div class="col-md-6 d-flex align-items-center">
         <!-- Language Dropdown -->
-        <div class="d-inline-block me-3">
+        <div class="d-flex align-items-center me-3">
             <div class="dropup uj-language-dropdown">
               <button class="btn btn-sm btn-outline-adaptive dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                 <i class="fa fa-sm me-1">
@@ -85,7 +85,7 @@
               </button>
               <ul class="dropdown-menu">
                 {% assign default_language = site.translation.default | default: "en" %}
-                {% if site.translation.languages.size > 0 %}
+                {% if site.translation.enabled and site.translation.languages.size > 0 %}
                   {% assign all_languages = site.translation.languages | push: default_language %}
                 {% else %}
                   {% assign all_languages = "" | split: "" | push: default_language %}
@@ -105,7 +105,7 @@
 
         <!-- Social Links -->
         {% if data.socials.enabled %}
-          <div class="d-inline-block">
+          <div class="d-flex align-items-center">
             {% if data.socials.list and data.socials.list.size > 0 %}
               {% assign social_list = data.socials.list %}
             {% else %}