/* ============================================================ Vista Case Studies — Stylesheet ALL colors come from CSS variables set via plugin Settings. No hardcoded color values exist in this file. ============================================================ */ /* Variables are injected by PHP into from plugin Settings: --vista-cs-primary Main brand color --vista-cs-primary-text Text on primary color bg --vista-cs-accent Accent/highlight color --vista-cs-accent-text Text on accent color bg --vista-cs-hero-bg Hero background --vista-cs-hero-text Hero heading --vista-cs-hero-sub Hero subtitle --vista-cs-card-bg Card background --vista-cs-card-border Card border --vista-cs-card-title Card title text --vista-cs-card-excerpt Card excerpt text --vista-cs-sidebar-bg Sidebar background --vista-cs-sidebar-border Sidebar border --vista-cs-sidebar-text Sidebar item text --vista-cs-sidebar-hover-bg Sidebar hover bg --vista-cs-sidebar-hover-text Sidebar hover text --vista-cs-sidebar-active-bg Active category bg --vista-cs-sidebar-active-text Active category text --vista-cs-page-bg Page background */ /* Structural/non-color variables only */ :root { --vista-cs-radius: 8px; --vista-cs-transition: all .22s ease; --vista-cs-shadow: 0 4px 20px rgba(0,0,0,.08); --vista-cs-shadow-hover: 0 10px 36px rgba(0,0,0,.14); } *, *::before, *::after { box-sizing: border-box; } .vista-cs-wrap, .vista-cs-single-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--vista-cs-card-title); line-height: 1.65; background: var(--vista-cs-page-bg); } /* ── Hero ─────────────────────────────────────────────────── */ .vista-cs-hero { background: var(--vista-cs-hero-bg); padding: 64px 24px 56px; text-align: center; } .vista-cs-hero-label { display: inline-block; color: var(--vista-cs-accent); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; } .vista-cs-hero-inner { max-width: 680px; margin: 0 auto; } .vista-cs-hero-title { color: var(--vista-cs-hero-text); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; margin: 0 0 18px; line-height: 1.2; } .vista-cs-hero-sub { color: var(--vista-cs-hero-sub); font-size: 1rem; margin: 0 auto; max-width: 540px; } /* ── Search Bar ───────────────────────────────────────────── */ .vista-cs-search-bar-wrap { background: var(--vista-cs-card-bg); border-bottom: 1px solid var(--vista-cs-card-border); padding: 24px 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .vista-cs-search-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: center; } .vista-cs-search-box { display: flex; align-items: center; gap: 10px; background: var(--vista-cs-page-bg); border: 1.5px solid var(--vista-cs-card-border); border-radius: 50px; padding: 12px 22px; width: 100%; max-width: 480px; transition: var(--vista-cs-transition); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .vista-cs-search-box:focus-within { border-color: var(--vista-cs-primary); background: var(--vista-cs-card-bg); box-shadow: 0 0 0 4px rgba(0,0,0,.06); } .vista-cs-search-box svg { color: var(--vista-cs-card-excerpt); flex-shrink: 0; } .vista-cs-search-box input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--vista-cs-card-title); } .vista-cs-search-box input::placeholder { color: var(--vista-cs-card-excerpt); } .vista-cs-clear-btn { background: none; border: none; cursor: pointer; color: var(--vista-cs-card-excerpt); font-size: 14px; padding: 0; line-height: 1; transition: var(--vista-cs-transition); } .vista-cs-clear-btn:hover { color: var(--vista-cs-accent); } /* ── Main Layout ─────────────────────────────────────────── */ .vista-cs-main { display: flex; align-items: flex-start; gap: 28px; max-width: 1240px; margin: 32px auto; padding: 0 24px 60px; } /* ── Sidebar ─────────────────────────────────────────────── */ .vista-cs-sidebar { flex: 0 0 198px; position: sticky; top: 68px; } .vista-cs-sidebar-inner { background: var(--vista-cs-sidebar-bg); border: 1px solid var(--vista-cs-sidebar-border); border-radius: var(--vista-cs-radius); overflow: hidden; } .vista-cs-sidebar-title { display: none; } .vista-cs-cat-list { list-style: none; margin: 0; padding: 4px 0; } .vista-cs-cat-list li { margin: 0; } .vista-cs-cat-item { display: flex; align-items: center; padding: 9px 14px; text-decoration: none; color: var(--vista-cs-sidebar-text); font-size: 13.5px; font-weight: 500; transition: var(--vista-cs-transition); gap: 6px; } .vista-cs-cat-item:hover { color: var(--vista-cs-sidebar-hover-text); background: var(--vista-cs-sidebar-hover-bg); } .vista-cs-cat-item.active { background: var(--vista-cs-sidebar-active-bg); color: var(--vista-cs-sidebar-active-text); font-weight: 700; } .vista-cs-cat-item::after { content: '›'; font-size: 16px; color: var(--vista-cs-card-border); margin-left: auto; transition: var(--vista-cs-transition); } .vista-cs-cat-item:hover::after { color: var(--vista-cs-sidebar-hover-text); } .vista-cs-cat-item.active::after { color: var(--vista-cs-sidebar-active-text); opacity: .5; } .vista-cs-cat-name { flex: 1; } .vista-cs-cat-count { display: none; } .vista-cs-no-cats { padding: 14px; color: var(--vista-cs-card-excerpt); font-size: 13px; } /* ── Content Area ────────────────────────────────────────── */ .vista-cs-content { flex: 1; min-width: 0; } .vista-cs-info-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--vista-cs-card-border); } .vista-cs-active-filter { font-size: .95rem; font-weight: 700; color: var(--vista-cs-card-title); } .vista-cs-count-info { font-size: 13px; color: var(--vista-cs-card-excerpt); } /* ── Grid ────────────────────────────────────────────────── */ /* Column counts are driven by CSS vars (injected from dashboard settings). Fallbacks: desktop=3, tablet=2, mobile=1. */ .vista-cs-grid { display: grid; grid-template-columns: repeat(var(--vista-cs-cols-desktop, 3), 1fr); gap: 22px; } /* 3-col tuning for main listing cards — tighter proportions */ .vista-cs-grid .vista-cs-card-img-wrap { height: 170px; } .vista-cs-grid .vista-cs-card-title { font-size: 1.25rem; } @media (max-width: 900px) { .vista-cs-grid .vista-cs-card-img-wrap { height: 196px; } .vista-cs-grid .vista-cs-card-title { font-size: 1.5rem; } } @media (max-width: 640px) { .vista-cs-grid .vista-cs-card-img-wrap { height: 200px; } .vista-cs-grid .vista-cs-card-title { font-size: 1.5rem; } } /* ── Card ────────────────────────────────────────────────── */ .vista-cs-card { background: var(--vista-cs-card-bg); border-radius: var(--vista-cs-radius); overflow: hidden; border: 1px solid var(--vista-cs-card-border); transition: var(--vista-cs-transition); display: flex; flex-direction: column; cursor: pointer; animation: vista-fadeIn .35s ease both; } .vista-cs-card:hover { box-shadow: var(--vista-cs-shadow-hover); transform: translateY(-4px); border-color: transparent; } /* Image */ .vista-cs-card-img-link { display: block; position: relative; } .vista-cs-card-img-wrap { position: relative; height: 196px; overflow: hidden; background: var(--vista-cs-hero-bg); } .vista-cs-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .vista-cs-card:hover .vista-cs-card-img-wrap img { transform: scale(1.04); } .vista-cs-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--vista-cs-hero-bg); opacity: .7; } /* Tags overlaid on image */ .vista-cs-card-tags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; } .vista-cs-tag { display: inline-block; background: var(--vista-cs-accent); color: var(--vista-cs-accent-text); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; line-height: 1.5; } /* Card body */ .vista-cs-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .vista-cs-card-cat-label { font-size: 11px; font-weight: 700; color: var(--vista-cs-accent); letter-spacing: .8px; text-transform: uppercase; } .vista-cs-card-title { font-size: 1.65rem; font-weight: 700; line-height: 1.4; margin: 0; } .vista-cs-card-title a { text-decoration: none; color: var(--vista-cs-card-title); transition: var(--vista-cs-transition); } .vista-cs-card-title a:hover { color: var(--vista-cs-accent); } .vista-cs-card-excerpt { font-size: 13px; color: var(--vista-cs-card-excerpt); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vista-cs-card-client { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--vista-cs-card-excerpt); } .vista-cs-card-client svg { color: var(--vista-cs-card-excerpt); } .vista-cs-read-more { display: inline-flex; align-items: center; gap: 6px; color: var(--vista-cs-card-title); font-size: 13px; font-weight: 700; text-decoration: none; margin-top: auto; padding-top: 6px; transition: var(--vista-cs-transition); } .vista-cs-read-more:hover { color: var(--vista-cs-accent); gap: 9px; } /* ── No Results ──────────────────────────────────────────── */ .vista-cs-no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--vista-cs-card-excerpt); } /* ── Load More ───────────────────────────────────────────── */ .vista-cs-load-more-wrap { text-align: center; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--vista-cs-card-border); } .vista-cs-load-more-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 2px solid var(--vista-cs-primary); color: var(--vista-cs-primary); font-size: 14px; font-weight: 700; padding: 11px 32px; border-radius: 6px; cursor: pointer; transition: var(--vista-cs-transition); font-family: inherit; } .vista-cs-load-more-btn:hover { background: var(--vista-cs-primary); color: var(--vista-cs-primary-text); } .vista-cs-load-more-btn:disabled { opacity: .4; cursor: not-allowed; } /* ── Pagination ──────────────────────────────────────────── */ .vista-cs-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; padding-top: 22px; flex-wrap: wrap; } .vista-cs-page-link, .vista-cs-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--vista-cs-card-title); text-decoration: none; background: var(--vista-cs-card-bg); border: 1px solid var(--vista-cs-card-border); border-radius: 6px; transition: var(--vista-cs-transition); user-select: none; } .vista-cs-page-link:hover { background: var(--vista-cs-sidebar-hover-bg); color: var(--vista-cs-sidebar-hover-text); border-color: var(--vista-cs-primary); } .vista-cs-page-current { background: var(--vista-cs-primary) !important; color: var(--vista-cs-primary-text) !important; border-color: var(--vista-cs-primary) !important; cursor: default; } .vista-cs-page-arrow { font-size: 18px; line-height: 1; } .vista-cs-page-disabled { opacity: .35; cursor: not-allowed; background: transparent; } .vista-cs-page-ellipsis { border: none; background: transparent; color: var(--vista-cs-card-excerpt); cursor: default; min-width: 24px; padding: 0 4px; } /* ── Spinner ─────────────────────────────────────────────── */ .vista-cs-spinner { grid-column: 1/-1; text-align: center; padding: 48px 0; } .vista-cs-spinner::after { content: ''; display: inline-block; width: 30px; height: 30px; border: 3px solid var(--vista-cs-card-border); border-top-color: var(--vista-cs-accent); border-radius: 50%; animation: vista-spin .75s linear infinite; } @keyframes vista-spin { to { transform: rotate(360deg); } } @keyframes vista-fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ SINGLE CASE STUDY PAGE ============================================================ */ .vista-cs-single-wrap { background: var(--vista-cs-page-bg) !important; min-height: 100vh; } /* Back bar */ .vista-cs-single-back-bar { background: var(--vista-cs-card-bg) !important; border-bottom: 1px solid var(--vista-cs-card-border) !important; padding: 12px 24px; } .vista-cs-single-back-inner { max-width: 1200px; margin: 0 auto; } .vista-cs-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vista-cs-card-excerpt) !important; text-decoration: none; font-size: 13px; font-weight: 600; transition: var(--vista-cs-transition); } .vista-cs-back-link:hover { color: var(--vista-cs-accent) !important; } .vista-cs-back-link svg { transition: transform .2s; } .vista-cs-back-link:hover svg { transform: translateX(-3px); } /* Hero */ .vista-cs-single-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--vista-cs-hero-bg) center/cover no-repeat; padding: 60px 24px 50px; } .vista-cs-single-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.15) 100%) !important; } .vista-cs-single-hero-content { position: relative; max-width: 1200px; width: 100%; margin: 0 auto; } .vista-cs-single-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* ── TITLE + CLIENT — force color regardless of theme ── */ .vista-cs-single-wrap .vista-cs-single-title, .vista-cs-single-wrap .vista-cs-single-hero-content h1, .vista-cs-single-wrap h1.vista-cs-single-title { color: var(--vista-cs-single-title) !important; font-size: clamp(1.7rem, 4vw, 2.5rem) !important; font-weight: 800 !important; margin: 0 0 12px !important; max-width: 780px; line-height: 1.22 !important; text-shadow: none !important; } .vista-cs-single-wrap .vista-cs-single-client, .vista-cs-single-wrap p.vista-cs-single-client { color: var(--vista-cs-single-client) !important; font-size: 14px !important; margin: 0 !important; } /* Meta strip */ .vista-cs-meta-strip { background: var(--vista-cs-card-bg) !important; border-bottom: 1px solid var(--vista-cs-card-border) !important; } .vista-cs-meta-strip-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; } .vista-cs-meta-item { display: flex; align-items: flex-start; gap: 12px; padding: 22px 36px 22px 0; border-right: 1px solid var(--vista-cs-card-border) !important; margin-right: 36px; min-width: 120px; } .vista-cs-meta-item:last-child { border-right: none !important; } .vista-cs-meta-icon { color: var(--vista-cs-accent) !important; flex-shrink: 0; margin-top: 2px; } /* ── META LABELS (CLIENT, INDUSTRY, TECHNOLOGIES) ── */ .vista-cs-single-wrap .vista-cs-meta-label, .vista-cs-meta-strip .vista-cs-meta-label, span.vista-cs-meta-label { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--vista-cs-single-meta-label) !important; margin-bottom: 3px !important; } /* ── META VALUES (Betterthat, Node js, etc.) ── */ .vista-cs-single-wrap .vista-cs-meta-value, .vista-cs-meta-strip .vista-cs-meta-value, span.vista-cs-meta-value { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--vista-cs-single-meta-value) !important; } .vista-cs-meta-link { display: inline-flex; align-items: center; color: var(--vista-cs-accent) !important; text-decoration: none; transition: var(--vista-cs-transition); } .vista-cs-meta-link:hover { opacity: .8; text-decoration: underline; } .vista-cs-tech-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .vista-cs-tech-tag { background: var(--vista-cs-sidebar-hover-bg) !important; color: var(--vista-cs-accent) !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 9px; border-radius: 4px; } /* Content area */ .vista-cs-single-content-area { padding: 44px 24px; background: var(--vista-cs-single-body-bg) !important; } .vista-cs-single-content-inner { max-width: 1200px; margin: 0 auto; } /* Stats */ .vista-cs-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 40px; } .vista-cs-stat-card { background: var(--vista-cs-single-section-bg) !important; border-radius: var(--vista-cs-radius); border: 1px solid var(--vista-cs-card-border) !important; border-top: 4px solid var(--vista-cs-accent) !important; padding: 26px 16px; text-align: center; } .vista-cs-stat-number { font-size: 2.1rem; font-weight: 800; color: var(--vista-cs-accent) !important; line-height: 1; margin-bottom: 7px; } .vista-cs-stat-label { font-size: 12.5px; color: var(--vista-cs-single-meta-label) !important; font-weight: 600; } /* Sections */ .vista-cs-single-body { display: flex; flex-direction: column; gap: 20px; } .vista-cs-single-intro { font-size: 1.03rem; color: var(--vista-cs-single-body-text) !important; line-height: 1.8; background: var(--vista-cs-single-section-bg) !important; padding: 26px 28px; border-radius: var(--vista-cs-radius); border: 1px solid var(--vista-cs-card-border) !important; border-left: 4px solid var(--vista-cs-accent) !important; margin: 0; } .vista-cs-section { background: var(--vista-cs-single-section-bg) !important; border-radius: var(--vista-cs-radius); border: 1px solid var(--vista-cs-card-border) !important; padding: 30px; display: flex; gap: 20px; align-items: flex-start; } .vista-cs-section-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--vista-cs-sidebar-hover-bg) !important; color: var(--vista-cs-accent) !important; } .vista-cs-single-wrap .vista-cs-section-text h2, .vista-cs-section-text h2 { font-size: 1.15rem !important; font-weight: 800 !important; margin: 0 0 12px !important; color: var(--vista-cs-single-heading) !important; letter-spacing: 3px !important; } .vista-cs-single-wrap .vista-cs-section-text p, .vista-cs-single-wrap .vista-cs-section-text div, .vista-cs-section-text p, .vista-cs-section-text div { font-size: 14px; line-height: 1.75; color: var(--vista-cs-single-body-text) !important; } .vista-cs-section-full { display: block; } .vista-cs-full-content { font-size: 15px; line-height: 1.8; color: var(--vista-cs-single-body-text) !important; } .vista-cs-single-wrap .vista-cs-full-content h2, .vista-cs-single-wrap .vista-cs-full-content h3, .vista-cs-full-content h2, .vista-cs-full-content h3 { color: var(--vista-cs-single-heading) !important; font-weight: 700 !important; } /* Testimonial */ .vista-cs-testimonial { background: var(--vista-cs-hero-bg); border-radius: var(--vista-cs-radius); padding: 44px 40px; text-align: center; } .vista-cs-testimonial-inner { max-width: 640px; margin: 0 auto; } .vista-cs-quote-icon { color: var(--vista-cs-accent); margin-bottom: 14px; } .vista-cs-quote { font-size: 1.1rem; font-style: italic; line-height: 1.75; color: var(--vista-cs-hero-sub); margin: 0 0 16px; } .vista-cs-quote-author { color: var(--vista-cs-accent); font-size: 12.5px; font-weight: 700; font-style: normal; letter-spacing: 1px; text-transform: uppercase; } /* Related */ .vista-cs-related { background: var(--vista-cs-card-bg); padding: 52px 24px; border-top: 1px solid var(--vista-cs-card-border); } .vista-cs-related-inner { max-width: 1200px; margin: 0 auto; } .vista-cs-related-title { font-size: 1.45rem; font-weight: 800; color: var(--vista-cs-card-title); margin: 0 0 26px; } .vista-cs-related-back { text-align: center; margin-top: 30px; } /* 3-column grid for related section */ .vista-cs-grid-3col { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .vista-cs-grid-3col .vista-cs-card-img-wrap { height: 148px !important; } .vista-cs-grid-3col .vista-cs-card-body { padding: 12px 14px 16px !important; gap: 5px !important; } .vista-cs-grid-3col .vista-cs-card-title a { font-size: 1.65rem !important; } .vista-cs-grid-3col .vista-cs-card-cat-label { font-size: 10px !important; } .vista-cs-grid-3col .vista-cs-read-more { font-size: 12px !important; padding-top: 3px !important; } @media (max-width: 860px) { .vista-cs-grid-3col { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .vista-cs-grid-3col { grid-template-columns: 1fr !important; } .vista-cs-grid-3col .vista-cs-card-img-wrap { height: 180px !important; } } .vista-cs-btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--vista-cs-primary); color: var(--vista-cs-primary); text-decoration: none; font-size: 14px; font-weight: 700; padding: 11px 26px; border-radius: 6px; transition: var(--vista-cs-transition); } .vista-cs-btn-outline:hover { background: var(--vista-cs-primary); color: var(--vista-cs-primary-text); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 900px) { .vista-cs-grid { grid-template-columns: repeat(var(--vista-cs-cols-tablet, 2), 1fr); } } @media (max-width: 640px) { .vista-cs-grid { grid-template-columns: repeat(var(--vista-cs-cols-mobile, 1), 1fr); } .vista-cs-meta-strip-inner { flex-direction: column; } .vista-cs-meta-item { border-right: none; border-bottom: 1px solid var(--vista-cs-card-border); padding: 15px 0; margin: 0; } .vista-cs-meta-item:last-child { border-bottom: none; } .vista-cs-section { flex-direction: column; padding: 20px; } .vista-cs-single-hero { min-height: 280px; } .vista-cs-stats-row { grid-template-columns: repeat(2, 1fr); } }