Major Improvements

Too numerous to mention

assets/stylesheets/community_landing/admin.css

@@ -82,37 +82,76 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
   color: var(--primary, #ddd);
 }
 
-/* ── Merged dark/light color pairs (wrapper approach) ── */
+/* ── Merged dark/light color pairs (CSS-only, no DOM moves) ── */
 
-.cl-merge-wrapper {
-  display: flex;
-  gap: 16px;
-  width: 100%;
-  padding-bottom: 20px;
-}
-
-.cl-merge-wrapper > .row.setting {
-  flex: 1;
-  min-width: 0;
+.cl-tabs-active .row.setting.cl-merged-dark {
+  float: left;
+  width: calc(50% - 8px);
+  margin-right: 16px;
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
 }
 
+.cl-tabs-active .row.setting.cl-merged-light {
+  float: left;
+  width: calc(50% - 8px);
+  padding-bottom: 0 !important;
+  margin-bottom: 20px !important;
+}
+
 /* Hide the light row's label + description — dark row's label covers both */
-.cl-merge-wrapper > .cl-merged-light > .setting-label {
+.cl-tabs-active .row.setting.cl-merged-light > .setting-label {
   display: none;
 }
 
-.cl-merge-wrapper > .cl-merged-light .desc {
+.cl-tabs-active .row.setting.cl-merged-light .desc {
   display: none;
 }
 
 /* Light row's value area fills the full width since label is hidden */
-.cl-tabs-active .cl-merge-wrapper > .cl-merged-light > .setting-value {
+.cl-tabs-active .row.setting.cl-merged-light > .setting-value {
   width: 100%;
   float: none;
 }
 
+/* Dark row: label + value stack vertically inside the half-width */
+.cl-tabs-active .row.setting.cl-merged-dark > .setting-label {
+  float: none;
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.cl-tabs-active .row.setting.cl-merged-dark > .setting-value {
+  float: none;
+  width: 100%;
+  padding-right: 0;
+}
+
+/* Controls (reset/undo) inside merged rows — inline after the color picker */
+.cl-tabs-active .row.setting.cl-merged-dark > .setting-controls,
+.cl-tabs-active .row.setting.cl-merged-light > .setting-controls {
+  float: none;
+  display: inline-block;
+  margin-top: 4px;
+}
+
+/* Clearfix after the light row to restore normal flow */
+.cl-tabs-active .row.setting.cl-merged-light::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+/* Insert a clear break after each pair to prevent stacking issues */
+.cl-tabs-active .row.setting.cl-merged-light + .row.setting:not(.cl-merged-light) {
+  clear: both;
+}
+
+/* Also clear when a merged-light is followed by anything else */
+.cl-tabs-active .cl-merged-light + *:not(.cl-merged-light):not(.cl-tab-hidden) {
+  clear: both;
+}
+
 .cl-color-col__label {
   display: block;
   font-size: var(--font-down-1);
@@ -124,12 +163,14 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
 }
 
 @media (max-width: 767px) {
-  .cl-merge-wrapper {
-    flex-direction: column;
-    gap: 0;
+  .cl-tabs-active .row.setting.cl-merged-dark,
+  .cl-tabs-active .row.setting.cl-merged-light {
+    float: none;
+    width: 100%;
+    margin-right: 0;
   }
 
-  .cl-merge-wrapper > .cl-merged-light > .setting-label {
+  .cl-tabs-active .row.setting.cl-merged-light > .setting-label {
     display: none;
   }
 }
@@ -174,7 +215,10 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="android_"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="app_"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="social_"],
-.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="footer_"] {
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="footer_"],
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="google_"],
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="title_font"],
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="fontawesome_enabled"] {
   margin-bottom: 20px;
 }
 
@@ -185,6 +229,8 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="logo_dark_url"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="accent_color"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"],
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="google_font_name"],
+.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="fontawesome_enabled"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="social_twitter_url"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"],
 .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"],
@@ -208,6 +254,8 @@ html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="m
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="logo_dark_url"],
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="accent_color"],
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"],
+html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="google_font_name"],
+html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="fontawesome_enabled"],
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="social_twitter_url"],
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"],
 html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"],
