Minor tweaks and bug fixes.

assets/javascripts/community_landing/landing.js

@@ -173,8 +173,7 @@
     function openVideoModal(url) {
       var ytId = parseYouTubeId(url);
       if (ytId) {
-        var origin = encodeURIComponent(window.location.origin);
-        videoPlayer.innerHTML = '<iframe src="https://www.youtube.com/embed/' + ytId + '?autoplay=1&rel=0&origin=' + origin + '&enablejsapi=1" allow="autoplay; encrypted-media" allowfullscreen frameborder="0"></iframe>';
+        videoPlayer.innerHTML = '<iframe src="https://www.youtube-nocookie.com/embed/' + ytId + '?autoplay=1&rel=0" allow="autoplay; encrypted-media; fullscreen" allowfullscreen frameborder="0"></iframe>';
       } else {
         videoPlayer.innerHTML = '<video src="' + url + '" controls autoplay></video>';
       }

assets/javascripts/discourse/initializers/community-landing-admin-tabs.js

@@ -25,8 +25,9 @@ const TABS = [
     id: "hero",
     label: "Hero",
     settings: new Set([
-      "hero_title", "hero_subtitle", "hero_card_enabled", "hero_background_image_url",
-      "hero_image_urls", "hero_image_max_height",
+      "hero_title", "hero_accent_word", "hero_subtitle",
+      "hero_card_enabled", "hero_image_first", "hero_content_width",
+      "hero_background_image_url", "hero_image_urls", "hero_image_max_height",
       "hero_primary_button_enabled", "hero_primary_button_label", "hero_primary_button_url",
       "hero_secondary_button_enabled", "hero_secondary_button_label", "hero_secondary_button_url",
       "hero_video_url", "hero_video_button_color", "hero_video_blur_on_hover",
@@ -56,8 +57,7 @@ const TABS = [
     settings: new Set([
       "about_enabled", "about_heading_enabled", "about_heading",
       "about_title", "about_role", "about_body", "about_image_url",
-      "about_gradient_start", "about_gradient_mid", "about_gradient_end",
-      "about_background_image_url",
+      "about_card_color", "about_background_image_url",
       "about_bg_dark", "about_bg_light", "about_min_height", "about_border_style"
     ])
   },
@@ -102,6 +102,18 @@ const TABS = [
   }
 ];
 
+// Dark/light background pairs — light row gets merged into dark row
+const BG_PAIRS = [
+  ["hero_bg_dark", "hero_bg_light"],
+  ["hero_card_bg_dark", "hero_card_bg_light"],
+  ["stats_bg_dark", "stats_bg_light"],
+  ["about_bg_dark", "about_bg_light"],
+  ["topics_bg_dark", "topics_bg_light"],
+  ["groups_bg_dark", "groups_bg_light"],
+  ["app_cta_bg_dark", "app_cta_bg_light"],
+  ["footer_bg_dark", "footer_bg_light"],
+];
+
 let currentTab = "settings";
 let filterActive = false;
 let isActive = false;
@@ -122,6 +134,8 @@ function applyTabFilter() {
   if (!tab) return;
 
   container.querySelectorAll(".row.setting[data-setting]").forEach((row) => {
+    // Keep merged light rows permanently hidden
+    if (row.classList.contains("cl-merged-hidden")) return;
     const name = row.getAttribute("data-setting");
     row.classList.toggle(
       "cl-tab-hidden",
@@ -224,6 +238,71 @@ function cleanupTabs() {
   filterActive = false;
 }
 
+/**
+ * Merge dark/light bg color pairs into a single row.
+ * Moves the light setting-value into the dark row and hides the light row.
+ */
+function mergeBgPairs() {
+  const container = getContainer();
+  if (!container) return;
+
+  BG_PAIRS.forEach(([darkName, lightName]) => {
+    const darkRow = container.querySelector(`.row.setting[data-setting="${darkName}"]`);
+    const lightRow = container.querySelector(`.row.setting[data-setting="${lightName}"]`);
+    if (!darkRow || !lightRow) return;
+    // Already merged
+    if (darkRow.querySelector(".cl-merged-value")) return;
+
+    const lightValue = lightRow.querySelector(".setting-value");
+    const lightLabel = lightRow.querySelector(".setting-label");
+    if (!lightValue) return;
+
+    // Rename the dark row label to just show the base name (e.g. "Hero BG" instead of "Hero BG dark")
+    const darkH3 = darkRow.querySelector(".setting-label h3");
+    if (darkH3) {
+      darkH3.textContent = darkH3.textContent.replace(/\s*dark$/i, "").trim();
+    }
+
+    // Create a wrapper that holds both color pickers side by side
+    const darkValue = darkRow.querySelector(".setting-value");
+    if (!darkValue) return;
+
+    // Wrap existing dark value
+    const wrapper = document.createElement("div");
+    wrapper.className = "cl-merged-value";
+
+    const darkCol = document.createElement("div");
+    darkCol.className = "cl-color-col";
+    const darkLbl = document.createElement("span");
+    darkLbl.className = "cl-color-col__label";
+    darkLbl.textContent = "Dark";
+    darkCol.appendChild(darkLbl);
+    // Move dark value's children into the column
+    while (darkValue.firstChild) {
+      darkCol.appendChild(darkValue.firstChild);
+    }
+
+    const lightCol = document.createElement("div");
+    lightCol.className = "cl-color-col";
+    const lightLbl = document.createElement("span");
+    lightLbl.className = "cl-color-col__label";
+    lightLbl.textContent = "Light";
+    lightCol.appendChild(lightLbl);
+    // Move light value's children into the column
+    while (lightValue.firstChild) {
+      lightCol.appendChild(lightValue.firstChild);
+    }
+
+    wrapper.appendChild(darkCol);
+    wrapper.appendChild(lightCol);
+    darkValue.appendChild(wrapper);
+
+    // Hide the now-empty light row permanently
+    lightRow.classList.add("cl-merged-hidden");
+    lightRow.style.display = "none";
+  });
+}
+
 function buildTabsUI() {
   const container = getContainer();
   if (!container) return false;
@@ -284,7 +363,7 @@ function buildTabsUI() {
     });
 
     container.classList.add("cl-tabs-active");
-
+    mergeBgPairs();
     applyTabFilter();
     return true;
   }
@@ -329,7 +408,7 @@ function buildTabsUI() {
   }
 
   container.classList.add("cl-tabs-active");
-  wrapBgPairs();
+  mergeBgPairs();
   applyTabFilter();
   return true;
 }

assets/stylesheets/community_landing/admin.css

@@ -82,6 +82,35 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
   color: var(--primary, #ddd);
 }
 
+/* ── Merged dark/light color pairs (two pickers in one row) ── */
+
+.cl-merged-value {
+  display: flex;
+  gap: 24px;
+}
+
+.cl-color-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.cl-color-col__label {
+  display: block;
+  font-size: var(--font-down-1);
+  font-weight: 600;
+  color: var(--primary-medium);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 767px) {
+  .cl-merged-value {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
 /* ── When tabs are active, remove separator borders ── */
 
 .cl-tabs-active .row.setting[data-setting] {

assets/stylesheets/community_landing/landing.css

@@ -30,7 +30,7 @@
   --cl-radius-sm: 12px;
   --cl-radius-xs: 8px;
   --cl-stat-icon-color: #d4a24e;
-  --cl-about-gradient: linear-gradient(135deg, #0a0a14, #080812, #0a0a14);
+  --cl-about-card-bg: linear-gradient(135deg, #0a0a14, #080812, #0a0a14);
   --cl-app-gradient: linear-gradient(135deg, #d4a24e, #c4922e, #b8862e);
   --cl-blur: blur(12px);
   color-scheme: dark;
@@ -59,7 +59,7 @@
   --cl-orb-2: rgba(100, 150, 255, 0.05);
   --cl-gradient-text: linear-gradient(135deg, #c4922e, #a3711d, #c4922e);
   --cl-scrolled-nav: rgba(250, 249, 246, 0.85);
-  --cl-about-gradient: linear-gradient(135deg, #fdfcf9, #f9f8f4, #fdfcf9);
+  --cl-about-card-bg: linear-gradient(135deg, #fdfcf9, #f9f8f4, #fdfcf9);
   --cl-app-gradient: linear-gradient(135deg, #c4922e, #b3811d, #a3711d);
   --cl-blur: blur(16px);
   color-scheme: light;
@@ -88,7 +88,7 @@
     --cl-orb-1: rgba(212, 162, 78, 0.08);
     --cl-gradient-text: linear-gradient(135deg, #d4a24e, #b8862e, #d4a24e);
     --cl-scrolled-nav: rgba(250, 246, 240, 0.95);
-    --cl-about-gradient: linear-gradient(135deg, #fdf6ec, #fef9f0, #fdf6ec);
+    --cl-about-card-bg: linear-gradient(135deg, #fdf6ec, #fef9f0, #fdf6ec);
     --cl-app-gradient: linear-gradient(135deg, #d4a24e, #c4922e, #b8862e);
     color-scheme: light;
   }
@@ -637,6 +637,18 @@
   text-align: left;
 }
 
+@media (min-width: 1024px) {
+  .cl-hero__content {
+    flex: 0 0 var(--cl-hero-content-w, 50%);
+    max-width: var(--cl-hero-content-w, 50%);
+  }
+
+  .cl-hero__image {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 .cl-hero__title {
   font-size: clamp(2.5rem, 8vw, 4.5rem);
   font-weight: 900;
@@ -691,9 +703,15 @@
   height: auto;
   border-radius: var(--cl-radius);
   object-fit: cover;
+  object-position: center;
   transition: opacity 0.6s ease;
 }
 
+/* ── Hero Image First (swap order) ── */
+.cl-hero--image-first .cl-hero__image {
+  order: -1;
+}
+
 /* ── Hero Card Mode ── */
 .cl-hero--card .cl-hero__inner {
   background: var(--cl-hero-card-bg, var(--cl-card));
@@ -1046,7 +1064,7 @@
 }
 
 .cl-about__card {
-  background: var(--cl-about-gradient);
+  background: var(--cl-about-card-bg);
   border: 1px solid var(--cl-border);
   border-radius: 20px;
   overflow: hidden;