ultimate-jekyll-manager 1.4.2 → 1.5.0

package/dist/assets/themes/neobrutalism/css/layout/_navigation.scss

@@ -0,0 +1,153 @@
+// Neobrutalism Theme — Navigation
+// The inherited nav markup (.navbar-wrapper > .navbar.navbar-floating) is a
+// floating glass pill in Classy. Here we make it a solid, ink-framed bar that
+// sits flush at the top — a hard horizontal block, true to the style.
+
+.navbar-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+  pointer-events: none;
+
+  .navbar {
+    pointer-events: auto;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding-left: clamp(1rem, 4vw, 3rem);
+    padding-right: clamp(1rem, 4vw, 3rem);
+  }
+}
+
+.navbar.navbar-floating {
+  border-radius: 0;
+  padding: 0.75rem clamp(1rem, 4vw, 3rem);
+  background: var(--nb-surface) !important;
+  border: 0;
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+  transition: $nb-transition;
+
+  // Slight shadow only once scrolled (set by _theme.js)
+  &.scrolled {
+    @include nb-shadow(sm);
+  }
+
+  .container,
+  .container-fluid {
+    padding: 0;
+  }
+}
+
+// Brand: chunky display type, no fade
+.navbar-brand {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: 1.4rem;
+  letter-spacing: -0.03em;
+
+  .brand-logo { height: 32px; width: auto; margin-right: 0.5rem; }
+}
+
+// Nav links: square hover blocks. Hover/active fill is the PRIMARY blue (white
+// text) — not the yellow accent — so the top-bar interactions match the brand's
+// blue buttons instead of the yellow CTA accent.
+.navbar-nav .nav-link {
+  font-weight: 700;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.85rem;
+  margin: 0 0.15rem;
+  border-radius: 0;
+  color: var(--bs-body-color);
+  border: $nb-border-width-sm solid transparent;
+  transition: $nb-transition;
+
+  // Interactive accent (blue), not the yellow signature accent. Single token so
+  // every hover/active state across the theme stays consistent.
+  &:hover {
+    background: var(--nb-accent-interactive);
+    color: var(--nb-accent-interactive-ink);
+    border-color: var(--nb-border-color);
+  }
+
+  // Active = solid blue block with white text (matches hover, always readable).
+  // Use &.active.active + !important to beat Bootstrap's .text-body utility that
+  // the nav include adds to links (which otherwise forces color back to body).
+  &.active,
+  &.active.text-body {
+    background: var(--nb-accent-interactive) !important;
+    color: var(--nb-accent-interactive-ink) !important;
+    border-color: var(--nb-border-color);
+  }
+}
+
+// Mobile toggle: a hard square button
+.navbar-toggler {
+  border-radius: 0;
+  padding: 0.3rem 0.55rem;
+  background: var(--nb-surface);
+  @include nb-border($nb-border-width-sm);
+  transition: $nb-transition;
+
+  &:hover { background: var(--nb-accent-interactive); }
+  &:focus { box-shadow: var(--nb-shadow-sm); }
+
+  .navbar-toggler-icon {
+    width: 1.25em;
+    height: 1.25em;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817,17,17,1%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+
+  [data-bs-theme="dark"] & .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28245,245,245,1%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+}
+
+// Mobile collapsed menu becomes a bordered drawer panel
+@media (max-width: 991.98px) {
+  .navbar-collapse {
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    background: var(--nb-surface);
+    @include nb-border();
+    @include nb-shadow(md);
+  }
+}
+
+// ============================================
+// Dropdown menus — hard bordered panels
+// ============================================
+.dropdown-menu {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+  padding: 0.4rem;
+  margin-top: 0.6rem;
+
+  .dropdown-item {
+    border-radius: 0;
+    font-weight: 600;
+    padding: 0.55rem 0.85rem;
+    color: var(--bs-body-color);
+
+    &:hover,
+    &:focus {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+    }
+
+    &.active,
+    &:active {
+      background: var(--bs-body-color);
+      color: var(--nb-paper);
+    }
+  }
+
+  .dropdown-divider {
+    border-top: $nb-border-width-sm solid var(--nb-border-color);
+    opacity: 1;
+    margin: 0.4rem 0;
+  }
+}

package/dist/assets/themes/neobrutalism/js/initialize-tooltips.js

@@ -0,0 +1,20 @@
+/**
+ * Initialize Bootstrap Tooltips
+ * Finds all elements with data-bs-toggle="tooltip" and initializes them
+ */
+export default function initializeTooltips() {
+  const $tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+
+  // If no tooltips found, exit early
+  if ($tooltipTriggers.length === 0) {
+    return;
+  }
+
+  // Log the number of tooltips being initialized
+  console.log(`Initializing ${$tooltipTriggers.length} tooltips`);
+
+  // Initialize each tooltip
+  $tooltipTriggers.forEach(($el) => {
+    new bootstrap.Tooltip($el);
+  });
+}

package/dist/assets/themes/neobrutalism/js/navbar-scroll.js

@@ -0,0 +1,29 @@
+// Navbar scroll effect for the Neobrutalism theme.
+// Toggles a `.scrolled` class on the floating navbar once the page is scrolled
+// past a threshold; the SCSS turns that into a hard offset shadow under the bar.
+// Threshold is configurable via the data-nb-scroll-threshold attribute on the navbar.
+export default function setupNavbarScroll() {
+  const navbar = document.querySelector('.navbar-floating');
+  if (!navbar) {
+    return;
+  }
+
+  const threshold = parseInt(navbar.dataset.nbScrollThreshold, 10) || 20;
+
+  let ticking = false;
+  function update() {
+    navbar.classList.toggle('scrolled', window.scrollY > threshold);
+    ticking = false;
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      ticking = true;
+      window.requestAnimationFrame(update);
+    }
+  }
+
+  // Initial state + listener
+  update();
+  window.addEventListener('scroll', onScroll, { passive: true });
+}

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');
+};