From 6f85b8c9311ced8bc1230284cf34814e8f945759 Mon Sep 17 00:00:00 2001 From: DPN MW Date: Sun, 8 Mar 2026 02:30:47 -0400 Subject: [PATCH] Bug fixes for system crash --- .../community-landing-admin-tabs.js | 41 +++++++-- .../stylesheets/community_landing/landing.css | 35 +++----- config/locales/en.yml | 27 ++++-- config/settings.yml | 53 ++++++++--- lib/community_landing/page_builder.rb | 14 +-- lib/community_landing/style_builder.rb | 88 ++++++++++++++----- 6 files changed, 175 insertions(+), 83 deletions(-) diff --git a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js index 6a272a1..6141b0c 100644 --- a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js +++ b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js @@ -16,8 +16,10 @@ const TABS = [ id: "navbar", label: "Navbar", settings: new Set([ - "navbar_signin_label", "navbar_signin_enabled", "navbar_signin_color", - "navbar_join_label", "navbar_join_enabled", "navbar_join_color", + "navbar_signin_label", "navbar_signin_enabled", + "navbar_signin_color_dark", "navbar_signin_color_light", + "navbar_join_label", "navbar_join_enabled", + "navbar_join_color_dark", "navbar_join_color_light", "navbar_bg_color", "navbar_border_style" ]) }, @@ -26,16 +28,19 @@ const TABS = [ label: "Hero", settings: new Set([ "hero_title", "hero_accent_word", "hero_subtitle", - "hero_card_enabled", "hero_image_first", "hero_content_width", + "hero_card_enabled", "hero_image_first", "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_primary_btn_color_dark", "hero_primary_btn_color_light", + "hero_secondary_btn_color_dark", "hero_secondary_btn_color_light", "hero_video_url", "hero_video_button_color", "hero_video_blur_on_hover", "hero_bg_dark", "hero_bg_light", "hero_min_height", "hero_border_style", "hero_card_bg_dark", "hero_card_bg_light", "hero_card_opacity", "contributors_enabled", "contributors_title", "contributors_title_enabled", "contributors_count_label", "contributors_count_label_enabled", - "contributors_alignment", "contributors_pill_max_width", "contributors_pill_bg_color", + "contributors_alignment", "contributors_pill_max_width", + "contributors_pill_bg_dark", "contributors_pill_bg_light", "contributors_days", "contributors_count" ]) }, @@ -48,6 +53,7 @@ const TABS = [ "stat_icon_color", "stat_icon_bg_color", "stat_icon_shape", "stat_counter_color", "stat_members_label", "stat_topics_label", "stat_posts_label", "stat_likes_label", "stat_chats_label", "stat_round_numbers", + "stat_card_bg_dark", "stat_card_bg_light", "stats_bg_dark", "stats_bg_light", "stats_min_height", "stats_border_style" ]) }, @@ -57,7 +63,8 @@ const TABS = [ settings: new Set([ "about_enabled", "about_heading_enabled", "about_heading", "about_title", "about_role", "about_body", "about_image_url", - "about_card_color", "about_background_image_url", + "about_card_color_dark", "about_card_color_light", + "about_background_image_url", "about_bg_dark", "about_bg_light", "about_min_height", "about_border_style" ]) }, @@ -66,7 +73,7 @@ const TABS = [ label: "Trending", settings: new Set([ "topics_enabled", "topics_title_enabled", "topics_title", "topics_count", - "topics_card_bg_color", + "topics_card_bg_dark", "topics_card_bg_light", "topics_bg_dark", "topics_bg_light", "topics_min_height", "topics_border_style" ]) }, @@ -75,7 +82,8 @@ const TABS = [ label: "Spaces", settings: new Set([ "groups_enabled", "groups_title_enabled", "groups_title", "groups_count", - "groups_selected", "groups_card_bg_color", + "groups_selected", + "groups_card_bg_dark", "groups_card_bg_light", "groups_bg_dark", "groups_bg_light", "groups_min_height", "groups_border_style" ]) }, @@ -102,15 +110,32 @@ const TABS = [ } ]; -// Dark/light background pairs — light row gets merged into dark row +// Dark/light color pairs — light row gets merged into dark row (same-row display) const BG_PAIRS = [ + // Navbar + ["navbar_signin_color_dark", "navbar_signin_color_light"], + ["navbar_join_color_dark", "navbar_join_color_light"], + // Hero + ["hero_primary_btn_color_dark", "hero_primary_btn_color_light"], + ["hero_secondary_btn_color_dark", "hero_secondary_btn_color_light"], ["hero_bg_dark", "hero_bg_light"], ["hero_card_bg_dark", "hero_card_bg_light"], + ["contributors_pill_bg_dark", "contributors_pill_bg_light"], + // Stats + ["stat_card_bg_dark", "stat_card_bg_light"], ["stats_bg_dark", "stats_bg_light"], + // About + ["about_card_color_dark", "about_card_color_light"], ["about_bg_dark", "about_bg_light"], + // Trending + ["topics_card_bg_dark", "topics_card_bg_light"], ["topics_bg_dark", "topics_bg_light"], + // Spaces + ["groups_card_bg_dark", "groups_card_bg_light"], ["groups_bg_dark", "groups_bg_light"], + // App CTA ["app_cta_bg_dark", "app_cta_bg_light"], + // Footer ["footer_bg_dark", "footer_bg_light"], ]; diff --git a/assets/stylesheets/community_landing/landing.css b/assets/stylesheets/community_landing/landing.css index 8b6cefe..ec361e0 100644 --- a/assets/stylesheets/community_landing/landing.css +++ b/assets/stylesheets/community_landing/landing.css @@ -310,19 +310,20 @@ } .cl-btn--primary { - background: var(--cl-accent); + background: var(--cl-primary-btn-bg, var(--cl-accent)); color: #fff; box-shadow: 0 4px 15px var(--cl-accent-glow); } .cl-btn--primary:hover { - background: var(--cl-accent-hover); + background: var(--cl-primary-btn-bg, var(--cl-accent-hover)); + filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 25px var(--cl-accent-glow); } .cl-btn--ghost { - background: var(--cl-glass); + background: var(--cl-secondary-btn-bg, var(--cl-glass)); color: var(--cl-text-strong); border: 1px solid var(--cl-glass-border); backdrop-filter: var(--cl-blur); @@ -330,7 +331,7 @@ } .cl-btn--ghost:hover { - background: var(--cl-accent-subtle); + background: var(--cl-secondary-btn-bg, var(--cl-accent-subtle)); border-color: var(--cl-accent); transform: translateY(-2px); } @@ -499,21 +500,23 @@ } .cl-navbar__link.cl-btn--primary { - background: var(--cl-accent); + background: var(--cl-navbar-join-bg, var(--cl-accent)); color: #fff; } .cl-navbar__link.cl-btn--primary:hover { - background: var(--cl-accent-hover); + background: var(--cl-navbar-join-bg, var(--cl-accent-hover)); + filter: brightness(1.1); } .cl-navbar__link.cl-btn--ghost { - border: 1px solid var(--cl-border); + border: 1px solid var(--cl-navbar-signin-color, var(--cl-border)); + color: var(--cl-navbar-signin-color, var(--cl-text-strong)); } .cl-navbar__link.cl-btn--ghost:hover { background: var(--cl-accent-subtle); - border-color: var(--cl-border-hover); + border-color: var(--cl-navbar-signin-color, var(--cl-border-hover)); } /* Theme Toggle */ @@ -637,18 +640,6 @@ 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; @@ -946,7 +937,7 @@ align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; - background: var(--cl-card); + background: var(--cl-stat-card-bg, var(--cl-card)); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm); backdrop-filter: var(--cl-blur); @@ -1287,7 +1278,7 @@ padding: 0.6rem 1.25rem 0.6rem 0.6rem; width: 100%; max-width: 340px; - background: var(--cl-card); + background: var(--cl-pill-bg, var(--cl-card)); border: 1px solid var(--cl-border); border-radius: 14px; text-decoration: none; diff --git a/config/locales/en.yml b/config/locales/en.yml index a44d73e..7e98d9e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -21,10 +21,12 @@ en: # ── 1. Navbar ── navbar_signin_label: "━━ ROW 1: NAVBAR ━━ — Fixed navigation bar at the top with logo, theme toggle, sign-in link, and join button. This setting controls the sign-in link text." navbar_signin_enabled: "Show the sign-in link in the navbar." - navbar_signin_color: "Custom color for the sign-in link text and border. Leave blank for default." + navbar_signin_color_dark: "Sign-in link color. Dark (left) and light (right) pickers. Leave blank for default." + navbar_signin_color_light: "Light mode color for the sign-in link." navbar_join_label: "Text for the join/register CTA button in the navbar." navbar_join_enabled: "Show the join/register button in the navbar." - navbar_join_color: "Custom background color for the join button. Leave blank to use the accent color." + navbar_join_color_dark: "Join button background color. Dark (left) and light (right) pickers. Leave blank for accent color." + navbar_join_color_light: "Light mode background for the join button." navbar_bg_color: "Custom background color for the navbar when scrolled. Leave blank for the default frosted glass effect." navbar_border_style: "Border style at the bottom of the navbar when scrolled." @@ -34,7 +36,6 @@ en: hero_subtitle: "Supporting text below the hero headline. Describe your community's purpose or value proposition." hero_card_enabled: "Display the hero content inside a rounded card container with border and shadow. When off, the hero uses a flat full-width layout." hero_image_first: "Show the hero image above the text on mobile and to the left on desktop. When off, text appears first (default)." - hero_content_width: "Width of the text column as a percentage (20–80). The image column fills the remaining space. Default 50 gives equal columns." hero_background_image_url: "Full-bleed background image behind the hero section. In card mode, fills the card with a dark overlay. In flat mode, covers the entire section." hero_image_urls: "Images displayed on the right side of the hero. Add up to 5 URLs — a random one is shown on each page load." hero_image_max_height: "Maximum height in pixels for the hero image (100–1200)." @@ -44,6 +45,10 @@ en: hero_secondary_button_enabled: "Show the secondary CTA button in the hero section." hero_secondary_button_label: "Text on the secondary (outlined) CTA button." hero_secondary_button_url: "URL the secondary button links to." + hero_primary_btn_color_dark: "Primary button background color. Dark (left) and light (right) pickers. Leave blank for accent color." + hero_primary_btn_color_light: "Light mode background for the primary button." + hero_secondary_btn_color_dark: "Secondary button background color. Dark (left) and light (right) pickers. Leave blank for default glass style." + hero_secondary_btn_color_light: "Light mode background for the secondary button." hero_video_url: "URL for a hero video. Supports MP4 and YouTube links. A play button appears in the hero area; clicking opens a lightbox modal with the video." hero_video_button_color: "Custom background color for the hero video play button. Leave blank to use the accent color." hero_video_blur_on_hover: "Apply a blur effect to the hero image when hovering the play button." @@ -71,6 +76,8 @@ en: stat_likes_label: "Custom label for the Likes stat card." stat_chats_label: "Custom label for the Chats stat card. Shows total chat messages if the Chat plugin is active." stat_round_numbers: "Round large numbers for a cleaner display: 1000 becomes 1K, 12345 becomes 12.3K, 1234567 becomes 1.2M." + stat_card_bg_dark: "Stat card background color. Dark (left) and light (right) pickers. Leave blank for default card styling." + stat_card_bg_light: "Light mode background for stat cards." stats_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default." stats_bg_light: "Light mode background for the stats section." stats_min_height: "Minimum height for the stats section in pixels. Set to 0 for auto height." @@ -84,8 +91,9 @@ en: about_role: "Subtitle below the author name (e.g. 'Community Manager'). If blank, the site name is used." about_body: "Main body text for the About card. Supports basic HTML: p, a, strong, em, ul, li, br." about_image_url: "Small avatar image shown next to the author name. Square images work best." - about_card_color: "Background color for the About card. Leave blank for the default theme color." - about_background_image_url: "Background image layered on top of the gradient. Use a subtle pattern or texture." + about_card_color_dark: "About card background color. Dark (left) and light (right) pickers. Leave blank for default theme color." + about_card_color_light: "Light mode background for the About card." + about_background_image_url: "Background image layered on top of the card color. Use a subtle pattern or texture." about_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default." about_bg_light: "Light mode background for the about section." about_min_height: "Minimum height for the about section in pixels. Set to 0 for auto height." @@ -96,7 +104,8 @@ en: topics_title_enabled: "Show the section heading above the trending topic cards." topics_title: "Heading text above the scrollable topic cards." topics_count: "Number of trending topic cards to display." - topics_card_bg_color: "Background color for each trending topic card. Leave blank for default card styling." + topics_card_bg_dark: "Topic card background color. Dark (left) and light (right) pickers. Leave blank for default card styling." + topics_card_bg_light: "Light mode background for topic cards." topics_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default." topics_bg_light: "Light mode background for the trending section." topics_min_height: "Minimum height for the trending section in pixels. Set to 0 for auto height." @@ -110,7 +119,8 @@ en: contributors_count_label_enabled: "Show the count label prefix before each creator's activity count." contributors_alignment: "Horizontal alignment of the creators list: center or left." contributors_pill_max_width: "Maximum width in pixels for each creator pill card (200–600)." - contributors_pill_bg_color: "Custom background color for creator pill cards. Leave blank for default glass card styling." + contributors_pill_bg_dark: "Creator pill background color. Dark (left) and light (right) pickers. Leave blank for default glass styling." + contributors_pill_bg_light: "Light mode background for creator pills." contributors_days: "Lookback period in days for calculating top contributors." contributors_count: "Number of top contributors to fetch (top 3 are shown in the hero)." @@ -120,7 +130,8 @@ en: groups_title: "Heading text above the group cards." groups_count: "Number of group cards to display." groups_selected: "Show only specific groups. Enter group names separated by pipes (e.g. designers|developers|artists). Leave blank to auto-select public groups." - groups_card_bg_color: "Background color for each space card. Leave blank for default card styling." + groups_card_bg_dark: "Space card background color. Dark (left) and light (right) pickers. Leave blank for default card styling." + groups_card_bg_light: "Light mode background for space cards." groups_bg_dark: "Section background color override. Dark (left) and light (right) color pickers. Leave blank for default." groups_bg_light: "Light mode background for the spaces section." groups_min_height: "Minimum height for the spaces section in pixels. Set to 0 for auto height." diff --git a/config/settings.yml b/config/settings.yml index 5197710..b79aea2 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -80,7 +80,10 @@ plugins: navbar_signin_enabled: default: true type: bool - navbar_signin_color: + navbar_signin_color_dark: + default: "" + type: color + navbar_signin_color_light: default: "" type: color navbar_join_label: @@ -89,7 +92,10 @@ plugins: navbar_join_enabled: default: true type: bool - navbar_join_color: + navbar_join_color_dark: + default: "" + type: color + navbar_join_color_light: default: "" type: color navbar_bg_color: @@ -124,11 +130,6 @@ plugins: hero_image_first: default: false type: bool - hero_content_width: - default: 50 - type: integer - min: 20 - max: 80 hero_background_image_url: default: "" type: string @@ -158,6 +159,18 @@ plugins: hero_secondary_button_url: default: "/login" type: string + hero_primary_btn_color_dark: + default: "" + type: color + hero_primary_btn_color_light: + default: "" + type: color + hero_secondary_btn_color_dark: + default: "" + type: color + hero_secondary_btn_color_light: + default: "" + type: color hero_video_url: default: "" type: string @@ -252,6 +265,12 @@ plugins: stat_round_numbers: default: false type: bool + stat_card_bg_dark: + default: "" + type: color + stat_card_bg_light: + default: "" + type: color stats_bg_dark: default: "" type: color @@ -296,7 +315,10 @@ plugins: about_image_url: default: "" type: string - about_card_color: + about_card_color_dark: + default: "" + type: color + about_card_color_light: default: "" type: color about_background_image_url: @@ -337,7 +359,10 @@ plugins: topics_count: default: 5 type: integer - topics_card_bg_color: + topics_card_bg_dark: + default: "" + type: color + topics_card_bg_light: default: "" type: color topics_bg_dark: @@ -389,7 +414,10 @@ plugins: type: integer min: 200 max: 600 - contributors_pill_bg_color: + contributors_pill_bg_dark: + default: "" + type: color + contributors_pill_bg_light: default: "" type: color contributors_days: @@ -417,7 +445,10 @@ plugins: groups_selected: default: "" type: list - groups_card_bg_color: + groups_card_bg_dark: + default: "" + type: color + groups_card_bg_light: default: "" type: color groups_bg_dark: diff --git a/lib/community_landing/page_builder.rb b/lib/community_landing/page_builder.rb index f3bbf28..24c61ec 100644 --- a/lib/community_landing/page_builder.rb +++ b/lib/community_landing/page_builder.rb @@ -102,18 +102,14 @@ module CommunityLanding signin_enabled = @s.navbar_signin_enabled rescue true join_enabled = @s.navbar_join_enabled rescue true - signin_color = hex(@s.navbar_signin_color) rescue nil - join_color = hex(@s.navbar_join_color) rescue nil html << "
" html << theme_toggle if signin_enabled - signin_style = signin_color ? " style=\"color: #{signin_color}; border-color: #{signin_color}\"" : "" - html << "#{e(signin_label)}\n" + html << "#{e(signin_label)}\n" end if join_enabled - join_style = join_color ? " style=\"background: #{join_color}; border-color: #{join_color}\"" : "" - html << "#{e(join_label)}\n" + html << "#{e(join_label)}\n" end html << "
" @@ -135,7 +131,6 @@ module CommunityLanding hero_bg_img = @s.hero_background_image_url.presence hero_border = @s.hero_border_style rescue "none" hero_min_h = @s.hero_min_height rescue 0 - content_w = @s.hero_content_width rescue 50 site_name = @s.title html = +"" @@ -144,7 +139,6 @@ module CommunityLanding hero_style_parts << "background-image: url('#{hero_bg_img}');" if hero_bg_img hero_style_parts << "border-bottom: 1px #{hero_border} var(--cl-border);" if hero_border.present? && hero_border != "none" hero_style_parts << "min-height: #{hero_min_h}px;" if hero_min_h.to_i > 0 - hero_style_parts << "--cl-hero-content-w: #{content_w.to_i}%;" if content_w.to_i != 50 hero_attr = hero_style_parts.any? ? " style=\"#{hero_style_parts.join(' ')}\"" : "" hero_classes = "cl-hero" hero_classes << " cl-hero--card" if hero_card @@ -161,7 +155,7 @@ module CommunityLanding target = accent_idx > 0 ? [accent_idx - 1, title_words.length - 1].min : title_words.length - 1 before = title_words[0...target] accent = title_words[target] - after = title_words[(target + 1)..] + after = title_words[(target + 1)..-1] || [] parts = +"" parts << "#{e(before.join(' '))} " if before.any? parts << "#{e(accent)}" @@ -198,7 +192,6 @@ module CommunityLanding show_count_label = @s.contributors_count_label_enabled rescue true alignment = @s.contributors_alignment rescue "center" pill_max_w = @s.contributors_pill_max_width rescue 340 - pill_bg = hex(@s.contributors_pill_bg_color) rescue nil align_class = alignment == "left" ? " cl-hero__creators--left" : "" html << "
\n" @@ -210,7 +203,6 @@ module CommunityLanding count_prefix = show_count_label && count_label.present? ? "#{e(count_label)} " : "" pill_style_parts = ["--rank-color: #{rank_color}"] pill_style_parts << "max-width: #{pill_max_w}px" if pill_max_w.to_i != 340 - pill_style_parts << "background: #{pill_bg}" if pill_bg html << "\n" html << "Ranked ##{idx + 1}\n" html << "\"#{e(user.username)}\"\n" diff --git a/lib/community_landing/style_builder.rb b/lib/community_landing/style_builder.rb index 88c3764..db77879 100644 --- a/lib/community_landing/style_builder.rb +++ b/lib/community_landing/style_builder.rb @@ -15,37 +15,74 @@ module CommunityLanding dark_bg = hex(@s.dark_bg_color) || "#06060f" light_bg = hex(@s.light_bg_color) || "#faf6f0" stat_icon = hex(@s.stat_icon_color) || accent - about_card = hex(@s.about_card_color.presence) rescue nil about_bg_img = @s.about_background_image_url.presence app_g1 = hex(@s.app_cta_gradient_start) || accent app_g2 = hex(@s.app_cta_gradient_mid) || accent_hover app_g3 = hex(@s.app_cta_gradient_end) || accent_hover stat_icon_bg = hex(@s.stat_icon_bg_color.presence) rescue nil stat_counter = hex(@s.stat_counter_color.presence) rescue nil - space_card_bg = hex(@s.groups_card_bg_color.presence) rescue nil - topic_card_bg = hex(@s.topics_card_bg_color.presence) rescue nil - video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil + video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil + + # Hero card bg (hex + opacity → rgba) hero_card_dark = hex(@s.hero_card_bg_dark.presence) rescue nil hero_card_light = hex(@s.hero_card_bg_light.presence) rescue nil hero_card_opacity = [[@s.hero_card_opacity.to_s.to_f, 0].max, 1].min rescue 0.85 hero_card_opacity = 0.85 if hero_card_opacity == 0.0 && (@s.hero_card_opacity.to_s.strip.empty? rescue true) - accent_rgb = hex_to_rgb(accent) + + # Dark/light element colors + navbar_signin_dark = safe_hex(:navbar_signin_color_dark) + navbar_signin_light = safe_hex(:navbar_signin_color_light) + navbar_join_dark = safe_hex(:navbar_join_color_dark) + navbar_join_light = safe_hex(:navbar_join_color_light) + primary_btn_dark = safe_hex(:hero_primary_btn_color_dark) + primary_btn_light = safe_hex(:hero_primary_btn_color_light) + secondary_btn_dark = safe_hex(:hero_secondary_btn_color_dark) + secondary_btn_light = safe_hex(:hero_secondary_btn_color_light) + pill_bg_dark = safe_hex(:contributors_pill_bg_dark) + pill_bg_light = safe_hex(:contributors_pill_bg_light) + stat_card_dark = safe_hex(:stat_card_bg_dark) + stat_card_light = safe_hex(:stat_card_bg_light) + about_card_dark = safe_hex(:about_card_color_dark) + about_card_light = safe_hex(:about_card_color_light) + topic_card_dark = safe_hex(:topics_card_bg_dark) + topic_card_light = safe_hex(:topics_card_bg_light) + space_card_dark = safe_hex(:groups_card_bg_dark) + space_card_light = safe_hex(:groups_card_bg_light) + + accent_rgb = hex_to_rgb(accent) stat_icon_rgb = hex_to_rgb(stat_icon) stat_icon_bg_val = stat_icon_bg || "rgba(#{stat_icon_rgb}, 0.1)" stat_counter_val = stat_counter || "var(--cl-text-strong)" - space_card_bg_val = space_card_bg || "var(--cl-card)" - topic_card_bg_val = topic_card_bg || "var(--cl-card)" - # Hero card bg: convert hex + opacity to rgba - hero_card_dark_rgb = hero_card_dark ? hex_to_rgb(hero_card_dark) : "12, 12, 25" + # Hero card bg rgba + hero_card_dark_rgb = hero_card_dark ? hex_to_rgb(hero_card_dark) : "12, 12, 25" hero_card_light_rgb = hero_card_light ? hex_to_rgb(hero_card_light) : "255, 255, 255" - hero_card_dark_val = "rgba(#{hero_card_dark_rgb}, #{hero_card_opacity})" + hero_card_dark_val = "rgba(#{hero_card_dark_rgb}, #{hero_card_opacity})" hero_card_light_val = "rgba(#{hero_card_light_rgb}, #{hero_card_opacity})" - about_card_val = about_card || "var(--cl-card)" - about_card_css = about_bg_img ? "#{about_card_val}, url('#{about_bg_img}') center/cover no-repeat" : about_card_val - video_btn_line = video_btn_bg ? "\n --cl-video-btn-bg: #{video_btn_bg};" : "" + # About card with optional background image + about_dark_val = about_card_dark || "var(--cl-card)" + about_light_val = about_card_light || "var(--cl-card)" + about_dark_css = about_bg_img ? "#{about_dark_val}, url('#{about_bg_img}') center/cover no-repeat" : about_dark_val + about_light_css = about_bg_img ? "#{about_light_val}, url('#{about_bg_img}') center/cover no-repeat" : about_light_val + + # Build optional lines (only emitted when a custom color is set) + dark_extras = +"" + dark_extras << "\n --cl-navbar-signin-color: #{navbar_signin_dark};" if navbar_signin_dark + dark_extras << "\n --cl-navbar-join-bg: #{navbar_join_dark};" if navbar_join_dark + dark_extras << "\n --cl-primary-btn-bg: #{primary_btn_dark};" if primary_btn_dark + dark_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_dark};" if secondary_btn_dark + dark_extras << "\n --cl-pill-bg: #{pill_bg_dark};" if pill_bg_dark + dark_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg + + light_extras = +"" + light_extras << "\n --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark + light_extras << "\n --cl-navbar-join-bg: #{navbar_join_light || navbar_join_dark};" if navbar_join_light || navbar_join_dark + light_extras << "\n --cl-primary-btn-bg: #{primary_btn_light || primary_btn_dark};" if primary_btn_light || primary_btn_dark + light_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_light || secondary_btn_dark};" if secondary_btn_light || secondary_btn_dark + light_extras << "\n --cl-pill-bg: #{pill_bg_light || pill_bg_dark};" if pill_bg_light || pill_bg_dark + light_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg "\n"