mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
Major overhaul and options inclusion
This commit is contained in:
@@ -211,4 +211,19 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 8. FAQ EXCLUSIVE ACCORDION
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
$$("details[data-faq-exclusive]").forEach(function (detail) {
|
||||
detail.addEventListener("toggle", function () {
|
||||
if (detail.open) {
|
||||
$$("details[data-faq-exclusive]").forEach(function (other) {
|
||||
if (other !== detail && other.open) {
|
||||
other.removeAttribute("open");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
@@ -6,6 +6,8 @@ const TABS = [
|
||||
label: "Settings",
|
||||
settings: new Set([
|
||||
"community_landing_enabled",
|
||||
"section_order", "custom_css",
|
||||
"meta_description", "og_image_url", "favicon_url", "json_ld_enabled",
|
||||
"logo_dark_url", "logo_light_url", "logo_height", "footer_logo_url",
|
||||
"accent_color", "accent_hover_color", "dark_bg_color", "light_bg_color",
|
||||
"scroll_animation", "staggered_reveal_enabled", "dynamic_background_enabled",
|
||||
@@ -20,7 +22,9 @@ const TABS = [
|
||||
"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"
|
||||
"navbar_bg_color", "navbar_border_style",
|
||||
"social_twitter_url", "social_facebook_url", "social_instagram_url",
|
||||
"social_youtube_url", "social_tiktok_url", "social_github_url"
|
||||
])
|
||||
},
|
||||
{
|
||||
@@ -44,6 +48,18 @@ const TABS = [
|
||||
"contributors_days", "contributors_count"
|
||||
])
|
||||
},
|
||||
{
|
||||
id: "participation",
|
||||
label: "Participation",
|
||||
settings: new Set([
|
||||
"participation_enabled", "participation_title_enabled",
|
||||
"participation_title", "participation_bio_max_length",
|
||||
"participation_icon_color",
|
||||
"participation_card_bg_dark", "participation_card_bg_light",
|
||||
"participation_bg_dark", "participation_bg_light",
|
||||
"participation_min_height", "participation_border_style"
|
||||
])
|
||||
},
|
||||
{
|
||||
id: "stats",
|
||||
label: "Stats",
|
||||
@@ -79,12 +95,14 @@ const TABS = [
|
||||
},
|
||||
{
|
||||
id: "groups",
|
||||
label: "Spaces",
|
||||
label: "Spaces & FAQ",
|
||||
settings: new Set([
|
||||
"groups_enabled", "groups_title_enabled", "groups_title", "groups_count",
|
||||
"groups_selected",
|
||||
"groups_show_description", "groups_description_max_length",
|
||||
"groups_card_bg_dark", "groups_card_bg_light",
|
||||
"groups_bg_dark", "groups_bg_light", "groups_min_height", "groups_border_style"
|
||||
"groups_bg_dark", "groups_bg_light", "groups_min_height", "groups_border_style",
|
||||
"faq_enabled", "faq_title_enabled", "faq_title", "faq_items"
|
||||
])
|
||||
},
|
||||
{
|
||||
@@ -95,7 +113,9 @@ const TABS = [
|
||||
"ios_app_badge_image_url", "android_app_badge_image_url",
|
||||
"app_badge_height", "app_badge_style",
|
||||
"app_cta_headline", "app_cta_subtext",
|
||||
"app_cta_gradient_start", "app_cta_gradient_mid", "app_cta_gradient_end",
|
||||
"app_cta_gradient_start_dark", "app_cta_gradient_start_light",
|
||||
"app_cta_gradient_mid_dark", "app_cta_gradient_mid_light",
|
||||
"app_cta_gradient_end_dark", "app_cta_gradient_end_light",
|
||||
"app_cta_image_url",
|
||||
"app_cta_bg_dark", "app_cta_bg_light", "app_cta_min_height", "app_cta_border_style"
|
||||
])
|
||||
@@ -121,6 +141,9 @@ const BG_PAIRS = [
|
||||
["hero_bg_dark", "hero_bg_light"],
|
||||
["hero_card_bg_dark", "hero_card_bg_light"],
|
||||
["contributors_pill_bg_dark", "contributors_pill_bg_light"],
|
||||
// Participation
|
||||
["participation_card_bg_dark", "participation_card_bg_light"],
|
||||
["participation_bg_dark", "participation_bg_light"],
|
||||
// Stats
|
||||
["stat_card_bg_dark", "stat_card_bg_light"],
|
||||
["stats_bg_dark", "stats_bg_light"],
|
||||
@@ -134,6 +157,9 @@ const BG_PAIRS = [
|
||||
["groups_card_bg_dark", "groups_card_bg_light"],
|
||||
["groups_bg_dark", "groups_bg_light"],
|
||||
// App CTA
|
||||
["app_cta_gradient_start_dark", "app_cta_gradient_start_light"],
|
||||
["app_cta_gradient_mid_dark", "app_cta_gradient_mid_light"],
|
||||
["app_cta_gradient_end_dark", "app_cta_gradient_end_light"],
|
||||
["app_cta_bg_dark", "app_cta_bg_light"],
|
||||
// Footer
|
||||
["footer_bg_dark", "footer_bg_light"],
|
||||
@@ -159,8 +185,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;
|
||||
// Skip rows inside a merge wrapper — handled at wrapper level
|
||||
if (row.closest(".cl-merge-wrapper")) return;
|
||||
const name = row.getAttribute("data-setting");
|
||||
row.classList.toggle(
|
||||
"cl-tab-hidden",
|
||||
@@ -168,6 +194,17 @@ function applyTabFilter() {
|
||||
);
|
||||
});
|
||||
|
||||
// Handle merge wrappers — show/hide based on dark row's setting
|
||||
container.querySelectorAll(".cl-merge-wrapper").forEach((wrapper) => {
|
||||
const darkRow = wrapper.querySelector(".cl-merged-dark");
|
||||
if (!darkRow) return;
|
||||
const name = darkRow.getAttribute("data-setting");
|
||||
wrapper.classList.toggle(
|
||||
"cl-tab-hidden",
|
||||
!filterActive && !tab.settings.has(name)
|
||||
);
|
||||
});
|
||||
|
||||
// Update filter-active dimming on native nav or standalone tab bar
|
||||
const nativeNav = document.querySelector(".d-nav-submenu__tabs");
|
||||
if (nativeNav) {
|
||||
@@ -256,6 +293,17 @@ function cleanupTabs() {
|
||||
container.querySelectorAll(".cl-tab-hidden").forEach((el) => {
|
||||
el.classList.remove("cl-tab-hidden");
|
||||
});
|
||||
|
||||
// Unwrap merge wrappers — restore rows to their original position
|
||||
container.querySelectorAll(".cl-merge-wrapper").forEach((wrapper) => {
|
||||
const parent = wrapper.parentNode;
|
||||
while (wrapper.firstChild) {
|
||||
const child = wrapper.firstChild;
|
||||
child.classList.remove("cl-merged-dark", "cl-merged-light");
|
||||
parent.insertBefore(child, wrapper);
|
||||
}
|
||||
wrapper.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Reset state
|
||||
@@ -264,8 +312,9 @@ function cleanupTabs() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge dark/light bg color pairs into a single row.
|
||||
* Moves the light setting-value into the dark row and hides the light row.
|
||||
* Merge dark/light bg color pairs into a single visual row.
|
||||
* Uses a CSS wrapper approach — both rows stay intact in the DOM
|
||||
* (preserving Ember bindings and undo/reset buttons).
|
||||
*/
|
||||
function mergeBgPairs() {
|
||||
const container = getContainer();
|
||||
@@ -276,55 +325,41 @@ function mergeBgPairs() {
|
||||
const lightRow = container.querySelector(`.row.setting[data-setting="${lightName}"]`);
|
||||
if (!darkRow || !lightRow) return;
|
||||
// Already merged
|
||||
if (darkRow.querySelector(".cl-merged-value")) return;
|
||||
if (darkRow.classList.contains("cl-merged-dark")) 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")
|
||||
// Rename the dark row label (remove " dark" suffix)
|
||||
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
|
||||
// Add "Dark" / "Light" labels to each row's setting-value
|
||||
const darkValue = darkRow.querySelector(".setting-value");
|
||||
if (!darkValue) return;
|
||||
const lightValue = lightRow.querySelector(".setting-value");
|
||||
if (darkValue && !darkValue.querySelector(".cl-color-col__label")) {
|
||||
const lbl = document.createElement("span");
|
||||
lbl.className = "cl-color-col__label";
|
||||
lbl.textContent = "Dark";
|
||||
darkValue.insertBefore(lbl, darkValue.firstChild);
|
||||
}
|
||||
if (lightValue && !lightValue.querySelector(".cl-color-col__label")) {
|
||||
const lbl = document.createElement("span");
|
||||
lbl.className = "cl-color-col__label";
|
||||
lbl.textContent = "Light";
|
||||
lightValue.insertBefore(lbl, lightValue.firstChild);
|
||||
}
|
||||
|
||||
// Wrap existing dark value
|
||||
// Wrap both rows in a flex container
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "cl-merged-value";
|
||||
wrapper.className = "cl-merge-wrapper";
|
||||
darkRow.parentNode.insertBefore(wrapper, darkRow);
|
||||
wrapper.appendChild(darkRow);
|
||||
wrapper.appendChild(lightRow);
|
||||
|
||||
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";
|
||||
// Mark rows for CSS styling
|
||||
darkRow.classList.add("cl-merged-dark");
|
||||
lightRow.classList.add("cl-merged-light");
|
||||
// Light row is NOT hidden — it stays in the DOM with full Ember bindings
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -82,16 +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) ── */
|
||||
/* ── Merged dark/light color pairs (wrapper approach) ── */
|
||||
|
||||
.cl-merged-value {
|
||||
.cl-merge-wrapper {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.cl-color-col {
|
||||
.cl-merge-wrapper > .row.setting {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide the light row's label + description — dark row's label covers both */
|
||||
.cl-merge-wrapper > .cl-merged-light > .setting-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cl-merge-wrapper > .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 {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.cl-color-col__label {
|
||||
@@ -105,9 +124,13 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.cl-merged-value {
|
||||
.cl-merge-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cl-merge-wrapper > .cl-merged-light > .setting-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,6 +148,12 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
|
||||
|
||||
/* All plugin settings spacing */
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="community_landing_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="section_order"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="custom_css"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="meta_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="og_image_url"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="favicon_url"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="json_ld_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="logo_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="accent_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="dark_bg_color"],
|
||||
@@ -137,25 +166,34 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="about_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="topics_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="contributors_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="participation_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="groups_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="faq_"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting^="ios_"],
|
||||
.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_"] {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Section separator borders (fallback only) */
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="section_order"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="custom_css"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="meta_description"],
|
||||
.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="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"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="participation_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="faq_enabled"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
||||
.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"] {
|
||||
border-top: 2px solid rgba(0, 0, 0, 0.12);
|
||||
@@ -164,18 +202,23 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
|
||||
}
|
||||
|
||||
/* Dark mode separators (fallback only) */
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="section_order"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="custom_css"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="meta_description"],
|
||||
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="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"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="participation_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="faq_enabled"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"],
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="custom_css"] {
|
||||
html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"] {
|
||||
border-top-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
|
||||
@@ -125,10 +125,49 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Smooth Scroll ── */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ── Focus-visible Accessibility ── */
|
||||
.cl-body a:focus-visible,
|
||||
.cl-body button:focus-visible,
|
||||
.cl-body [role="button"]:focus-visible,
|
||||
.cl-body summary:focus-visible {
|
||||
outline: 2px solid var(--cl-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cl-body .cl-btn:focus-visible {
|
||||
outline: 2px solid var(--cl-accent);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 4px var(--cl-accent-glow);
|
||||
}
|
||||
|
||||
.cl-body .cl-topic-card:focus-visible,
|
||||
.cl-body .cl-space-card:focus-visible,
|
||||
.cl-body .cl-participation-card:focus-visible,
|
||||
.cl-body .cl-stat-card:focus-visible,
|
||||
.cl-body .cl-creator-pill:focus-visible {
|
||||
outline: 2px solid var(--cl-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cl-body .cl-theme-toggle:focus-visible {
|
||||
outline: 2px solid var(--cl-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cl-body .cl-navbar__hamburger:focus-visible {
|
||||
outline: 2px solid var(--cl-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Background FX ── */
|
||||
.cl-orb-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
@@ -394,6 +433,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl-navbar__brand {
|
||||
@@ -413,6 +454,9 @@
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cl-navbar__right {
|
||||
@@ -430,6 +474,7 @@
|
||||
.cl-navbar__hamburger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -572,6 +617,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Social Icons ── */
|
||||
.cl-social-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.cl-social-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: var(--cl-muted);
|
||||
transition: color 0.2s, background 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cl-social-icon:hover {
|
||||
color: var(--cl-accent);
|
||||
background: var(--cl-accent-subtle);
|
||||
}
|
||||
|
||||
.cl-social-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cl-navbar__mobile-menu .cl-social-icons {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cl-navbar__mobile-menu .cl-social-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.cl-navbar__mobile-menu .cl-social-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Logo theme switching */
|
||||
.cl-logo--light {
|
||||
display: none;
|
||||
@@ -737,7 +825,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 0 var(--cl-accent-glow);
|
||||
--_play-glow: var(--cl-video-btn-glow, var(--cl-accent-glow));
|
||||
box-shadow: 0 8px 32px var(--_play-glow), 0 0 0 0 var(--_play-glow);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation: cl-play-pulse 2s infinite;
|
||||
}
|
||||
@@ -745,7 +834,7 @@
|
||||
.cl-hero-play:hover {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
background: var(--cl-video-btn-bg, var(--cl-accent-hover));
|
||||
box-shadow: 0 12px 40px var(--cl-accent-glow);
|
||||
box-shadow: 0 12px 40px var(--_play-glow);
|
||||
}
|
||||
|
||||
.cl-hero-play__icon {
|
||||
@@ -761,8 +850,8 @@
|
||||
}
|
||||
|
||||
@keyframes cl-play-pulse {
|
||||
0%, 100% { box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 0 var(--cl-accent-glow); }
|
||||
50% { box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 16px rgba(212, 162, 78, 0); }
|
||||
0%, 100% { box-shadow: 0 8px 32px var(--_play-glow), 0 0 0 0 var(--_play-glow); }
|
||||
50% { box-shadow: 0 8px 32px var(--_play-glow), 0 0 0 16px transparent; }
|
||||
}
|
||||
|
||||
.cl-hero__image--video-only {
|
||||
@@ -1163,6 +1252,105 @@
|
||||
color: var(--cl-muted);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
5b. PARTICIPATION — testimonial-style bio cards
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.cl-participation {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.cl-participation__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.cl-participation__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.cl-participation__grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.cl-participation-card {
|
||||
background: var(--cl-participation-card-bg, var(--cl-card));
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cl-participation-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
border-color: var(--cl-border-hover);
|
||||
}
|
||||
|
||||
.cl-participation-card__quote {
|
||||
color: var(--cl-participation-icon-color, var(--cl-accent));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.cl-participation-card__quote svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cl-participation-card__bio {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
color: var(--cl-text);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cl-participation-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--cl-border);
|
||||
}
|
||||
|
||||
.cl-participation-card__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--cl-participation-icon-color, var(--cl-accent));
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cl-participation-card__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cl-participation-card__name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--cl-text-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cl-participation-card__count {
|
||||
font-size: 0.8rem;
|
||||
color: var(--cl-participation-icon-color, var(--cl-accent));
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
5. TRENDING DISCUSSIONS — 4-per-row grid
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
@@ -1349,36 +1537,49 @@
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
7. COMMUNITY SPACES — compact horizontal pills with accent stripe
|
||||
7. COMMUNITY SPACES + FAQ — split layout
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.cl-spaces {
|
||||
padding: 1.5rem 0 2rem;
|
||||
padding: 2.5rem 0 3rem;
|
||||
}
|
||||
|
||||
/* ── Split layout: groups left, FAQ right ── */
|
||||
.cl-spaces__split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.cl-spaces__full {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cl-spaces__full .cl-faq {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* ── Groups grid (2×2 inside left column) ── */
|
||||
.cl-spaces__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
@media (max-width: 479px) {
|
||||
.cl-spaces__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cl-spaces__grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Group cards ── */
|
||||
.cl-space-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1rem 0.6rem 0.6rem;
|
||||
padding: 0.8rem 1rem;
|
||||
background: var(--cl-space-card-bg, var(--cl-card));
|
||||
border: 1px solid var(--cl-border);
|
||||
border-left: 3px solid var(--space-color);
|
||||
@@ -1408,6 +1609,7 @@
|
||||
flex-shrink: 0;
|
||||
background: var(--space-color);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.cl-space-card:hover .cl-space-card__icon {
|
||||
@@ -1427,7 +1629,6 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Card body */
|
||||
.cl-space-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1451,6 +1652,109 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.cl-space-card__desc {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
color: var(--cl-text);
|
||||
line-height: 1.45;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── FAQ Accordion ── */
|
||||
.cl-faq {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cl-faq__title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: var(--cl-text-strong);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.cl-faq__item {
|
||||
border-bottom: 1px solid var(--cl-border);
|
||||
}
|
||||
|
||||
.cl-faq__item:first-of-type {
|
||||
border-top: 1px solid var(--cl-border);
|
||||
}
|
||||
|
||||
.cl-faq__question {
|
||||
padding: 1rem 2rem 1rem 0;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--cl-text-strong);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cl-faq__question::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cl-faq__question::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Chevron indicator */
|
||||
.cl-faq__question::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid var(--cl-muted);
|
||||
border-bottom: 2px solid var(--cl-muted);
|
||||
transform: translateY(-60%) rotate(45deg);
|
||||
transition: transform 0.3s ease, border-color 0.2s;
|
||||
}
|
||||
|
||||
.cl-faq__item[open] > .cl-faq__question::after {
|
||||
transform: translateY(-30%) rotate(-135deg);
|
||||
border-color: var(--cl-accent);
|
||||
}
|
||||
|
||||
.cl-faq__question:hover {
|
||||
color: var(--cl-accent);
|
||||
}
|
||||
|
||||
.cl-faq__answer {
|
||||
padding: 0 0 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--cl-text);
|
||||
line-height: 1.7;
|
||||
animation: cl-faq-open 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes cl-faq-open {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mobile: stack split vertically ── */
|
||||
@media (max-width: 767px) {
|
||||
.cl-spaces__split {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
8. APP CTA — split layout with gradient
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
@@ -1710,6 +2014,10 @@
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.cl-anim,
|
||||
.cl-hero__content,
|
||||
.cl-hero__image,
|
||||
@@ -1726,4 +2034,8 @@
|
||||
.cl-hero-play {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.cl-faq__answer {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user