/* ════════════════════════════════════════════════════════════════ CASE STUDY TEMPLATE — case-study.css Prefix: cs- REUSABILITY GUIDE ───────────────── • Everything in this file is TEMPLATE code. Never modify for a single project — it must remain identical across all cases. • Only the HTML content inside [CONTENT] comment blocks changes. • The project accent color is set via --cs-accent on . Example: style="--cs-accent:#06B6D4; --cs-accent-bg:rgba(6,182,212,0.10); --cs-accent-border:rgba(6,182,212,0.28)" ════════════════════════════════════════════════════════════════ */ /* ── Accent fallback (brand blue when no project accent set) ── */ :root { --cs-accent: var(--color-brand-primary); --cs-accent-bg: var(--color-brand-faint); --cs-accent-border: var(--color-border-brand); --cs-accent-glow: rgba(27, 142, 248, 0.18); } /* ══════════════════════════════════════════════════ SCROLL-REVEAL ══════════════════════════════════════════════════ */ .cs-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .cs-reveal.is-visible { opacity: 1; transform: none; } .cs-reveal[data-delay="1"] { transition-delay: 0.08s; } .cs-reveal[data-delay="2"] { transition-delay: 0.16s; } .cs-reveal[data-delay="3"] { transition-delay: 0.24s; } .cs-reveal[data-delay="4"] { transition-delay: 0.32s; } .cs-reveal[data-delay="5"] { transition-delay: 0.40s; } .cs-reveal[data-delay="6"] { transition-delay: 0.48s; } /* ══════════════════════════════════════════════════ SECTION SHARED PATTERNS ══════════════════════════════════════════════════ */ .cs-section { position: relative; padding-block: var(--space-12); overflow: hidden; } .cs-section::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.07) 70%, transparent 100% ); pointer-events: none; } /* Section header */ .cs-section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .cs-section-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-brand-light); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .cs-section-label-line { display: block; width: 24px; height: 1.5px; background: var(--color-brand-primary); border-radius: 2px; flex-shrink: 0; } .cs-section-heading { font-family: 'Manrope', var(--font-sans); font-size: var(--text-4xl); font-weight: var(--font-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin: 0; } .cs-section-heading-accent { background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cs-section-desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 500px; margin: 0; } /* ══════════════════════════════════════════════════ SECTION 1 — PROJECT HERO cs-hero-* ══════════════════════════════════════════════════ */ .cs-hero { position: relative; padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-10)); padding-bottom: var(--space-12); overflow: hidden; } /* Ambient radial glow behind hero */ .cs-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .cs-hero__bg-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse 80% 60% at 50% 10%, var(--cs-accent-glow, rgba(27,142,248,0.16)) 0%, transparent 70%); pointer-events: none; } .cs-hero .container { position: relative; z-index: 1; } /* Breadcrumb */ .cs-hero__breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.68); /* WCAG AA 4.5:1: 0.62 measured 4.49:1 (fails by a hair); 0.68 clears the threshold with margin */ text-decoration: none; margin-bottom: var(--space-5); transition: color var(--duration-normal) var(--ease-out); cursor: pointer; } .cs-hero__breadcrumb:hover { color: var(--color-text-secondary); } .cs-hero__breadcrumb svg { transition: transform var(--duration-normal) var(--ease-out); } .cs-hero__breadcrumb:hover svg { transform: translateX(-3px); } /* Layout grid: 55 / 45 */ .cs-hero__layout { display: grid; grid-template-columns: 55fr 45fr; gap: var(--space-8); align-items: center; } /* ── Hero content (left col) ── */ .cs-hero__content { display: flex; flex-direction: column; gap: var(--space-4); } /* Industry badge */ .cs-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; background: var(--cs-accent-bg); border: 1px solid var(--cs-accent-border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); /* WCAG AA 4.5:1: raw var(--cs-accent) on var(--cs-accent-bg) measured only 3.52:1 on the hero's dark background. Lightening the accent by 25% white (without touching the --cs-accent variable itself, which other on-brand elements rely on at full saturation) clears the threshold while still reading as the page's accent hue. */ color: color-mix(in srgb, var(--cs-accent) 75%, white 25%); letter-spacing: var(--tracking-wide); text-transform: uppercase; width: fit-content; } .cs-hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-accent); flex-shrink: 0; animation: cs-badge-pulse 2.4s ease-in-out infinite; } @keyframes cs-badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } /* Project title */ .cs-hero__title { font-family: 'Manrope', var(--font-sans); font-size: var(--text-5xl); font-weight: var(--font-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin: 0; } /* Short description */ .cs-hero__desc { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 520px; margin: 0; } /* Tech badges row */ .cs-hero__tech { display: flex; flex-wrap: wrap; gap: var(--space-1); } .cs-hero__tag { font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-medium); color: var(--color-brand-light); background: var(--color-brand-faint); border: 1px solid var(--color-border-brand); border-radius: var(--radius-sm); padding: 4px 10px; letter-spacing: 0.01em; } /* CTAs */ .cs-hero__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* ── Hero visual (right col) ── */ .cs-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } /* ── Device: browser frame ── */ .cs-device { position: relative; width: 100%; max-width: 520px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 60px var(--cs-accent-glow, rgba(27, 142, 248, 0.12)); transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); animation: cs-device-float 6s ease-in-out infinite; } @keyframes cs-device-float { 0%, 100% { transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateY(0px); } 50% { transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateY(-8px); } } .cs-device:hover { transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg) translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px var(--cs-accent-glow, rgba(27, 142, 248, 0.18)); animation-play-state: paused; } /* Browser chrome */ .cs-device__chrome { background: var(--color-bg-elevated); padding: 10px 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cs-device__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .cs-device__dot--red { background: #ff5f57; } .cs-device__dot--amber { background: #febc2e; } .cs-device__dot--green { background: #28c840; } .cs-device__urlbar { flex: 1; height: 22px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; /* WCAG 2 AA contrast fix: 0.28 gave 2.46:1 against the urlbar's dark background (axe-core color-contrast, needs 4.5:1 at this font size). */ color: rgba(255, 255, 255, 0.60); gap: 5px; } /* App shell */ .cs-device__app { display: grid; grid-template-columns: 140px 1fr; min-height: 300px; background: var(--color-bg-base); } /* Sidebar */ .cs-device__sidebar { background: var(--color-bg-surface); border-right: 1px solid rgba(255, 255, 255, 0.06); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .cs-device__sidebar-brand { display: flex; align-items: center; gap: 6px; padding: 4px 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 8px; } .cs-device__sidebar-logo { width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--cs-accent); opacity: 0.9; } .cs-device__sidebar-name { font-size: 10px; font-weight: var(--font-semibold); color: rgba(255, 255, 255, 0.70); font-family: var(--font-sans); } .cs-device__nav-item { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 10.5px; /* WCAG 2 AA contrast fix: 0.38 gave 3.55:1 against the sidebar background (axe-core color-contrast, needs 4.5:1 at this font size). */ color: rgba(255, 255, 255, 0.55); } .cs-device__nav-item--active { background: var(--cs-accent-bg); /* WCAG AA 4.5:1: raw var(--cs-accent) on var(--cs-accent-bg) measured only 2.94:1 against the sidebar background for some accent hues. Lightening by 25% white (without touching --cs-accent itself) clears the threshold while still reading as the page's accent hue. */ color: color-mix(in srgb, var(--cs-accent) 75%, white 25%); } .cs-device__nav-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Main area */ .cs-device__main { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .cs-device__topbar { display: flex; align-items: center; justify-content: space-between; } .cs-device__greeting { font-size: 11px; font-weight: var(--font-semibold); color: rgba(255, 255, 255, 0.80); } .cs-device__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--cs-accent) 0%, rgba(255,255,255,0.3) 100%); } /* Stat mini-cards */ .cs-device__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cs-device__stat { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); padding: 8px 7px 6px; display: flex; flex-direction: column; gap: 2px; } .cs-device__stat-val { font-size: 12px; font-weight: var(--font-extrabold); color: var(--color-text-primary); font-family: 'Manrope', var(--font-sans); line-height: 1; } .cs-device__stat-lbl { font-size: 8.5px; /* WCAG 2 AA contrast fix: 0.35 gave 3.17:1 against the stat card background (axe-core color-contrast, needs 4.5:1 at this font size). */ color: rgba(255, 255, 255, 0.55); line-height: 1.2; } /* Chart area */ .cs-device__chart { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); padding: 10px 12px 8px; } .cs-device__chart-title { font-size: 9.5px; font-weight: var(--font-semibold); color: rgba(255, 255, 255, 0.50); margin-bottom: 10px; } .cs-device__bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; } .cs-device__bar { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--cs-accent) 0%, color-mix(in srgb, var(--cs-accent) 40%, transparent) 100%); opacity: 0.8; transform-origin: bottom; animation: cs-bar-grow 1s var(--ease-out) both; } @keyframes cs-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .cs-device__bar:nth-child(1) { height: 55%; animation-delay: 0.1s; } .cs-device__bar:nth-child(2) { height: 75%; animation-delay: 0.15s; } .cs-device__bar:nth-child(3) { height: 45%; animation-delay: 0.2s; } .cs-device__bar:nth-child(4) { height: 90%; animation-delay: 0.25s; opacity: 1; } .cs-device__bar:nth-child(5) { height: 62%; animation-delay: 0.3s; } .cs-device__bar:nth-child(6) { height: 80%; animation-delay: 0.35s; } .cs-device__bar:nth-child(7) { height: 50%; animation-delay: 0.4s; } .cs-device__bar:nth-child(8) { height: 70%; animation-delay: 0.45s; } /* Table rows */ .cs-device__table { display: flex; flex-direction: column; gap: 4px; } .cs-device__table-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.025); border-radius: var(--radius-xs); border: 1px solid rgba(255, 255, 255, 0.04); } .cs-device__table-name { font-size: 10px; color: rgba(255,255,255,0.65); } /* WCAG 2 AA contrast fix: 0.30 gave 2.69:1 against the table row background (axe-core color-contrast, needs 4.5:1 at this font size). */ .cs-device__table-time { font-size: 9.5px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); } .cs-device__table-status { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; } .cs-device__table-status--ok { background: rgba(34,197,94,0.15); color: #22C55E; } .cs-device__table-status--pend { background: rgba(245,158,11,0.15); color: #F59E0B; } /* Floating chips */ .cs-hero__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-semibold); color: var(--color-text-secondary); box-shadow: var(--shadow-md); white-space: nowrap; pointer-events: none; } .cs-hero__chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* All three chips float fully outside the device rather than inset with a positive (or insufficiently negative) top/bottom — the chip is ~33px tall, so anything less than that as a negative offset still lets its lower portion dip into the device's chrome bar / last table row. The previous offsets landed inside the device at nearly every breakpoint. */ .cs-hero__chip--tl { top: -38px; left: -20px; animation: cs-chip-float-a 5s ease-in-out infinite; } .cs-hero__chip--tr { top: -38px; right: -28px; animation: cs-chip-float-b 6s ease-in-out infinite; } .cs-hero__chip--bl { bottom: -38px; left: -28px; animation: cs-chip-float-c 5.5s ease-in-out infinite; } @keyframes cs-chip-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes cs-chip-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes cs-chip-float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ══════════════════════════════════════════════════ SECTION 2 — PROJECT OVERVIEW cs-overview-* ══════════════════════════════════════════════════ */ .cs-overview { position: relative; padding-block: var(--space-12); overflow: hidden; } .cs-overview::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent 100%); } /* Stat cards row */ .cs-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-8); } .cs-stat-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--card-radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); transition: border-color var(--duration-moderate) var(--ease-out), box-shadow var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-out); } .cs-stat-card:hover { border-color: var(--cs-accent-border); box-shadow: 0 0 20px var(--cs-accent-glow, rgba(27,142,248,0.10)); transform: translateY(-2px); } .cs-stat-card__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--cs-accent-bg); border: 1px solid var(--cs-accent-border); display: flex; align-items: center; justify-content: center; color: var(--cs-accent); margin-bottom: var(--space-1); } .cs-stat-card__label { font-size: var(--text-xs); font-weight: var(--font-semibold); /* rgba(255,255,255,0.60), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA 4.5:1 at mobile font size */ color: rgba(255, 255, 255, 0.60); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .cs-stat-card__value { font-family: 'Manrope', var(--font-sans); font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--color-text-primary); line-height: 1.2; letter-spacing: -0.02em; } .cs-stat-card__sub { font-size: var(--text-xs); color: var(--color-text-tertiary); } /* Overview text block */ .cs-overview__text { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); text-align: center; } .cs-overview__para { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0; } .cs-overview__para:first-child { font-size: var(--text-md); color: var(--color-text-primary); } .cs-overview__note { max-width: 800px; margin: 0 auto var(--space-4); text-align: center; font-size: var(--text-xs); /* rgba(255,255,255,0.58), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA 4.5:1 at this font size */ color: rgba(255, 255, 255, 0.58); } /* ══════════════════════════════════════════════════ SECTION 3 — KEY FEATURES cs-feat-* ══════════════════════════════════════════════════ */ .cs-features { } .cs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2-5); } .cs-feat-card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--color-border-subtle); border-radius: var(--card-radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transition: transform var(--duration-moderate) var(--ease-out), border-color var(--duration-moderate) var(--ease-out), box-shadow var(--duration-moderate) var(--ease-out); } .cs-feat-card:hover { transform: translateY(-4px); border-color: var(--cs-accent-border); box-shadow: 0 8px 28px var(--cs-accent-glow, rgba(27,142,248,0.10)); } .cs-feat-card__icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--cs-accent-bg); border: 1px solid var(--cs-accent-border); display: flex; align-items: center; justify-content: center; color: var(--cs-accent); flex-shrink: 0; transition: background var(--duration-moderate) var(--ease-out); } .cs-feat-card:hover .cs-feat-card__icon-wrap { background: rgba(255, 255, 255, 0.06); } .cs-feat-card__icon-svg { width: 20px; height: 20px; transition: transform var(--duration-moderate) var(--ease-bounce); } .cs-feat-card:hover .cs-feat-card__icon-svg { transform: scale(1.12); } .cs-feat-card__title { font-family: 'Manrope', var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); margin: 0; letter-spacing: -0.01em; } .cs-feat-card__desc { font-size: var(--text-sm); /* WCAG 2 AA contrast fix: the shared --color-text-tertiary token (rgba(255,255,255,0.45)) measured as low as 3.69:1 against this card's background (axe-core color-contrast, needs 4.5:1). Local override only — the --color-text-tertiary variable itself is left untouched since other components rely on it at its original value. */ color: rgba(255, 255, 255, 0.62); line-height: var(--leading-relaxed); margin: 0; } /* ══════════════════════════════════════════════════ SECTION 4 — TECHNOLOGY STACK cs-tech-* ══════════════════════════════════════════════════ */ .cs-techstack { } .cs-tech-groups { display: flex; flex-direction: column; gap: var(--space-3); max-width: 860px; margin: 0 auto; } .cs-tech-group { display: grid; grid-template-columns: 130px 1fr; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-border-subtle); border-radius: var(--card-radius); transition: border-color var(--duration-moderate) var(--ease-out); } .cs-tech-group:hover { border-color: var(--color-border-default); } .cs-tech-group__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-tertiary); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding-top: 4px; } .cs-tech-group__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } .cs-tech-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: var(--font-medium); color: var(--color-text-secondary); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 5px 12px; transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .cs-tech-chip:hover { color: var(--color-text-primary); border-color: var(--cs-accent-border); background: var(--cs-accent-bg); } .cs-tech-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-accent); flex-shrink: 0; } /* ══════════════════════════════════════════════════ SECTION 5 — PROJECT GALLERY cs-gallery-* ══════════════════════════════════════════════════ */ .cs-gallery { } /* Editorial grid: 1 wide on top, 2 medium below */ .cs-gallery__grid { display: grid; grid-template-rows: auto auto; gap: var(--space-2-5); } .cs-gallery__row { display: grid; gap: var(--space-2-5); } .cs-gallery__row--wide { grid-template-columns: 1fr; } .cs-gallery__row--split { grid-template-columns: 1fr 1fr; } .cs-gallery__row--tri { grid-template-columns: 2fr 1fr 1fr; } /* Gallery panel */ .cs-gallery-panel { position: relative; cursor: pointer; border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); transition: transform var(--duration-moderate) var(--ease-out), border-color var(--duration-moderate) var(--ease-out), box-shadow var(--duration-moderate) var(--ease-out); group: true; } .cs-gallery-panel:hover { transform: translateY(-4px); border-color: var(--cs-accent-border); box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px var(--cs-accent-border); } /* Zoom overlay on hover */ .cs-gallery-panel__zoom { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background var(--duration-moderate) var(--ease-out); z-index: 2; pointer-events: none; } .cs-gallery-panel:hover .cs-gallery-panel__zoom { background: rgba(0,0,0,0.28); } .cs-gallery-panel__zoom-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.20); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.7); transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-bounce); } .cs-gallery-panel:hover .cs-gallery-panel__zoom-icon { opacity: 1; transform: scale(1); } /* Panel caption */ .cs-gallery-panel__caption { padding: var(--space-2) var(--space-3); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); } .cs-gallery-panel__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary); } .cs-gallery-panel__tag { font-size: var(--text-2xs); font-weight: var(--font-medium); color: var(--color-text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xs); padding: 3px 8px; } /* ── CSS gallery screens ── */ .cs-gallery-screen { position: relative; overflow: hidden; } .cs-gallery-screen--tall { height: 380px; } .cs-gallery-screen--medium { height: 280px; } .cs-gallery-screen--short { height: 220px; } /* Screen 1: Full dashboard view */ .cs-screen-dashboard { display: grid; grid-template-columns: 160px 1fr; height: 100%; background: var(--color-bg-base); } .cs-screen-dashboard__sidebar { background: var(--color-bg-surface); border-right: 1px solid rgba(255,255,255,0.06); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; } .cs-screen-dashboard__nav { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 11px; color: rgba(255,255,255,0.35); } .cs-screen-dashboard__nav--active { background: var(--cs-accent-bg); color: var(--cs-accent); } .cs-screen-dashboard__nav-bar { width: 14px; height: 3px; border-radius: 2px; background: currentColor; flex-shrink: 0; } .cs-screen-dashboard__main { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .cs-screen-dashboard__header { display: flex; align-items: center; justify-content: space-between; } .cs-screen-dashboard__title { font-size: 14px; font-weight: var(--font-bold); color: rgba(255,255,255,0.85); font-family: 'Manrope', var(--font-sans); } .cs-screen-dashboard__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cs-screen-dashboard__kpi { background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); padding: 12px; } .cs-screen-dashboard__kpi-val { font-size: 18px; font-weight: var(--font-extrabold); color: #fff; font-family: 'Manrope', var(--font-sans); line-height: 1; } .cs-screen-dashboard__kpi-lbl { font-size: 9.5px; color: rgba(255,255,255,0.35); margin-top: 4px; } .cs-screen-dashboard__chart-area { background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); padding: 14px; flex: 1; } .cs-screen-dashboard__chart-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cs-screen-dashboard__chart-lbl { font-size: 11px; font-weight: var(--font-semibold); color: rgba(255,255,255,0.55); } .cs-screen-dashboard__bars-row { display: flex; align-items: flex-end; gap: 5px; height: 60px; } .cs-screen-dashboard__bar { flex: 1; border-radius: 2px 2px 0 0; opacity: 0.75; } .cs-screen-dashboard__bar:nth-child(odd) { background: linear-gradient(180deg, var(--cs-accent), transparent); } .cs-screen-dashboard__bar:nth-child(even) { background: rgba(255,255,255,0.10); } .cs-screen-dashboard__bar:nth-child(1) { height: 40%; } .cs-screen-dashboard__bar:nth-child(2) { height: 60%; } .cs-screen-dashboard__bar:nth-child(3) { height: 35%; } .cs-screen-dashboard__bar:nth-child(4) { height: 85%; opacity: 1; } .cs-screen-dashboard__bar:nth-child(5) { height: 55%; } .cs-screen-dashboard__bar:nth-child(6) { height: 70%; } .cs-screen-dashboard__bar:nth-child(7) { height: 48%; } .cs-screen-dashboard__bar:nth-child(8) { height: 63%; } .cs-screen-dashboard__bar:nth-child(9) { height: 42%; } .cs-screen-dashboard__bar:nth-child(10) { height: 75%; } .cs-screen-dashboard__bar:nth-child(11) { height: 55%; } .cs-screen-dashboard__bar:nth-child(12) { height: 80%; } /* Screen 2: Detail view */ .cs-screen-detail { display: grid; grid-template-columns: 1fr 1fr; height: 100%; background: var(--color-bg-base); gap: 0; } .cs-screen-detail__left { padding: 14px; border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 8px; } .cs-screen-detail__avatar-row { display: flex; align-items: center; gap: 10px; } .cs-screen-detail__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--cs-accent), rgba(255,255,255,0.2)); } .cs-screen-detail__name { font-size: 13px; font-weight: var(--font-bold); color: rgba(255,255,255,0.85); } .cs-screen-detail__meta { font-size: 10.5px; color: rgba(255,255,255,0.38); } .cs-screen-detail__field { background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 7px 12px; } .cs-screen-detail__field-lbl { font-size: 9px; color: rgba(255,255,255,0.30); margin-bottom: 3px; } .cs-screen-detail__field-val { font-size: 11.5px; color: rgba(255,255,255,0.70); } .cs-screen-detail__status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-semibold); background: rgba(34,197,94,0.12); color: #22C55E; width: fit-content; } .cs-screen-detail__right { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .cs-screen-detail__section-lbl { font-size: 10px; font-weight: var(--font-semibold); color: rgba(255,255,255,0.35); letter-spacing: 0.08em; text-transform: uppercase; } .cs-screen-detail__list-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .cs-screen-detail__list-item:last-child { border-bottom: none; } .cs-screen-detail__item-name { font-size: 11px; color: rgba(255,255,255,0.60); } .cs-screen-detail__item-val { font-size: 11px; font-weight: var(--font-semibold); color: rgba(255,255,255,0.80); } /* Screen 3: Analytics */ .cs-screen-analytics { height: 100%; background: var(--color-bg-base); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .cs-screen-analytics__header { display: flex; align-items: center; justify-content: space-between; } .cs-screen-analytics__title { font-size: 13px; font-weight: var(--font-bold); color: rgba(255,255,255,0.85); font-family: 'Manrope', var(--font-sans); } .cs-screen-analytics__tabs { display: flex; gap: 4px; } .cs-screen-analytics__tab { padding: 4px 10px; border-radius: var(--radius-xs); font-size: 10px; font-weight: var(--font-medium); color: rgba(255,255,255,0.35); background: transparent; cursor: pointer; } .cs-screen-analytics__tab--active { background: var(--cs-accent-bg); color: var(--cs-accent); } .cs-screen-analytics__line-chart { flex: 1; background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); padding: 14px; position: relative; overflow: hidden; } .cs-screen-analytics__line { position: absolute; bottom: 20px; left: 14px; right: 14px; height: 100px; } .cs-screen-analytics__path { fill: none; stroke: var(--cs-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .cs-screen-analytics__fill { fill: url(#cs-chart-gradient); opacity: 0.15; } .cs-screen-analytics__stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cs-screen-analytics__mini-stat { background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); padding: 12px; text-align: center; } .cs-screen-analytics__mini-val { font-size: 16px; font-weight: var(--font-extrabold); color: #fff; font-family: 'Manrope', var(--font-sans); } .cs-screen-analytics__mini-lbl { font-size: 9px; color: rgba(255,255,255,0.35); margin-top: 3px; } /* ══════════════════════════════════════════════════ LIGHTBOX cs-lightbox-* ══════════════════════════════════════════════════ */ .cs-lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); opacity: 0; pointer-events: none; transition: opacity var(--duration-moderate) var(--ease-out); } .cs-lightbox.is-open { opacity: 1; pointer-events: auto; } .cs-lightbox__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); cursor: pointer; } .cs-lightbox__panel { position: relative; z-index: 1; max-width: 1000px; width: 100%; border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--color-border-default); box-shadow: var(--shadow-2xl); transform: scale(0.94); transition: transform var(--duration-moderate) var(--ease-bounce); } .cs-lightbox.is-open .cs-lightbox__panel { transform: scale(1); } .cs-lightbox__close { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.80); cursor: pointer; transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); } .cs-lightbox__close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .cs-lightbox__close:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .cs-lightbox__content { width: 100%; } /* Caption inside lightbox */ .cs-lightbox__caption { background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-subtle); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } /* ══════════════════════════════════════════════════ SECTION 6 — RELATED PROJECTS cs-related-* ══════════════════════════════════════════════════ */ .cs-related { } .cs-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cs-related-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--card-radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform var(--duration-moderate) var(--ease-out), border-color var(--duration-moderate) var(--ease-out), box-shadow var(--duration-moderate) var(--ease-out); } .cs-related-card:hover { transform: translateY(-6px); border-color: var(--color-border-default); box-shadow: var(--shadow-xl); } .cs-related-card:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; } /* Thumbnail — CSS gradient panel */ .cs-related-card__thumb { position: relative; height: 180px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cs-related-card__thumb-bg { position: absolute; inset: 0; } .cs-related-card__thumb-glow { position: absolute; inset: 0; background: var(--gradient-surface); opacity: 0.6; } .cs-related-card__thumb-screen { position: relative; z-index: 1; width: 80%; height: 75%; background: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; box-shadow: var(--shadow-lg); } .cs-related-card__industry { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; font-size: var(--text-2xs); font-weight: var(--font-semibold); padding: 4px 10px; border-radius: var(--radius-full); letter-spacing: var(--tracking-wider); text-transform: uppercase; } /* Related card body */ .cs-related-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .cs-related-card__title { font-family: 'Manrope', var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); margin: 0; letter-spacing: -0.01em; line-height: var(--leading-snug); } .cs-related-card__desc { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.68); /* WCAG AA 4.5:1: 0.62 measured 4.47:1 (fails by a hair); 0.68 clears the threshold with margin */ margin: 0; line-height: var(--leading-relaxed); flex: 1; } .cs-related-card__cta { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-brand-light); text-decoration: none; transition: gap var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); margin-top: auto; } .cs-related-card:hover .cs-related-card__cta { gap: 11px; color: var(--color-text-primary); } .cs-related-card__cta svg { flex-shrink: 0; } /* ══════════════════════════════════════════════════ PROJECT PREV/NEXT NAVIGATION Sits between Related Projects and the footer on every case study page. Reuses the same card token set (--card-radius, --card-transition, --shadow-xl) as .cs-related-card for visual consistency. ══════════════════════════════════════════════════ */ .cs-project-nav { position: relative; padding-block: var(--space-10); } .cs-project-nav::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent 100%); } .cs-project-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .cs-project-nav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--card-radius); text-decoration: none; transition: var(--card-transition); min-width: 0; } .cs-project-nav__link:hover { transform: translateY(-4px); border-color: var(--color-border-default); box-shadow: var(--shadow-xl); } .cs-project-nav__link:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; } .cs-project-nav__link--next { justify-content: flex-end; text-align: right; } .cs-project-nav__link--next .cs-project-nav__text { align-items: flex-end; } /* First/last project in the sequence: only one link renders. Span the full row instead of leaving an empty grid cell. */ .cs-project-nav__grid > .cs-project-nav__link:only-child { grid-column: 1 / -1; } .cs-project-nav__arrow { font-size: 20px; line-height: 1; color: var(--cs-accent); flex-shrink: 0; transition: transform var(--duration-normal) var(--ease-out); } .cs-project-nav__link--prev:hover .cs-project-nav__arrow { transform: translateX(-4px); } .cs-project-nav__link--next:hover .cs-project-nav__arrow { transform: translateX(4px); } .cs-project-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cs-project-nav__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: rgba(255, 255, 255, 0.68); /* WCAG AA 4.5:1: 0.62 measured 4.47:1 (fails by a hair); 0.68 clears the threshold with margin */ text-transform: uppercase; letter-spacing: var(--tracking-wider); } .cs-project-nav__title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-primary); font-family: 'Manrope', var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (max-width: 767px) { .cs-project-nav__grid { grid-template-columns: 1fr; gap: var(--space-3); } .cs-project-nav__link--next { justify-content: flex-start; text-align: left; } .cs-project-nav__link--next .cs-project-nav__text { align-items: flex-start; } .cs-project-nav__title { white-space: normal; } } /* ══════════════════════════════════════════════════ SECTION 7 — FINAL CTA Reuses .services-cta from style.css cs-cta-wrap only adds section padding ══════════════════════════════════════════════════ */ .cs-cta-section { position: relative; padding-block: var(--space-12); overflow: hidden; } .cs-cta-section::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent 100%); } /* ══════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════ */ /* ── xl (1024px–1279px) ── */ @media (max-width: 1279px) { .cs-hero__title { font-size: var(--text-4xl); } .cs-stat-grid { gap: var(--space-1-5); } .cs-feat-grid { gap: var(--space-2); } .cs-tech-group { grid-template-columns: 110px 1fr; } } /* ── md (768px–1023px) ── */ @media (max-width: 1023px) { .cs-hero__layout { grid-template-columns: 1fr; gap: var(--space-6); } .cs-hero__content { text-align: center; align-items: center; } .cs-hero__desc { max-width: 100%; } .cs-hero__actions { justify-content: center; } .cs-hero__visual { justify-content: center; } .cs-device { transform: perspective(1200px) rotateY(0deg) rotateX(2deg); max-width: 480px; } @keyframes cs-device-float { 0%, 100% { transform: perspective(1200px) rotateY(0deg) rotateX(2deg) translateY(0px); } 50% { transform: perspective(1200px) rotateY(0deg) rotateX(2deg) translateY(-8px); } } .cs-hero__chip--tl { top: -38px; left: 0; } .cs-hero__chip--tr { top: -38px; right: 0; } .cs-hero__chip--bl { bottom: -38px; left: 0; } .cs-section-heading { font-size: var(--text-3xl); } .cs-stat-grid { grid-template-columns: repeat(2, 1fr); } .cs-feat-grid { grid-template-columns: repeat(2, 1fr); } .cs-gallery__row--tri { grid-template-columns: 1fr 1fr; } .cs-related__grid { grid-template-columns: 1fr 1fr; } } /* ── sm (480px–767px) ── */ @media (max-width: 767px) { .cs-hero { padding-top: calc(64px + var(--header-top-offset) + var(--space-6)); padding-bottom: var(--space-8); } .cs-hero__title { font-size: clamp(1.8rem, 7vw, 2.5rem); } .cs-section { padding-block: var(--space-8); } .cs-section-heading { font-size: clamp(1.6rem, 6vw, var(--text-3xl)); } .cs-stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-1-5); } .cs-feat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-1-5); } .cs-feat-card { padding: var(--space-3); } .cs-tech-group { grid-template-columns: 1fr; gap: var(--space-1-5); padding: var(--space-2-5); } .cs-tech-group__label { padding-top: 0; } .cs-gallery__row--split { grid-template-columns: 1fr; } .cs-gallery__row--tri { grid-template-columns: 1fr; } .cs-related__grid { grid-template-columns: 1fr; } } /* ── Gallery mini-app mockups (≤575px) ── .cs-screen-dashboard/.cs-screen-detail are fixed-layout CSS mockups (160px sidebar, 4-col KPI grid, 2-col detail grid) that don't reflow — below 576px the fixed columns exceed the panel's actual width, and .cs-gallery-screen's overflow:hidden + fixed height silently clips the overflowing content (e.g. the 4th KPI stat, the "Last Visit" field) instead of visibly breaking. Stack both mockups to a single column and let the panel height grow to fit instead of clipping. */ @media (max-width: 575px) { .cs-gallery-screen--tall, .cs-gallery-screen--medium { height: auto; } /* .cs-screen-analytics also uses --medium but was never broken (its 3-col mini-stats already fit at every width) — its internal flex layout depends on the parent having a definite height, so restore that explicitly rather than letting the auto override above cascade into it and collapse the chart's flex:1 sizing to zero. */ .cs-screen-analytics { height: 280px; } .cs-screen-dashboard { grid-template-columns: 1fr; } .cs-screen-dashboard__sidebar { display: none; } .cs-screen-dashboard__kpis { grid-template-columns: repeat(2, 1fr); } .cs-screen-detail { grid-template-columns: 1fr; } .cs-screen-detail__left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } } /* ── Gallery "detail" mockup — tablet split clipping (768px–1023px) ── .cs-gallery__row--split renders its two panels side by side from 768px up, at half the section width. In that half-width column the .cs-screen-detail__left title/meta text (e.g. a longer course name + "Course ID: #..." string, or a longer product name + SKU string) wraps to extra lines, pushing the left column's content past the fixed 280px .cs-gallery-screen--medium height — silently clipped by overflow:hidden (e.g. the "Published On" field disappears under the caption bar) instead of visibly breaking. The exact width at which the wrap happens depends on each page's own text length — one project's content clipped only up to 959px, another clipped up to 997px — so this upper bound is aligned to the template's own "md" breakpoint (768px–1023px, see the (max-width: 1023px) block above) rather than a narrower value tuned to a single page's content. Give both --medium screens a little more room across the whole md range; the Analytics screen already fits in 280px so the extra space just adds breathing room under its chart rather than causing any regression. */ @media (min-width: 768px) and (max-width: 1023px) { .cs-gallery-screen--medium { height: 320px; } } /* ── xs (≤479px) ── */ @media (max-width: 479px) { .cs-hero__title { font-size: clamp(1.6rem, 8vw, 2rem); } .cs-hero__actions { flex-direction: column; align-items: stretch; } .cs-hero__actions .btn { justify-content: center; } .cs-stat-grid { grid-template-columns: 1fr 1fr; } .cs-feat-grid { grid-template-columns: 1fr; } .cs-device__app { grid-template-columns: 1fr; } .cs-device__sidebar { display: none; } .cs-device__stats { grid-template-columns: repeat(2, 1fr); } } /* ── very small (≤374px) ── */ @media (max-width: 374px) { .cs-stat-grid { grid-template-columns: 1fr; } .cs-hero__tech { justify-content: center; } }