/* ========================================================================== Case study pages — shared layout, sections, and components. Used by all case study HTML files. Depends on tokens.css + base.css (shared nav internals live in base.css; this file only positions the bar). Per-page header wash is applied via a `theme-*` class on (see the THEMES block at the bottom). Add a new case study by authoring one HTML file and giving it a theme class — no CSS copy-paste. ========================================================================== */ /* ========== FIXED BG LAYER (same as homepage) ========== */ #bg-layer { position: fixed; inset: 0; z-index: 0; background: radial-gradient(70% 60% at -5% 0%, var(--bg-pink) 0%, transparent 65%), radial-gradient(45% 55% at 100% 35%, var(--bg-lilac) 0%, transparent 60%), var(--c-white); } #bg-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0.42; pointer-events: none; } /* ========== NAV (positioning only; internals in base.css) ========== */ .top-nav { position: relative; z-index: 10; border-bottom: 1px solid var(--c-border-nav); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========== CASE STUDY HEADER ========== */ .cs-header { position: relative; isolation: isolate; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 20px; padding-bottom: 0; background: var(--c-white); } .cs-header-content { position: relative; z-index: 2; width: 1028px; max-width: calc(100% - 32px); display: flex; flex-direction: column; align-items: center; gap: 0; padding-bottom: 40px; } /* A hero image already sits flush against the header's bottom edge, so it supplies its own visual close — no extra padding needed after it. */ .cs-header-content:has(.cs-header-hero-img) { padding-bottom: 0; } /* Breadcrumbs */ .cs-breadcrumbs { width: 100%; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; margin-bottom: 40px; } .cs-breadcrumbs span { color: rgba(0, 0, 0, 0.30); } .cs-breadcrumbs span:last-child { color: var(--c-gray-600); } .cs-breadcrumbs a { color: rgba(0, 0, 0, 0.30); text-decoration: none; transition: color 0.15s; } .cs-breadcrumbs a:hover { color: var(--c-gray-600); } /* Chips */ .cs-chips { display: flex; gap: 8px; margin-bottom: 16px; } .cs-chip { background: rgba(255, 255, 255, 0.60); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 500; color: var(--c-gray-600); white-space: nowrap; } /* Title block */ .cs-title-block { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; width: 680px; max-width: 100%; } .cs-title { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--c-ink); letter-spacing: -0.3px; line-height: 1.3; /* Reserves space for up to 2 lines so header height stays consistent across case studies whose titles happen to wrap to 1 vs 2 lines. */ min-height: calc(1.3em * 2); display: flex; align-items: center; justify-content: center; } .cs-subtitle { font-size: 16px; color: var(--c-gray-600); line-height: 1.65; /* Reserves space for up to 3 lines so header height stays consistent across case studies whose subtitles happen to wrap to 2 vs 3 lines. */ min-height: calc(1.65em * 3); display: flex; align-items: center; justify-content: center; } .cs-teal-rule { width: 56px; height: 3px; background: var(--c-teal); border-radius: 2px; } /* Header hero image: lives inside .cs-header-content so the header's own gradient background extends behind it. Every case study's hero is sized to the same fixed height (rather than a fixed width) so all three case study headers line up at an identical total height, regardless of each hero composite's native aspect ratio — width is derived from height to avoid any cropping or distortion. */ .cs-header-hero-img { height: 291px; width: auto; max-width: calc(100% - 32px); display: block; margin-top: 24px; } @media (max-width: 700px) { .cs-header-hero-img { height: auto; width: 100%; } } /* ========== META BAR ========== */ .cs-meta { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; background: rgba(255, 255, 255, 0.60); border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .cs-meta-inner { width: 1028px; max-width: calc(100% - 32px); display: flex; gap: 16px; align-items: stretch; } .meta-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 0; justify-content: center; } .meta-label { font-size: 13px; font-weight: 500; color: var(--c-ink); } .meta-value { font-size: 13px; color: var(--c-gray-600); line-height: 1.5; font-variation-settings: 'opsz' 14; } .meta-value strong { font-weight: 600; color: var(--c-ink-soft); font-variation-settings: 'opsz' 14; } .meta-divider { width: 0; flex-shrink: 0; align-self: stretch; position: relative; } .meta-divider::after { content: ''; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: rgba(0, 0, 0, 0.10); } /* ========== CONTENT LAYOUT ========== */ .cs-content { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; padding: 0 16px 80px; } .cs-layout { width: 1028px; max-width: 100%; display: flex; gap: 40px; align-items: flex-start; } /* ========== SIDEBAR ========== */ .cs-sidebar { width: 180px; flex-shrink: 0; position: sticky; top: 88px; padding: 60px 0; } .cs-sidenav { display: flex; flex-direction: column; } .cs-sidenav a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; text-decoration: none; font-size: 13px; font-weight: 400; color: rgba(0, 0, 0, 0.25); transition: color 0.18s; position: relative; line-height: 1.4; } .cs-sidenav a::before { content: ''; width: 2px; align-self: stretch; flex-shrink: 0; background: rgba(0, 0, 0, 0.08); border-radius: 1px; transition: background 0.18s; } .cs-sidenav a:hover { color: var(--c-gray-500); } .cs-sidenav a:hover::before { background: rgba(0, 0, 0, 0.20); } .cs-sidenav a.active { color: var(--c-gray-600); font-weight: 500; } .cs-sidenav a.active::before { background: linear-gradient(to bottom, var(--c-purple), var(--c-violet)); } /* ========== BODY CONTENT ========== */ .cs-body { flex: 1; min-width: 0; padding: 60px 20px; display: flex; flex-direction: column; } .cs-section { border-bottom: 1px solid var(--c-border-gray); padding-bottom: 60px; margin-bottom: 60px; scroll-margin-top: 20px; } .cs-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* The section's own padding-bottom already reserves the gap before the divider, so the last content element shouldn't also contribute its own bottom margin — otherwise the two stack (e.g. 60px + 60px on an image/video block instead of just 60px). */ .cs-section > *:last-child { margin-bottom: 0; } .cs-section-label { font-size: 11px; font-weight: 500; color: var(--c-purple-hover); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } .cs-section-rule { width: 28px; height: 2px; background: linear-gradient(to right, var(--c-purple), var(--c-violet)); border-radius: 2px; margin-bottom: 16px; } .cs-section-heading { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--c-ink); letter-spacing: -0.3px; line-height: 1.25; margin-bottom: 20px; } .cs-body-text { font-size: 15px; color: var(--c-gray-600); line-height: 1.75; margin-bottom: 16px; } .cs-body-text:last-child { margin-bottom: 0; } /* ========== PULL-QUOTE CALLOUT ========== */ .cs-callout { background: var(--c-surface-lavender); border-left: 3px solid var(--c-purple-hover); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 24px 0; } .cs-callout p { font-size: 15px; color: var(--c-ink-soft); line-height: 1.65; } /* ========== 2×2 STAT CARDS ========== */ .cs-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; } .cs-stat-card { background: var(--c-surface-lavender); border: 1px solid var(--c-border-lavender); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 8px; } .cs-stat-card-number { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--c-purple); letter-spacing: -1px; line-height: 1; } .cs-stat-card-label { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-top: 4px; } .cs-stat-card-desc { font-size: 12px; color: var(--c-gray-400); line-height: 1.4; } /* Text-only variant (title + description, no stat number) */ .cs-stat-card--info .cs-stat-card-label { margin-top: 0; } .cs-stat-card--info .cs-stat-card-desc { font-size: 13px; color: var(--c-gray-500); line-height: 1.6; } /* ========== NUMBERED ITEMS ========== */ .cs-numbered-items { display: flex; flex-direction: column; gap: 8px; margin: 28px 0; } .cs-numbered-item { background: var(--c-surface-lavender); border: 1px solid var(--c-border-lavender); border-radius: var(--radius-card); padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; } .cs-numbered-item-num { width: 30px; height: 30px; border-radius: 50%; background: var(--c-purple); color: var(--c-white); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .cs-numbered-item-title { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 4px; } .cs-numbered-item-title:last-child { margin-bottom: 0; } .cs-numbered-item-desc { font-size: 13px; color: var(--c-gray-500); line-height: 1.55; } /* ========== SHIFT CARDS (3-col by default, 2-col modifier) ========== */ .cs-shift-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 28px 0; } .cs-shift-cards--2 { grid-template-columns: 1fr 1fr; } .cs-shift-card { background: var(--c-surface-lavender); border: 1px solid var(--c-border-lavender); border-radius: var(--radius-card); padding: 20px 16px; text-align: center; } .cs-shift-card-label { font-size: 10px; font-weight: 500; color: var(--c-gray-400); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; } .cs-shift-card-text { font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.45; } /* Optional lighter subline inside a shift card. */ .cs-shift-card-sub { font-size: 13px; color: var(--c-gray-500); line-height: 1.5; margin-top: 4px; } /* ========== BULLET LIST (plain copy lists, e.g. open questions) ========== */ .cs-list { list-style: none; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; } .cs-list li { position: relative; padding-left: 20px; font-size: 15px; color: var(--c-gray-600); line-height: 1.75; } .cs-list li::before { content: ''; position: absolute; left: 4px; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-violet); } /* ========== IMPACT BULLET LIST ========== */ .cs-impact-list { display: flex; flex-direction: column; gap: 24px; margin: 32px 0; } .cs-impact-item { display: flex; gap: 12px; align-items: flex-start; } .cs-impact-bar { width: 3px; background: var(--c-purple); border-radius: 2px; flex-shrink: 0; align-self: stretch; } .cs-impact-item-title { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 4px; } .cs-impact-item-desc { font-size: 14px; color: var(--c-gray-500); line-height: 1.55; } /* ========== SUB-SECTION CALLOUT ========== */ .cs-sub-callout { background: var(--c-surface-lavender); border: 1px solid var(--c-border-lavender); border-radius: var(--radius-card); padding: 24px 28px; margin: 28px 0; } .cs-sub-callout-title { font-size: 16px; font-weight: 600; color: var(--c-purple); margin-bottom: 12px; } /* Numbered items nested inside a sub-callout sit on a lavender surface, so give them a white surface for contrast. */ .cs-sub-callout .cs-numbered-items { margin: 20px 0; } .cs-sub-callout .cs-numbered-item { background: var(--c-white); } /* ========== RESULT CALLOUT (success) ========== */ .cs-result-callout { background: var(--c-surface-success); border: 1px solid var(--c-border-success); border-radius: var(--radius-card); padding: 24px 28px; margin: 28px 0; } .cs-result-callout-title { font-size: 15px; font-weight: 600; color: var(--c-ink-success); margin-bottom: 8px; } .cs-result-callout p { font-size: 15px; color: var(--c-ink-success); line-height: 1.65; } .cs-result-callout p strong { font-weight: 700; } /* ========== SHARED ASSET TREATMENT ========== Every image/video in case-study content gets the same uniform corner radius + soft drop shadow, with no background wash behind it — the asset itself is the visual. */ .cs-image-block img, .cs-compare-item img, .cs-compare-item video, .cs-dual-grid-item img, .cs-video { border-radius: var(--radius-sm); box-shadow: var(--shadow-asset); display: block; } .cs-image-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 40px 0; } .cs-image-block img { width: 100%; height: auto; } .cs-image-block .cs-caption-label { margin: 0; text-align: center; } .cs-flow-image { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; } /* ========== VIDEO FRAME (autoplay-on-scroll demos) ========== */ .cs-video-frame { width: 100%; display: flex; justify-content: center; margin: 24px 0; padding: 20px 0; } .cs-video-frame video.cs-video { width: 100%; height: auto; } /* App-UI videos whose source frames have rounded corners baked in — a larger radius clips the black corners left by the opaque encode. */ .cs-video--rounded { border-radius: 16px; background: transparent; } /* ========== CAPTION LABELS (one style, three placements) ========== */ .cs-caption-label, .cs-flow-label, .cs-dual-grid-item figcaption { font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-gray-400); } .cs-caption-label--center { text-align: center; } .cs-flow-label { margin: 0 0 16px; } .cs-dual-grid-item figcaption { text-align: center; } /* ========== COMPARE ROW (two images or videos side-by-side with an arrow) ========== */ .cs-compare-block { display: flex; flex-direction: column; width: 100%; gap: 24px; margin: 60px 0; } .cs-compare-row { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; } .cs-compare-item { flex: 1 1 0; min-width: 0; } .cs-compare-item img, .cs-compare-item video { width: 100%; height: auto; } .cs-compare-arrow { flex: 0 0 auto; display: flex; align-items: center; color: var(--c-purple); /* inline SVG arrows use currentColor */ } /* ========== PLAIN SUB-HEADING (bold in-section heading, no callout box) ========== */ .cs-subheading { font-size: 15px; font-weight: 600; color: var(--c-ink); margin: 32px 0 12px; } /* ========== EMBEDDED VISUAL INSIDE A NUMBERED ITEM ========== */ .cs-numbered-item-visual { margin-top: 16px; } .cs-numbered-item-visual img { max-width: 100%; height: auto; display: block; /* Shadow lives in CSS, not baked into the SVG: an internal SVG gets rasterized at a fixed resolution by some browsers (notably mobile Safari) before the image is scaled to its display size, making the whole asset look blurry on retina screens. drop-shadow hugs the visible shape (unlike box-shadow, which would shadow the SVG's full transparent bounding box) and is composited without that resolution bug. */ filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 -1px 4px rgba(0, 0, 0, 0.05)); } /* ========== DUAL IMAGE GRID (two side-by-side captioned screenshots) ========== */ .cs-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; margin: 60px 0; } .cs-dual-grid-item { display: flex; flex-direction: column; gap: 16px; align-items: center; } .cs-dual-grid-item img { width: 100%; height: auto; } /* 3-up variant (phone screenshots). The assets carry their own baked-in corners/shadows and transparency, so the shared shadow is opted out — a CSS box-shadow would draw a rectangle around the transparent frame. */ .cs-dual-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .cs-dual-grid--3 .cs-dual-grid-item img { box-shadow: none; border-radius: 0; } /* Bare image block: same opt-out for full-width composites whose shadows are baked into the asset itself. */ .cs-image-block--bare img { box-shadow: none; border-radius: 0; } /* ========== GOVERNANCE FLOW STEPS (stacked full-width composites inside callout) ========== */ .cs-flow-step { width: 100%; padding: 20px 0; } .cs-flow-step:first-child { padding-top: 0; } /* ========== FOOTER NAV ========== */ .cs-footer-wrap { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; padding: 0 16px 80px; } .cs-footer-nav { width: 1028px; max-width: 100%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-border-gray); padding-top: 32px; } .cs-footer-back { font-size: 13px; font-weight: 500; color: var(--c-gray-400); text-decoration: none; transition: color 0.18s; } .cs-footer-back:hover { color: var(--c-gray-600); } .cs-footer-next, .cs-footer-prev { display: flex; align-items: center; gap: 16px; text-decoration: none; } .cs-footer-next-text, .cs-footer-prev-text { display: flex; flex-direction: column; gap: 4px; } .cs-footer-next-text { align-items: flex-end; } .cs-footer-prev-text { align-items: flex-start; } .cs-footer-next-label, .cs-footer-prev-label { font-size: 10px; font-weight: 500; color: var(--c-purple-hover); text-transform: uppercase; letter-spacing: 2px; } .cs-footer-next-label { text-align: right; } .cs-footer-next-title, .cs-footer-prev-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--c-ink); letter-spacing: -0.2px; transition: color 0.18s; } .cs-footer-next-title { text-align: right; } .cs-footer-next:hover .cs-footer-next-title, .cs-footer-prev:hover .cs-footer-prev-title { color: var(--c-purple); } .cs-footer-chevron { flex-shrink: 0; } /* Right-aligned footer back link (used when there is no prev/next pair). */ .cs-footer-back--right { text-align: right; width: 100%; } /* ========== BACK TO TOP ========== */ .back-to-top { position: fixed; bottom: 28px; /* Anchor to the content column's right edge (.cs-layout is 980px, centered) plus a 28px gutter, not the viewport edge — otherwise it drifts far from the content on ultrawide screens. Below the width where the column hits its max, this matches the old flush 28px. */ right: max(28px, calc(50vw - 558px)); z-index: 80; width: 40px; height: 40px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-border-gray); color: var(--c-ink-soft); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity 0.22s, transform 0.22s, background 0.15s, color 0.15s; pointer-events: none; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:active { background: var(--c-purple); color: var(--c-white); border-color: var(--c-purple); } @media (hover: hover) { .back-to-top:hover { background: var(--c-purple); color: var(--c-white); border-color: var(--c-purple); } } /* ========== RESPONSIVE ========== */ @media (max-width: 768px) { /* Header */ .cs-breadcrumbs { margin-bottom: 20px; } .cs-title { font-size: 24px; } .cs-subtitle { font-size: 14px; } /* Meta bar: 2×2 grid */ .cs-meta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 100%; } .meta-divider { display: none; } .meta-item { padding: 12px 16px; } .cs-meta-inner > :nth-child(1), .cs-meta-inner > :nth-child(3) { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .cs-meta-inner > :nth-child(1), .cs-meta-inner > :nth-child(5) { border-right: 1px solid rgba(0, 0, 0, 0.08); } /* Content bottom padding */ .cs-content { padding-bottom: 16px; } .cs-section:last-child { padding-bottom: 24px; } /* Hide sidebar, full-width body */ .cs-sidebar { display: none; } .cs-body { padding: 24px 0; } /* Section typography */ .cs-section-heading { font-size: 22px; } /* Components */ .cs-stat-card-number { font-size: 36px; } .cs-stat-grid, .cs-shift-cards, .cs-shift-cards--2 { grid-template-columns: 1fr; gap: 8px; } .cs-sub-callout { padding: 16px 20px; } .cs-dual-grid { grid-template-columns: 1fr; gap: 24px; } .cs-compare-row { flex-direction: column; } .cs-compare-arrow { transform: rotate(90deg); padding: 4px 0; } .cs-video-frame { padding: 12px 0; } /* 3-up phone screenshots: full container width reads oversized once stacked to a single column, so cap each to a centered 80%. */ .cs-dual-grid--3 .cs-dual-grid-item img { width: 80%; margin: 0 auto; } /* Footer nav: stack */ .cs-footer-wrap { padding: 0 16px 48px; } .cs-footer-nav { gap: 12px; padding-top: 24px; align-items: flex-start; } .cs-footer-nav > * { width: 50%; } .cs-footer-next-title, .cs-footer-prev-title { font-size: 16px; white-space: normal; } } /* ========================================================================== THEMES — per-page header gradient wash, layered over white. ========================================================================== */ .theme-quizzes .cs-header { background: radial-gradient(82.62% 62.27% at 68.61% 0%, rgba(15, 131, 255, 0.10) 0%, rgba(207, 255, 235, 0.10) 100%), radial-gradient(82% 56.66% at 100% 100%, rgba(50, 196, 249, 0.10) 23.9%, rgba(201, 255, 209, 0.10) 100%), radial-gradient(290.26% 77.97% at -2.08% 43.09%, rgba(205, 243, 255, 0.20) 0%, rgba(238, 255, 224, 0.20) 70.19%), var(--c-white); } .theme-rosetta .cs-header { background: radial-gradient(82.62% 62.27% at 68.61% 0%, rgba(255, 181, 97, 0.20) 0%, rgba(255, 245, 208, 0.20) 100%), radial-gradient(82% 56.66% at 100% 100%, rgba(255, 189, 115, 0.30) 27.4%, rgba(255, 250, 204, 0.30) 100%), radial-gradient(259.42% 88.62% at 0.59% 24.56%, rgba(255, 187, 112, 0.40) 0%, rgba(255, 252, 228, 0.40) 58.36%), var(--c-white); } .theme-libraries .cs-header { background: radial-gradient(82.62% 62.27% at 68.61% 0%, rgba(40, 151, 255, 0.20) 0%, rgba(207, 254, 255, 0.20) 100%), radial-gradient(82% 56.66% at 100% 100%, rgba(114, 95, 255, 0.20) 3.85%, rgba(201, 255, 240, 0.20) 100%), radial-gradient(290.26% 77.97% at -2.08% 43.09%, rgba(197, 175, 255, 0.50) 0%, rgba(224, 249, 255, 0.50) 70.19%), var(--c-white); }