@@ -298,13 +346,15 @@ html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="f
 }
 
 .cl-tabs-active .row.setting .desc,
+.cl-tabs-active .row.setting .cl-desc,
 .cl-tabs-active .row.setting .validation-error {
   padding-top: 3px;
   font-size: var(--font-down-1);
   line-height: var(--line-height-large);
 }
 
-.cl-tabs-active .row.setting .desc {
+.cl-tabs-active .row.setting .desc,
+.cl-tabs-active .row.setting .cl-desc {
   color: var(--primary-medium);
 }
 

assets/stylesheets/community_landing/landing.css

@@ -100,7 +100,7 @@
   padding: 0;
   background: var(--cl-bg);
   color: var(--cl-text);
-  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--cl-font-body, 'Outfit'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
@@ -177,7 +177,7 @@ html {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
-  opacity: 0.5;
+  opacity: var(--cl-orb-opacity, 0.5);
   animation: cl-orb-float 20s infinite alternate ease-in-out;
 }
 
@@ -223,6 +223,7 @@ html {
 .cl-section-title {
   font-size: 1.6rem;
   font-weight: 800;
+  font-family: var(--cl-font-title, var(--cl-font-body, 'Outfit')), sans-serif;
   color: var(--cl-text-strong);
   margin: 0 0 2.5rem;
   letter-spacing: -0.02em;
@@ -380,6 +381,11 @@ html {
   font-size: 1.05rem;
 }
 
+/* FontAwesome icon spacing inside buttons */
+.cl-btn i.fa-solid {
+  margin: 0 0.35em;
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    1. NAVBAR — logo left, theme toggle + auth right
    ═══════════════════════════════════════════════════════════════════ */
@@ -731,6 +737,7 @@ html {
 .cl-hero__title {
   font-size: clamp(2.5rem, 8vw, 4.5rem);
   font-weight: 900;
+  font-family: var(--cl-font-title, var(--cl-font-body, 'Outfit')), sans-serif;
   color: var(--cl-hero-text);
   margin: 0 0 1.5rem;
   line-height: 0.95;
@@ -1552,6 +1559,15 @@ html {
   min-height: 400px;
 }
 
+.cl-spaces__col {
+  display: flex;
+  flex-direction: column;
+}
+
+.cl-spaces__col .cl-section-title {
+  font-size: 1.3rem;
+}
+
 .cl-spaces__full {
   display: block;
 }
@@ -1663,26 +1679,28 @@ html {
   overflow: hidden;
 }
 
-/* ── FAQ Accordion ── */
+/* ── FAQ Card Accordion ── */
 .cl-faq {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 0.6rem;
 }
 
-.cl-faq__title {
-  font-size: 1.2rem;
-  font-weight: 800;
-  color: var(--cl-text-strong);
-  margin: 0 0 1rem;
+.cl-faq__card {
+  background: var(--cl-faq-card-bg, var(--cl-card));
+  border: 1px solid var(--cl-border);
+  border-radius: var(--cl-radius-sm);
+  padding: 0 1.2rem;
+  transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-.cl-faq__item {
-  border-bottom: 1px solid var(--cl-border);
+.cl-faq__card:hover {
+  border-color: var(--cl-border-hover);
 }
 
-.cl-faq__item:first-of-type {
-  border-top: 1px solid var(--cl-border);
+.cl-faq__card[open] {
+  border-color: var(--cl-border-hover);
+  box-shadow: 0 4px 16px var(--cl-shadow);
 }
 
 .cl-faq__question {
@@ -1719,7 +1737,7 @@ html {
   transition: transform 0.3s ease, border-color 0.2s;
 }
 
-.cl-faq__item[open] > .cl-faq__question::after {
+.cl-faq__card[open] > .cl-faq__question::after {
   transform: translateY(-30%) rotate(-135deg);
   border-color: var(--cl-accent);
 }
@@ -1930,7 +1948,6 @@ html {
   color: var(--cl-muted);
   font-size: 0.88rem;
   line-height: 1.7;
-  max-width: 700px;
 }
 
 /* ═══════════════════════════════════════════════════════════════════