// ============================================
// COMBINED JAVASCRIPT - ALL JS FILES
// ============================================
// --- DATA URL (External JSON) ---
const DATA_URL = "https://cdn.glowradi.us/case-study-md/case-studies.json";
// ============================================
// SCRIPT.JS - Index Page Logic
// ============================================
(() => {
const state = {
caseStudies: [],
filteredStudies: [],
currentPage: 1,
pageSize: 6,
activeFilters: {
search: "",
geo: new Set(),
deal: new Set(),
channel: new Set(),
maturity: new Set(),
pain_point: new Set(),
solution_interest: new Set(),
ad_free_only: false
}
};
const elements = {
cardsGrid: document.getElementById("cards-grid"),
countBadge: document.getElementById("count-badge"),
pagination: document.getElementById("pagination"),
noResults: document.getElementById("no-results"),
loadError: document.getElementById("load-error"),
searchInput: document.getElementById("search-input"),
adFreeToggle: document.getElementById("ad-free-toggle"),
resetBtn: document.getElementById("reset-filters")
};
const GRADIENT_PALETTE = [
"linear-gradient(135deg, #2563eb 0%, #1e40af 100%)",
"linear-gradient(135deg, #059669 0%, #064e3b 100%)",
"linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%)",
"linear-gradient(135deg, #ea580c 0%, #9a3412 100%)"
];
function getGradientIndex(seed = "") {
return Array.from(seed).reduce((hash, char) => hash + char.charCodeAt(0), 0) % GRADIENT_PALETTE.length;
}
function ensureArray(value) {
if (Array.isArray(value)) return value;
if (typeof value === "string" && value.trim()) return [value];
return [];
}
function joinValues(values) {
const items = ensureArray(values);
return items.length ? items.join(", ") : "--";
}
function normalizeFilterData(filterData = {}) {
return {
geo: ensureArray(filterData.geo || filterData.region),
deal: ensureArray(filterData.deal || filterData.deal_size),
channel: ensureArray(filterData.channel),
maturity: ensureArray(filterData.maturity || filterData.business_model),
pain_point: ensureArray(filterData.pain_point || filterData.pain_points),
solution_interest: ensureArray(filterData.solution_interest || filterData.solution_paths),
is_ad_free: filterData.is_ad_free === true
};
}
function debounce(fn, delay) {
let timer;
return (...args) => {
window.clearTimeout(timer);
timer = window.setTimeout(() => fn(...args), delay);
};
}
function setCount(count) {
elements.countBadge.textContent = `(${count})`;
}
function clearGrid() {
elements.cardsGrid.innerHTML = "";
}
function renderCards(data) {
clearGrid();
if (!data.length) {
elements.noResults.classList.remove("hidden");
setCount(0);
return;
}
elements.noResults.classList.add("hidden");
setCount(data.length);
const fragment = document.createDocumentFragment();
data.forEach((item) => {
const normalized = normalizeFilterData(item.filter_data);
const card = document.createElement("article");
card.className = "card";
const image = document.createElement("div");
image.className = "card-image";
const gradientIndex = getGradientIndex(item.id || item.meta?.title || "");
image.style.background = GRADIENT_PALETTE[gradientIndex];
const imageText = document.createElement("span");
imageText.className = "card-image-text";
imageText.textContent = item.meta.title;
image.appendChild(imageText);
const body = document.createElement("div");
body.className = "card-body";
const title = document.createElement("h3");
title.className = "card-title";
title.textContent = item.meta.title;
const summary = document.createElement("p");
summary.className = "card-summary";
summary.textContent = item.meta.summary;
const specGrid = document.createElement("div");
specGrid.className = "spec-grid";
const dealItem = document.createElement("div");
dealItem.className = "spec-item";
const dealLabel = document.createElement("span");
dealLabel.className = "spec-label";
dealLabel.textContent = "Deal";
const dealValue = document.createElement("span");
dealValue.className = "spec-value";
dealValue.textContent = joinValues(normalized.deal);
dealItem.append(dealLabel, dealValue);
const timelineItem = document.createElement("div");
timelineItem.className = "spec-item";
const timelineLabel = document.createElement("span");
timelineLabel.className = "spec-label";
timelineLabel.textContent = "Maturity";
const timelineValue = document.createElement("span");
timelineValue.className = "spec-value";
timelineValue.textContent = joinValues(normalized.maturity);
timelineItem.append(timelineLabel, timelineValue);
const strategyItem = document.createElement("div");
strategyItem.className = "spec-item";
strategyItem.style.gridColumn = "1 / -1";
strategyItem.style.marginTop = "4px";
const strategyLabel = document.createElement("span");
strategyLabel.className = "spec-label";
strategyLabel.textContent = "Solution Interest";
const strategyValue = document.createElement("span");
strategyValue.className = "spec-value";
strategyValue.textContent = joinValues(normalized.solution_interest.slice(0, 2));
strategyItem.append(strategyLabel, strategyValue);
specGrid.append(dealItem, timelineItem, strategyItem);
body.append(title, summary, specGrid);
const footer = document.createElement("div");
footer.className = "card-footer";
const client = document.createElement("div");
client.className = "client-logo";
const logo = document.createElement("img");
logo.src = item.meta.logo_url;
logo.alt = `${item.meta.client_name} logo`;
const clientName = document.createElement("span");
clientName.textContent = item.meta.client_name;
client.append(logo, clientName);
const read = document.createElement("a");
read.className = "read-btn";
const fallbackSlug = `case-study.html?id=${encodeURIComponent(item.id)}`;
read.href = item.meta.slug && item.meta.slug !== "#" ? item.meta.slug : fallbackSlug;
read.rel = "noopener noreferrer";
read.textContent = "View Study →";
footer.append(client, read);
card.append(image, body, footer);
fragment.appendChild(card);
});
elements.cardsGrid.appendChild(fragment);
}
function matchesGroup(itemValues, selectedValues) {
if (selectedValues.size === 0) return true;
return itemValues.some((value) => selectedValues.has(value));
}
function renderPagination(totalItems) {
if (!elements.pagination) return;
elements.pagination.innerHTML = "";
const totalPages = Math.max(1, Math.ceil(totalItems / state.pageSize));
if (totalPages <= 1) return; const prevBtn=document.createElement("button"); prevBtn.textContent="Prev" ; prevBtn.disabled=state.currentPage===1; prevBtn.addEventListener("click", ()=> {
state.currentPage = Math.max(1, state.currentPage - 1);
renderPage();
});
const nextBtn = document.createElement("button");
nextBtn.textContent = "Next";
nextBtn.disabled = state.currentPage === totalPages;
nextBtn.addEventListener("click", () => {
state.currentPage = Math.min(totalPages, state.currentPage + 1);
renderPage();
});
elements.pagination.appendChild(prevBtn);
for (let page = 1; page <= totalPages; page +=1) { const pageBtn=document.createElement("button"); pageBtn.textContent=String(page); if (page===state.currentPage) { pageBtn.classList.add("is-active"); pageBtn.disabled=true; } pageBtn.addEventListener("click", ()=> {
state.currentPage = page;
renderPage();
});
elements.pagination.appendChild(pageBtn);
}
elements.pagination.appendChild(nextBtn);
}
function renderPage() {
const totalItems = state.filteredStudies.length;
const totalPages = Math.max(1, Math.ceil(totalItems / state.pageSize));
state.currentPage = Math.min(state.currentPage, totalPages);
const start = (state.currentPage - 1) * state.pageSize;
const pageItems = state.filteredStudies.slice(start, start + state.pageSize);
renderCards(pageItems);
renderPagination(totalItems);
}
function filterData() {
const searchTerm = state.activeFilters.search.trim();
const filtered = state.caseStudies.filter((item) => {
const meta = item.meta || {};
const filterData = normalizeFilterData(item.filter_data);
const matchesSearch =
!searchTerm ||
meta.title.toLowerCase().includes(searchTerm) ||
meta.summary.toLowerCase().includes(searchTerm);
const matchesGeo = matchesGroup(filterData.geo, state.activeFilters.geo);
const matchesDeal = matchesGroup(filterData.deal, state.activeFilters.deal);
const matchesChannel = matchesGroup(filterData.channel, state.activeFilters.channel);
const matchesMaturity = matchesGroup(filterData.maturity, state.activeFilters.maturity);
const matchesPain = matchesGroup(filterData.pain_point, state.activeFilters.pain_point);
const matchesSolution = matchesGroup(filterData.solution_interest, state.activeFilters.solution_interest);
const matchesAdFree =
!state.activeFilters.ad_free_only || filterData.is_ad_free;
return (
matchesSearch &&
matchesGeo &&
matchesDeal &&
matchesChannel &&
matchesMaturity &&
matchesPain &&
matchesSolution &&
matchesAdFree
);
});
state.filteredStudies = filtered;
state.currentPage = 1;
renderPage();
}
function resetFilters() {
state.activeFilters = {
search: "",
geo: new Set(),
deal: new Set(),
channel: new Set(),
maturity: new Set(),
pain_point: new Set(),
solution_interest: new Set(),
ad_free_only: false
};
elements.searchInput.value = "";
elements.adFreeToggle.checked = false;
document.querySelectorAll("input[type='checkbox']").forEach((box) => {
box.checked = false;
});
document.querySelectorAll(".filter-tag").forEach((tag) => {
tag.classList.remove("active");
tag.setAttribute("aria-pressed", "false");
});
filterData();
}
function updateSetFromCheckbox(event) {
const { name, value, checked } = event.target;
const targetSet = state.activeFilters[name];
if (!targetSet) return;
if (checked) {
targetSet.add(value);
} else {
targetSet.delete(value);
}
filterData();
}
function setupEvents() {
const onSearch = debounce((event) => {
state.activeFilters.search = event.target.value.toLowerCase();
filterData();
}, 150);
elements.searchInput.addEventListener("input", onSearch);
elements.adFreeToggle.addEventListener("change", (event) => {
state.activeFilters.ad_free_only = event.target.checked;
filterData();
});
document.querySelectorAll("input[type='checkbox'][name]").forEach((box) => {
box.addEventListener("change", updateSetFromCheckbox);
});
document.querySelectorAll(".filter-tag").forEach((btn) => {
btn.setAttribute("aria-pressed", "false");
btn.addEventListener("click", () => {
btn.classList.toggle("active");
const value = btn.dataset.value;
const isActive = btn.classList.contains("active");
btn.setAttribute("aria-pressed", String(isActive));
if (isActive) {
state.activeFilters.solution_paths.add(value);
} else {
state.activeFilters.solution_paths.delete(value);
}
filterData();
});
});
elements.resetBtn.addEventListener("click", resetFilters);
}
async function loadData() {
elements.loadError.classList.add("hidden");
try {
const response = await fetch(DATA_URL, { cache: "no-store" });
if (!response.ok) {
throw new Error(`Failed to load: ${response.status}`);
}
const data = await response.json();
if (!Array.isArray(data)) {
throw new Error("Invalid JSON shape");
}
state.caseStudies = data;
state.filteredStudies = data;
renderPage();
} catch (error) {
elements.loadError.classList.remove("hidden");
clearGrid();
setCount(0);
}
}
function init() {
setupEvents();
loadData();
}
init();
})();
// ============================================
// CAROUSEL.JS - Carousel Logic
// ============================================
// Note: Include carousel.js separately if needed
// ============================================
// CASE-STUDY.JS - Detail Page Logic
// ============================================
(() => {
const urlParams = new URLSearchParams(window.location.search);
const currentId = urlParams.get("id") || "cs_001";
const REMOTE_MARKDOWN_BASE_URL = "https://cdn.glowradi.us/case-study-md";
const markdownContainer = document.getElementById("markdown-content");
const tocList = document.getElementById("toc-list");
const GRADIENT_PALETTE = [
"linear-gradient(135deg, #2563eb 0%, #1e40af 100%)",
"linear-gradient(135deg, #059669 0%, #064e3b 100%)",
"linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%)",
"linear-gradient(135deg, #ea580c 0%, #9a3412 100%)"
];
function getGradientIndex(seed = "") {
return Array.from(seed).reduce((hash, char) => hash + char.charCodeAt(0), 0) % GRADIENT_PALETTE.length;
}
function ensureArray(value) {
if (Array.isArray(value)) return value;
if (typeof value === "string" && value.trim()) return [value];
return [];
}
function joinValues(values) {
const items = ensureArray(values);
return items.length ? items.join(", ") : "--";
}
function normalizeStudy(study) {
const filterData = study.filter_data || {};
return {
region: ensureArray(filterData.geo || filterData.region),
deal: ensureArray(filterData.deal || filterData.deal_size),
channel: ensureArray(filterData.channel),
maturity: ensureArray(filterData.maturity || filterData.business_model),
painPoints: ensureArray(filterData.pain_point || filterData.pain_points),
solutionInterest: ensureArray(filterData.solution_interest || filterData.solution_paths)
};
}
function populateMetadata(data) {
const normalized = normalizeStudy(data);
document.getElementById("bread-client").textContent = data.meta.client_name;
document.getElementById("hero-title").textContent = data.meta.title;
document.getElementById("hero-summary").textContent = data.meta.summary;
document.title = data.meta.title;
document.getElementById("meta-timeline").textContent = joinValues(normalized.region);
document.getElementById("meta-deal").textContent = joinValues(normalized.deal);
document.getElementById("meta-region").textContent = joinValues(normalized.channel);
document.getElementById("meta-model").textContent = joinValues(normalized.maturity);
const painContainer = document.getElementById("meta-pain");
painContainer.innerHTML = "";
normalized.painPoints.forEach(p => {
const tag = document.createElement("span");
tag.className = "meta-tag";
tag.textContent = p;
painContainer.appendChild(tag);
});
const solutionContainer = document.getElementById("meta-solution");
solutionContainer.innerHTML = "";
normalized.solutionInterest.forEach(s => {
const tag = document.createElement("span");
tag.className = "meta-tag";
tag.textContent = s;
solutionContainer.appendChild(tag);
});
}
function extractHeadings(content) {
const headingRegex = /^#{2,3}\s+(.+)$/gm;
const headings = [];
let match;
while ((match = headingRegex.exec(content)) !== null) {
headings.push({
level: match[0].startsWith("###") ? 3 : 2,
text: match[1].trim(),
id: match[1].trim().toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-")
});
}
return headings;
}
function renderTOC(headings) {
if (!tocList) return;
tocList.innerHTML = "";
headings.forEach(h => {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = `#${h.id}`;
a.textContent = h.text;
li.appendChild(a);
tocList.appendChild(li);
});
}
function processMarkdown(content) {
const headingRegex = /^#{2,3}\s+(.+)$/gm;
return content.replace(headingRegex, (match, text) => {
const level = match.startsWith("###") ? 3 : 2;
const id = text.trim().toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
return `${text.trim()}`;
});
}
async function loadMarkdown(caseStudyId) {
if (!markdownContainer) return;
try {
markdownContainer.innerHTML = "Loading...
";
const response = await fetch(`${REMOTE_MARKDOWN_BASE_URL}/${caseStudyId}.md`);
if (!response.ok) throw new Error("Markdown not found");
const content = await response.text();
const processed = processMarkdown(content);
markdownContainer.innerHTML = marked.parse(processed);
const headings = extractHeadings(content);
renderTOC(headings);
} catch (error) {
markdownContainer.innerHTML = "Case study content not available.
";
}
}
async function loadCaseStudy() {
try {
const response = await fetch(DATA_URL, { cache: "no-store" });
if (!response.ok) throw new Error("Failed to load");
const data = await response.json();
const study = data.find(s => s.id === currentId);
if (!study) {
document.getElementById("hero-title").textContent = "Case Study Not Found";
return;
}
populateMetadata(study);
loadMarkdown(currentId);
const similarGrid = document.getElementById("similar-grid");
if (similarGrid && study.related_ids) {
similarGrid.innerHTML = "";
study.related_ids.forEach(relatedId => {
const related = data.find(d => d.id === relatedId);
if (related) {
const card = document.createElement("div");
card.className = "story-card";
const gradientIndex = getGradientIndex(related.id);
card.innerHTML = `
${related.meta.title}
${related.meta.title}
${related.meta.summary}
`;
card.addEventListener("click", () => {
window.location.href = `case-study.html?id=${related.id}`;
});
similarGrid.appendChild(card);
}
});
}
} catch (error) {
console.error("Error loading case study:", error);
}
}
if (document.getElementById("hero-title")) {
loadCaseStudy();
}
})();
Casestudy Vault
Case study Vault
Results from GlowRadius customers
How top revenue teams drive pipeline using GlowRadius.
Backed by Salesforce
Trusted by 200+ Revenue Teams.
Enterpret
Webflow
Deel
CloudAnalogy
SkillsProject
No case studies match your filters.
Unable to load case studies. Please check that case-studies.json is available.
/* ============================================
COMBINED CSS - INDEX PAGE (style.css)
============================================ */
:root {
--primary: #2563eb;
--bg-light: #f8fafc;
--text-dark: #1e293b;
--text-gray: #64748b;
--border: #e2e8f0;
--green-badge: #dcfce7;
--green-text: #166534;
--radius: 12px;
--shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
--hero-bg: #23022e;
--carousel-bg: #23022e;
--panel-bg: #f5f7fb;
--card-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: var(--text-dark);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
background: var(--hero-bg);
}
.page-hero {
padding: 80px 20px 40px;
color: #fff;
}
.hero-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.85rem;
color: #ffad75;
margin-bottom: 16px;
}
.page-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 1.15;
margin-bottom: 16px;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
margin-bottom: 28px;
}
.hero-trust {
font-size: 1rem;
margin-bottom: 18px;
}
.hero-logos {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.customer-success-section {
max-width: 1240px;
margin: 0 auto;
padding: 28px 32px 84px;
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
}
.section-header {
text-align: center;
margin-bottom: 52px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
}
.section-title {
color: #fff;
font-size: clamp(1.9rem, 2.8vw, 3rem);
margin: 0;
text-align: center;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.04em;
max-width: 700px;
}
.experience-container {
display: flex;
width: 100%;
height: 620px;
gap: 10px;
overflow: hidden;
}
.hover-card {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
background: #111;
transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
}
.hover-card:hover {
flex: 5;
}
.thumbnail-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
z-index: 2;
opacity: 1;
transition: opacity 0.4s ease;
}
.hover-card:hover .thumbnail-img {
opacity: 0;
}
.hover-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
border: 0;
z-index: 1;
background: #000;
}
.hover-video-direct {
object-fit: cover;
}
.description-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.96) 100%);
padding: 42px 22px 24px;
z-index: 4;
transform: translateY(100%);
opacity: 0;
transition: transform 0.5s ease 0.15s, opacity 0.5s ease 0.15s;
}
.hover-card:hover .description-bar {
transform: translateY(0);
opacity: 1;
}
.desc-text {
color: #fff;
}
.desc-text h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
}
.desc-text p {
margin: 6px 0 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.82);
line-height: 1.4;
}
.directory-section {
background: var(--bg-light);
padding: 70px 20px 90px;
}
.directory-header {
max-width: 1200px;
margin: 0 auto 32px;
text-align: left;
}
.directory-header h2 {
font-size: 2rem;
margin-bottom: 8px;
}
.directory-header p {
color: var(--text-gray);
}
.directory-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
.sidebar {
background: var(--panel-bg);
border: 1px solid rgba(15, 23, 42, 0.06);
padding: 26px;
border-radius: 18px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
position: sticky;
top: 20px;
max-height: calc(100vh - 40px);
overflow-y: auto;
scrollbar-gutter: stable;
}
.sidebar::-webkit-scrollbar {
width: 8px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.35);
border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(100, 116, 139, 0.55);
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.sidebar-header h3 {
font-size: 16px;
font-weight: 700;
}
.reset-btn {
background: none;
border: none;
color: var(--primary);
cursor: pointer;
font-size: 14px;
}
.filter-group {
margin-bottom: 30px;
}
.filter-group h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-gray);
margin-bottom: 12px;
font-weight: 600;
}
.search-box {
position: relative;
}
.search-box input {
width: 100%;
padding: 10px 10px 10px 35px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
font-size: 14px;
background: #fff;
}
.search-icon {
position: absolute;
left: 12px;
top: 10px;
color: var(--text-gray);
font-size: 14px;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: var(--text-dark);
}
.checkbox-label input {
margin-right: 10px;
accent-color: var(--primary);
transform: scale(1.1);
}
.highlight-group {
background: #eef4ff;
padding: 16px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary);
}
input:checked + .slider:before {
transform: translateX(18px);
}
.toggle-label {
font-size: 13px;
line-height: 1.4;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-tag {
background: white;
border: 1px solid rgba(15, 23, 42, 0.08);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.filter-tag:hover {
border-color: var(--primary);
color: var(--primary);
}
.filter-tag.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.directory-content {
min-width: 0;
}
.directory-title {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-gray);
font-size: 0.95rem;
margin-bottom: 16px;
}
#count-badge {
color: var(--text-gray);
font-weight: 600;
font-size: 1rem;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 28px;
flex-wrap: wrap;
}
.pagination button {
border: 1px solid var(--border);
background: #fff;
color: var(--text-dark);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.pagination button:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination .is-active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.directory-section .card {
background: white;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
display: flex;
flex-direction: column;
min-height: 100%;
}
.directory-section .card:hover {
transform: translateY(-4px);
box-shadow: var(--card-shadow);
border-color: var(--primary);
}
.directory-section .card-image {
height: 160px;
background-color: var(--primary);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
overflow: hidden;
}
.card-image-text {
color: #ffffff;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
text-wrap: balance;
z-index: 1;
}
.directory-section .card-image::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 50%);
pointer-events: none;
}
.directory-section .roi-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--green-badge);
color: var(--green-text);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.directory-section .card-body {
padding: 20px;
flex-grow: 1;
color: var(--text-dark);
}
.directory-section .card-title {
font-size: 19px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.3;
}
.directory-section .card-summary {
font-size: 14px;
color: var(--text-gray);
margin-bottom: 16px;
line-height: 1.45;
}
.spec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: var(--bg-light);
padding: 12px;
border-radius: 8px;
margin-bottom: 16px;
border: 1px solid rgba(15, 23, 42, 0.05);
}
.spec-item {
font-size: 12px;
}
.spec-label {
display: block;
color: var(--text-gray);
margin-bottom: 2px;
font-size: 10px;
text-transform: uppercase;
}
.spec-value {
font-weight: 600;
color: var(--text-dark);
}
.directory-section .card-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.directory-section .client-logo {
display: flex;
align-items: center;
gap: 10px;
}
.directory-section .client-logo img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.directory-section .client-logo span {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-gray);
}
.directory-section .read-btn {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.directory-section .read-btn:hover {
text-decoration: underline;
}
.no-results,
.load-error {
text-align: center;
padding: 48px 24px;
color: var(--text-gray);
}
.load-error code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
.hidden {
display: none;
}
@media (max-width: 768px) {
.directory-layout {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
max-height: none;
}
.experience-container {
height: 400px;
}
}