/* =============================================================
Trisha Khandelwal — Senior Product Designer
Dark, editorial, interactive. WCAG AA+. v2.
============================================================= */
/* ---------- TOKENS ---------- */
:root {
/* Surface */
--bg: #0A0A0F;
--bg-2: #0E0E14;
--surface: #14141C;
--surface-2: #1A1A24;
--surface-3: #22222D;
/* Text */
--text: #F5F5F7;
--text-2: #A1A8B0;
--text-3: #6B7280;
/* Accent — purple (Figma) */
--accent: #7A64FF;
--accent-2: #9887FF;
--accent-cyan: #67E8F9;
--accent-glow: rgba(122, 100, 255, 0.18);
--accent-glow-strong: rgba(122, 100, 255, 0.28);
/* Border */
--border: rgba(255,255,255,0.07);
--border-2: rgba(255,255,255,0.12);
--border-3: rgba(255,255,255,0.20);
--border-card: #2A2A33;
/* ODI / Figma-aligned surfaces (used on case study pages) */
--surface-card: #15151D;
--surface-meta: #1C1C25;
--surface-pill: #12121A;
--surface-bezel: #1A1A22;
--surface-screen: #0F0F16;
--surface-chrome: #0F0B2A;
--surface-accent-soft: #2A2340;
--text-figma-2: #B4B4BE;
--text-figma-3: #6F6F7A;
/* Pill / tag */
--tag-bg: rgba(255,255,255,0.04);
--tag-bg-2: rgba(255,255,255,0.07);
--tag-text: #C6CCD2;
/* Status */
--status-green: #4ADE80;
--status-glow: rgba(74,222,128,0.45);
--focus: #FFD166;
/* Type */
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
/* Layout */
--container: 1280px;
--gutter: clamp(20px, 4.5vw, 56px);
--section-y: clamp(80px, 12vw, 140px);
/* Radii */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--r-pill: 999px;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-2: cubic-bezier(0.16, 1, 0.3, 1);
/* ============================================================
Case study spacing scale — unified rhythm across every case
study page. Use these tokens instead of one-off clamp() values.
============================================================ */
--cs-stack-xs: 10px; /* eyebrow → title, intra-component */
--cs-stack-sm: clamp(12px, 1.2vw, 16px); /* card-internal stack */
--cs-gap-cards: clamp(16px, 1.8vw, 24px); /* gap between sibling cards in a grid */
--cs-pad-card: clamp(24px, 2.6vw, 32px); /* card inner padding */
--cs-space-head: clamp(28px, 3.5vh, 40px); /* section/sub header → first content */
--cs-space-block: clamp(44px, 5.5vh, 64px); /* between sub-blocks inside a section */
--cs-space-section: clamp(64px, 8vh, 96px); /* between major top-level sections */
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01' on, 'cv11' on;
overflow-x: hidden;
cursor: none;
}
@media (pointer: coarse) { body { cursor: auto; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: none; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
border-radius: 4px;
}
/* Skip link */
.skip-link {
position: absolute; top: -100px; left: 16px;
background: var(--accent); color: white;
padding: 12px 18px; border-radius: var(--r-sm);
z-index: 1000; font-weight: 500; font-size: 14px;
}
.skip-link:focus { top: 16px; }
/* ---------- CUSTOM CURSOR ---------- */
.cursor {
position: fixed; top: 0; left: 0;
width: 32px; height: 32px;
border: 1px solid var(--border-3);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: width 0.2s var(--ease), height 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
z-index: 9999;
mix-blend-mode: difference;
}
.cursor-dot {
position: fixed; top: 0; left: 0;
width: 4px; height: 4px;
background: var(--text);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 10000;
mix-blend-mode: difference;
}
.cursor.is-hover {
width: 64px; height: 64px;
border-color: var(--accent-2);
background: rgba(76,111,255,0.05);
}
@media (pointer: coarse) {
.cursor, .cursor-dot { display: none; }
}
/* ---------- TOP BAR (logo · centered nav pill · CTA) ---------- */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: clamp(36px, 5vh, 56px) clamp(20px, 3vw, 40px);
z-index: 100;
pointer-events: none;
}
.topbar > * { pointer-events: auto; }
/* Logo (LEFT) — bud icon + glowing wordmark */
.logo {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
text-decoration: none;
flex-shrink: 0;
}
.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
}
.logo-img { width: 24px; height: 24px; display: block; }
.logo-text {
font-size: 17px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
text-shadow:
0 0 8px rgba(122, 100, 255, 0.65),
0 0 16px rgba(152, 135, 255, 0.4);
white-space: nowrap;
transition: text-shadow 0.3s var(--ease);
}
.logo:hover .logo-text {
text-shadow:
0 0 10px rgba(122, 100, 255, 0.8),
0 0 20px rgba(152, 135, 255, 0.55);
}
/* Nav pill (CENTER) — Home · Work · About · Let's connect (CTA inline) */
.nav-pill {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 6px;
background: rgba(18, 18, 26, 0.92);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid #2a2a33;
border-radius: var(--r-pill);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
justify-self: center;
}
.nav-link {
padding: 10px 16px;
border-radius: var(--r-pill);
color: #b4b4be;
transition: color 0.25s var(--ease), background 0.25s var(--ease);
white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-link-cta {
background: #7a64ff;
color: #fff;
margin-left: 4px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(122, 100, 255, 0.28);
transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav-link-cta:hover {
background: #8c78ff;
color: #fff;
box-shadow: 0 10px 24px rgba(122, 100, 255, 0.42);
}
/* Empty right-column spacer — keeps pill perfectly centered */
.topbar-spacer { display: block; }
/* Hamburger button (hidden on desktop, shown on mobile) */
.nav-burger {
display: none;
width: 44px;
height: 44px;
background: rgba(18, 18, 26, 0.92);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid #2a2a33;
border-radius: 12px;
cursor: none;
justify-self: end;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
padding: 0;
transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-burger:hover { background: rgba(28, 28, 36, 0.95); border-color: var(--border-3); }
.burger-line {
display: block;
width: 18px;
height: 1.5px;
background: var(--text);
border-radius: 2px;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-burger.is-open .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open .burger-line:nth-child(2) { opacity: 0; }
.nav-burger.is-open .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (pointer: coarse) { .nav-burger { cursor: pointer; } }
/* Touch devices — make taps instant and drop GPU-heavy backdrop-filter blurs
(which add tap-feedback latency on iOS Safari + Chrome Android). */
@media (max-width: 720px), (pointer: coarse) {
.nav-burger,
.logo,
.btn,
a,
button,
.case-card,
.nav-link,
.nav-mobile-link,
.footer-link {
touch-action: manipulation;
}
.nav-burger,
.hero-meta-bar,
.topbar {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Solidify the burger background since blur is off */
.nav-burger { background: rgba(20, 20, 28, 0.95); }
.hero-meta-bar { background: rgba(20, 20, 28, 0.75); }
}
/* Mobile menu overlay */
.nav-mobile {
position: fixed;
inset: 0;
background: rgba(10, 10, 15, 0.96);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
display: flex;
align-items: center;
justify-content: center;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile-inner {
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
width: 100%;
max-width: 400px;
padding: 0 24px;
}
.nav-mobile-link {
font-size: clamp(28px, 6vw, 36px);
font-weight: 500;
color: var(--text);
letter-spacing: -0.02em;
padding: 16px 0;
border-bottom: 1px solid var(--border);
transition: color 0.25s var(--ease);
}
.nav-mobile-link:hover { color: #7a64ff; }
.nav-mobile-cta {
margin-top: 16px;
background: #7a64ff;
color: #fff;
border: none;
border-radius: 12px;
padding: 18px 0;
box-shadow: 0 12px 32px rgba(122, 100, 255, 0.32);
font-size: clamp(20px, 4vw, 26px);
}
.nav-mobile-cta:hover { background: #8c78ff; color: #fff; }
/* Tablet — keep pill, just shrink slightly */
@media (max-width: 1024px) {
.nav-pill { font-size: 13px; padding: 5px; }
.nav-link { padding: 8px 13px; }
}
/* Smaller tablet — keep pill compact */
@media (max-width: 820px) {
.nav-pill { font-size: 12px; padding: 4px; gap: 0; }
.nav-link { padding: 7px 11px; }
.logo-text { font-size: 16px; }
}
/* Mobile portrait — collapse pill, show hamburger */
@media (max-width: 600px) {
.topbar { grid-template-columns: 1fr auto; padding: 18px 16px; }
.nav-pill, .topbar-spacer { display: none; }
.nav-burger { display: inline-flex; }
.logo-text { font-size: 15px; }
.logo-img { width: 22px; height: 22px; }
.logo { gap: 5px; }
}
/* ---------- CONTAINER ---------- */
.section {
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
padding-top: var(--section-y);
padding-bottom: 0;
position: relative;
z-index: 1;
}
/* First section after hero — tighter top spacing */
.work { padding-top: clamp(40px, 6vw, 72px); }
.work .section-head { margin-bottom: clamp(28px, 4vw, 40px); }
.section-head { margin-bottom: 56px; max-width: 900px; }
.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.section-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 20px;
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--surface);
}
.section-title {
font-size: clamp(28px, 4.2vw, 56px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0 0 20px;
color: var(--text);
}
.section-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent-2);
letter-spacing: -0.015em;
}
.section-lede {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--text-2);
margin: 0;
max-width: 620px;
line-height: 1.5;
}
.section-head-center .section-lede { margin-left: auto; margin-right: auto; }
/* ---------- HERO — full viewport width with layered background ---------- */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
--mx: 50%;
--my: 50%;
}
/* Content wrapper — 2-column grid: text on left, portrait on right */
.hero-content {
position: relative;
z-index: 2;
flex: 1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: var(--container);
width: 100%;
margin: 0 auto;
padding: clamp(80px, 11vh, 110px) var(--gutter) clamp(40px, 6vh, 64px);
min-height: 100vh;
}
@media (max-width: 960px) {
.hero-content { grid-template-columns: 1fr; gap: 48px; align-items: start; }
}
.hero-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
gap: clamp(18px, 2.4vh, 28px);
}
@media (max-width: 960px) {
.hero-text { height: auto; gap: 24px; justify-content: flex-start; }
}
.hero-title-block { width: 100%; }
/* Hero meta strip — Currently · Education (matches About page meta) */
.hero-meta {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 0 clamp(28px, 4vw, 56px);
margin-top: clamp(24px, 3vh, 32px);
padding-top: clamp(20px, 2.4vh, 28px);
border-top: 1px solid var(--border);
width: fit-content;
}
@media (max-width: 480px) {
.hero-meta { grid-template-columns: 1fr; gap: 16px; }
}
.hero-meta-item { display: flex; flex-direction: column; gap: 6px; }
.hero-meta-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-3);
}
.hero-meta-value {
font-size: 14px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
.hero-meta-value .hero-link { color: var(--text); }
.hero-meta-value .hero-link:hover { color: var(--accent-2); }
/* Hero portrait (mirrors the about page treatment) */
.hero-portrait {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.hero-portrait-frame {
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 4 / 5;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border-2);
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5),
0 0 0 1px rgba(122,100,255,0.05) inset;
transform: rotate(-1.5deg);
transition: transform 0.5s var(--ease);
}
.hero-portrait-frame:hover { transform: rotate(0deg) scale(1.02); }
.hero-portrait-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
/* Zoom + shift the focal point so Trisha is centred and the people on
the right edge of the photo are cropped out of frame. */
transform: scale(1.6);
transform-origin: 28% 30%;
transition: transform 0.6s var(--ease), transform-origin 0.6s var(--ease);
}
.hero-portrait-frame:hover .hero-portrait-img {
transform: scale(1.65);
}
.hero-portrait-fallback {
position: absolute; inset: 0;
display: none;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a1530 0%, #0f0b2a 100%);
font-family: var(--font-serif);
font-style: italic;
font-size: 200px;
color: rgba(122,100,255,0.5);
}
.hero-portrait-tag {
position: absolute;
bottom: -10px;
right: -10px;
padding: 8px 14px;
border-radius: var(--r-pill);
background: var(--accent);
color: white;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
box-shadow: 0 8px 20px rgba(122,100,255,0.4);
transform: rotate(4deg);
}
/* Mobile homepage hero — smaller frame, gentler portrait crop, no clipped tag,
disabled GPU-heavy ambient effects, and reduced cognitive load. */
@media (max-width: 720px) {
/* Portrait — shrink + soften */
.hero-portrait { max-width: 240px; margin: 0 auto; }
.hero-portrait-frame { max-width: 240px; transform: rotate(-1deg); }
.hero-portrait-img {
transform: scale(1.15);
transform-origin: 50% 22%;
object-position: center 18%;
}
.hero-portrait-frame:hover .hero-portrait-img { transform: scale(1.18); }
.hero-portrait-tag { right: 8px; bottom: -8px; transform: rotate(2deg); font-size: 11px; padding: 6px 10px; }
/* Strip ambient visual noise on mobile */
.hero-orb-3, .hero-orb-4, .hero-grain, .hero-spotlight, .hero-grid { display: none; }
.hero-orb { filter: blur(60px); animation: none; opacity: 0.5; }
.hero-glow {
background: radial-gradient(380px circle at 50% 30%, rgba(122,100,255,0.20), transparent 70%);
transition: none;
}
/* Strip secondary info that adds cognitive load on a small screen */
.hero-meta-bar .meta-divider { display: none; }
.hero-meta-bar { gap: 8px; flex-wrap: nowrap; font-size: 10.5px; padding: 6px 12px; white-space: nowrap; }
.hero-meta-bar .meta-item { font-size: 10.5px; }
.hero-sub { font-size: 16px; opacity: 0.85; }
.hero-scroll { display: none; }
/* Tighten hero vertical rhythm — keep enough top padding to clear the fixed topbar */
.hero-content { gap: 28px; padding-top: 96px; padding-bottom: 32px; }
.hero-text { gap: 20px; }
.hero-title-block { gap: 16px; }
.hero-meta { gap: 16px; }
.hero-actions { gap: 10px; }
}
/* Touch devices — restore the system cursor on buttons (the dark theme uses a
custom cursor that gets disabled on touch). */
@media (pointer: coarse) {
button { cursor: auto; }
.cursor-dot, .cursor-ring { display: none; }
}
/* Background container — full viewport, behind everything */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Ambient drifting orbs (color, depth, motion) */
.hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(90px);
will-change: transform;
}
.hero-orb-1 {
width: 540px; height: 540px;
background: radial-gradient(circle, rgba(122, 100, 255, 0.55), rgba(122, 100, 255, 0) 65%);
top: 8%; left: 6%;
animation: drift-1 26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-orb-2 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(76, 111, 255, 0.45), rgba(76, 111, 255, 0) 65%);
top: 45%; right: 4%;
animation: drift-2 32s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-orb-3 {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(255, 110, 171, 0.32), rgba(255, 110, 171, 0) 65%);
bottom: 5%; left: 30%;
animation: drift-3 38s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-orb-4 {
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(69, 217, 200, 0.28), rgba(69, 217, 200, 0) 65%);
top: 22%; right: 28%;
animation: drift-4 28s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(110px, -60px) scale(1.18); }
66% { transform: translate(-50px, 80px) scale(0.92); }
}
@keyframes drift-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-90px, 60px) scale(1.12); }
75% { transform: translate(70px, -40px) scale(0.95); }
}
@keyframes drift-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(80px, -50px) scale(1.1); }
60% { transform: translate(-100px, -30px) scale(0.88); }
}
@keyframes drift-4 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, 40px) scale(1.15); }
}
/* Subtle grid texture (architectural reference, ties to her arch background) */
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 75%);
opacity: 0.7;
}
/* Cursor-following spotlight (main interactive layer) */
.hero-glow {
position: absolute; inset: 0;
background: radial-gradient(
700px circle at var(--mx) var(--my),
rgba(122, 100, 255, 0.42) 0%,
rgba(76, 111, 255, 0.22) 30%,
transparent 65%
);
transition: background 0.12s linear;
mix-blend-mode: screen;
}
.hero-spotlight {
position: absolute; inset: 0;
background: radial-gradient(
180px circle at var(--mx) var(--my),
rgba(255, 255, 255, 0.05) 0%,
transparent 70%
);
transition: background 0.08s linear;
mix-blend-mode: overlay;
}
/* Grain texture on top */
.hero-grain {
position: absolute; inset: 0;
opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.hero-meta-bar {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 7px 16px;
background: rgba(20,20,28,0.6);
backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: 12px;
color: var(--text-2);
font-weight: 500;
letter-spacing: -0.005em;
align-self: flex-start;
flex-wrap: wrap;
max-width: 100%;
}
.meta-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.meta-icon { color: var(--text-3); font-size: 11px; }
.meta-divider { width: 1px; height: 12px; background: var(--border-2); }
.meta-status { color: var(--text); }
.meta-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--status-green);
box-shadow: 0 0 8px var(--status-glow);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }
.hero-title {
font-size: clamp(32px, 4vw, 52px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 clamp(20px, 3vh, 32px);
max-width: 760px;
}
.hero-line { display: block; }
.hero-name {
display: inline-block;
color: var(--accent-2);
font-weight: 500;
will-change: transform;
transition: transform 0.4s var(--ease-2);
}
.hero-period { color: var(--text); }
.hero-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
color: #9887ff;
}
.hero-sub {
font-size: clamp(14px, 1.2vw, 17px);
color: var(--text-2);
margin: 0;
max-width: 680px;
line-height: 1.55;
}
.hero-link {
color: #7a64ff;
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
text-decoration-color: rgba(122, 100, 255, 0.5);
transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.hero-link:hover {
color: #9887ff;
text-decoration-color: #9887ff;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: clamp(24px, 4vh, 40px);
}
.hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
z-index: 2;
}
.scroll-line {
width: 1px; height: 48px;
background: linear-gradient(to bottom, var(--text-3), transparent);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute; top: -100%; left: 0; right: 0;
height: 50%;
background: linear-gradient(to bottom, transparent, var(--accent-2));
animation: scroll-drop 2.4s var(--ease) infinite;
}
@keyframes scroll-drop {
0% { top: -50%; } 100% { top: 100%; }
}
/* ---------- BUTTONS — same height, same hover state ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px; /* fixed height — both buttons identical */
padding: 0 22px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: var(--r-pill);
border: 1px solid transparent;
box-sizing: border-box;
transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
cursor: none;
line-height: 1;
}
.btn-arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-primary {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--border-2);
}
/* Unified hover — both buttons turn purple */
.btn-primary:hover,
.btn-ghost:hover {
background: #7a64ff;
color: #fff;
border-color: #7a64ff;
box-shadow: 0 10px 24px rgba(122, 100, 255, 0.32);
}
.btn-sm {
height: 40px;
padding: 0 18px;
font-size: 14px;
}
/* ---------- STRIP / MARQUEE ---------- */
.strip {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 24px 0;
background: var(--bg-2);
margin-top: clamp(20px, 4vh, 48px);
overflow: hidden;
position: relative;
}
.strip-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
gap: 40px;
}
.strip-eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.strip-items {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.strip-items::-webkit-scrollbar { display: none; }
.strip-item {
font-size: 15px;
font-weight: 500;
color: var(--text-2);
letter-spacing: -0.005em;
white-space: nowrap;
transition: color 0.25s var(--ease);
}
.strip-item:hover { color: var(--text); }
.strip-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--text-3);
flex-shrink: 0;
}
/* ---------- WORK GRID — single column, full width ---------- */
.work-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 2.4vw, 32px);
}
.case-card {
position: relative;
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
overflow: hidden;
transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-2), box-shadow 0.4s var(--ease);
will-change: transform;
}
.case-card:hover {
border-color: var(--border-3);
transform: translateY(-4px);
box-shadow: 0 24px 56px rgba(0,0,0,0.5);
}
.case-card:hover .case-mockup { transform: scale(1.03); }
.case-card:hover .case-num { color: var(--accent-2); }
/* Switched from grid to flex — flex's align-items: stretch is more reliable for matching cell heights.
HTML source order is media, body. Use row-reverse so body shows on the LEFT, media on the RIGHT. */
.case-link {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
gap: clamp(20px, 2.4vw, 36px);
padding: clamp(16px, 2vw, 24px);
}
.case-body {
flex: 1 1 0;
min-width: 0;
}
.case-media {
flex: 1.05 1 0;
min-width: 0;
position: relative;
min-height: 320px;
}
.case-media-frame {
position: absolute;
inset: 0;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
background: #FFFFFF; /* WHITE — video white margins blend invisibly */
}
.case-media-frame img,
.case-media-frame video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.case-mockup {
position: absolute; inset: 0;
transition: transform 0.6s var(--ease);
}
/* Per-project gradient mockups (placeholders until real images) */
.case-media-1 { background: linear-gradient(135deg, #1a2540 0%, #0f1828 100%); }
.case-mockup-1 {
background:
radial-gradient(800px 200px at 50% 100%, rgba(76,111,255,0.35), transparent 60%),
radial-gradient(circle at 30% 30%, rgba(123,149,255,0.2), transparent 50%),
linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
}
.case-media-2 { background: linear-gradient(135deg, #2a1f3a 0%, #1a1428 100%); }
.case-mockup-2 {
background:
radial-gradient(circle at 70% 50%, rgba(186,127,255,0.25), transparent 55%),
radial-gradient(circle at 30% 70%, rgba(76,111,255,0.18), transparent 50%);
}
.case-media-3 { background: linear-gradient(135deg, #1a2e2a 0%, #0f1c1a 100%); }
.case-mockup-3 {
background:
radial-gradient(circle at 60% 40%, rgba(110,231,183,0.2), transparent 55%),
radial-gradient(circle at 30% 70%, rgba(76,111,255,0.15), transparent 50%);
}
.case-media-4 { background: linear-gradient(135deg, #3a1f28 0%, #281418 100%); }
.case-mockup-4 {
background:
radial-gradient(circle at 50% 50%, rgba(255,138,140,0.22), transparent 55%),
radial-gradient(circle at 30% 30%, rgba(255,200,80,0.12), transparent 50%);
}
.case-num { display: none; }
.case-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(8px, 1.5vw, 20px) clamp(8px, 2vw, 24px);
gap: 16px;
}
/* Tablet & mobile — stack image on top, body below.
Media area uses 16:10 aspect ratio so laptop mockups fit cleanly. */
@media (max-width: 1024px) {
.case-link {
flex-direction: column;
gap: 0;
}
.case-media {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
min-height: 0;
}
.case-body { padding: 20px 12px 12px; }
}
@media (max-width: 640px) {
.case-media {
aspect-ratio: 16 / 10;
}
.case-body { padding: 16px 8px 8px; }
}
.case-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7a64ff;
margin: 0;
}
.case-eyebrow-sep { margin: 0 8px; color: var(--text-3); }
.case-title {
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.022em;
margin: 0;
color: var(--text);
}
.case-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent-2);
letter-spacing: -0.01em;
}
.case-desc {
font-size: clamp(14px, 1.1vw, 16px);
color: var(--text-2);
margin: 0;
line-height: 1.55;
max-width: 560px;
}
.case-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--tag-bg);
border: 1px solid var(--border);
color: var(--tag-text);
}
.case-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric-value {
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
}
.metric-unit {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--text-2);
font-size: 0.7em;
margin-left: 2px;
}
.metric-label {
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
line-height: 1.35;
min-height: calc(11px * 1.35 * 2); /* always reserve room for 2 lines so all 4 cards align */
}
.case-actions { display: flex; gap: 10px; }
@media (max-width: 480px) {
.case-metrics { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- APPROACH GRID ---------- */
.approach-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1024px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-card {
padding: 28px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.approach-card:hover {
border-color: var(--border-3);
background: var(--surface-2);
transform: translateY(-3px);
}
.approach-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-glow);
border: 1px solid rgba(123,149,255,0.25);
border-radius: var(--r-md);
color: var(--accent-2);
margin-bottom: 22px;
}
.approach-icon svg { width: 22px; height: 22px; }
.approach-title {
font-size: 18px;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 10px;
color: var(--text);
}
.approach-desc {
font-size: 14px;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
/* ---------- WHY GRID ---------- */
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
position: relative;
padding: 32px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.why-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.why-num {
display: inline-block;
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--accent-2);
margin-bottom: 16px;
}
.why-title {
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 12px;
color: var(--text);
}
.why-desc {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
}
/* ---------- PROCESS LIST ---------- */
.process-list {
display: grid;
gap: 0;
border-top: 1px solid var(--border);
}
.process-step {
display: grid;
grid-template-columns: clamp(80px, 12vw, 140px) 1fr;
gap: clamp(20px, 4vw, 56px);
padding: clamp(28px, 4vw, 40px) 0;
border-bottom: 1px solid var(--border);
align-items: start;
transition: padding 0.4s var(--ease);
}
.process-step:hover { padding-left: 16px; padding-right: 16px; }
.process-num {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
color: var(--accent-2);
line-height: 1;
letter-spacing: -0.02em;
}
.process-title {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 10px;
color: var(--text);
}
.process-desc {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
max-width: 720px;
}
/* ---------- ABOUT PREVIEW ---------- */
.about-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-content .section-eyebrow { margin-bottom: 20px; }
.about-body {
font-size: clamp(15px, 1.4vw, 17px);
color: var(--text-2);
line-height: 1.65;
margin: 0 0 18px;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent-2);
font-weight: 500;
font-size: 15px;
margin-top: 8px;
transition: gap 0.25s var(--ease);
}
.link-arrow:hover { gap: 16px; }
.about-side {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.about-card {
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
transition: border-color 0.25s var(--ease);
}
.about-card:hover { border-color: var(--border-3); }
.about-card-label {
display: block;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 6px;
font-weight: 500;
}
.about-card-value {
font-size: 14px;
font-weight: 500;
color: var(--text);
margin: 0;
line-height: 1.4;
}
/* ---------- CONTACT ---------- */
.contact { text-align: left; padding-bottom: var(--section-y); }
.contact-title {
font-size: clamp(36px, 5.5vw, 76px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.03em;
margin: 24px 0 40px;
}
.contact-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent-2);
}
.contact-title-line2 {
display: block;
margin-top: clamp(20px, 2.4vh, 36px);
}
.contact-email {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: clamp(20px, 2.6vw, 32px);
font-weight: 500;
color: var(--text);
letter-spacing: -0.015em;
margin-bottom: 36px;
border-bottom: 1px solid var(--border-2);
padding-bottom: 6px;
transition: color 0.25s var(--ease), border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.contact-email:hover {
color: var(--accent-2);
border-color: var(--accent-2);
gap: 18px;
}
.contact-links {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid var(--border-2);
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
color: var(--text);
background: var(--surface);
transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-link:hover { background: var(--surface-2); border-color: var(--border-3); }
.contact-link-arrow { color: var(--text-2); }
/* ---------- FOOTER ---------- */
.footer {
border-top: 1px solid var(--border);
margin-top: clamp(40px, 8vh, 96px);
padding: 36px 0;
background: var(--bg-2);
}
.footer-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-text { font-size: 13px; color: var(--text-3); margin: 0; }
.footer-meta { margin: 0; }
.footer-link {
font-size: 13px;
color: var(--text-2);
letter-spacing: -0.005em;
font-weight: 500;
transition: color 0.25s var(--ease);
}
.footer-link:hover { color: var(--text); }
/* ---------- REVEAL ON SCROLL ---------- */
[data-reveal], .case-card, .approach-card, .why-card, .process-step {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-in { opacity: 1 !important; transform: none !important; }
/* Safety: on mobile + touch devices, never hide content waiting for JS.
If IntersectionObserver fires late or fails, cards still show. */
@media (max-width: 720px), (pointer: coarse) {
[data-reveal], .case-card, .approach-card, .why-card, .process-step {
opacity: 1;
transform: none;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.05s !important;
}
.scroll-line::after { display: none; }
[data-reveal], .case-card, .approach-card, .why-card, .process-step {
opacity: 1; transform: none;
}
body { cursor: auto; }
.cursor, .cursor-dot { display: none; }
}
/* ---------- PRINT ---------- */
@media print {
.nav-pill, .cursor, .cursor-dot, .hero-glow, .hero-grain, .hero-scroll { display: none; }
body { background: white; color: black; cursor: auto; }
}
/* ---------- LAPTOP MOCKUP (silver, simple, responsive) ---------- */
.laptop-mockup {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(12px, 3%, 32px) clamp(14px, 4%, 48px);
z-index: 2;
box-sizing: border-box;
}
.laptop-screen {
width: 100%;
aspect-ratio: 16 / 10;
background: #0A0A10;
border-radius: 14px;
border: 8px solid #1A1A22; /* BLACK bezel — visible on white card */
box-shadow:
0 0 0 1px rgba(0,0,0,0.18),
inset 0 0 0 1px rgba(255,255,255,0.06),
0 24px 48px rgba(0,0,0,0.18);
overflow: hidden;
position: relative;
max-height: 100%;
}
.laptop-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
background: #0A0A10;
}
/* Camera notch — black */
.laptop-screen::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 4px;
background: #1A1A22;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 3;
}
/* Laptop base — black */
.laptop-base {
position: relative;
width: 110%;
max-width: 100%;
height: 8px;
margin-top: 3px;
background: linear-gradient(180deg, #2A2A33 0%, #14141C 100%);
border-radius: 0 0 10px 10px;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
flex-shrink: 0;
}
.laptop-base::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 14%;
height: 3px;
background: #444;
border-radius: 0 0 3px 3px;
}
.case-media-frame:has(.laptop-mockup) {
background: #FFFFFF;
}
/* ---------- DUAL-PHONE MOCKUP (used inside WWB / SkillsPe / mobile-app cards) ---------- */
.phones-pair {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 3%, 20px);
padding: clamp(14px, 3.5%, 32px) clamp(16px, 4%, 36px);
z-index: 2;
box-sizing: border-box;
}
.phone {
position: relative;
height: 100%;
aspect-ratio: 694 / 1396; /* original WWB video aspect — no cropping */
max-width: 48%;
border-radius: 0;
overflow: visible;
background: transparent;
flex-shrink: 1;
}
.phone-video {
width: 100%;
height: 100%;
display: block;
object-fit: contain; /* shows full video — white edges blend with white card */
object-position: center;
background: transparent;
}
.case-media-frame:has(.phones-pair) {
background: #FFFFFF;
}
/* Transparent phones — when WebM has an alpha channel, the white background is keyed out
and the phone shape sits directly on the card surface (no rectangular bezel). */
.phones-pair--transparent .phone {
background: transparent;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.phones-pair--transparent .phone-video {
/* Drop-shadow respects alpha — shadow follows the phone outline, not the rectangle */
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
background: transparent;
object-fit: contain;
}
/* ---------- GENERIC CARD VIDEO (used when video already contains its own visual treatment) ---------- */
.card-video-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
overflow: hidden;
background: #FFFFFF;
}
.card-video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
}
.case-media-frame:has(.card-video-wrap) {
background: #FFFFFF;
}
/* Responsive — tighten padding & sizing for tablet/mobile */
@media (max-width: 1024px) {
.laptop-mockup { padding: clamp(10px, 3%, 24px) clamp(12px, 4%, 32px); }
.laptop-screen { border-width: 6px; border-radius: 10px; }
.laptop-screen::before { width: 24px; height: 3px; top: -4.5px; }
.laptop-base { height: 6px; border-radius: 0 0 8px 8px; }
}
@media (max-width: 640px) {
.laptop-mockup { padding: 12px 18px; }
.laptop-screen { border-width: 5px; border-radius: 8px; }
.laptop-screen::before { width: 20px; height: 3px; top: -4px; }
.laptop-base { width: 108%; height: 5px; }
.laptop-base::after { height: 2px; }
}
/* =============================================================
CASE STUDY PAGE — One Degree Impact and future case studies
Inherits all homepage tokens, fonts, buttons, nav.
============================================================= */
/* ---------- CS HERO ---------- */
.cs-hero {
position: relative;
width: 100%;
min-height: auto;
padding: clamp(110px, 14vh, 150px) var(--gutter) clamp(48px, 7vh, 80px);
overflow: hidden;
--mx: 50%;
--my: 50%;
}
.cs-hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(20px, 2.4vh, 28px);
}
/* Back link sits flush-left even though the rest is centered */
.cs-hero-content .cs-back { align-self: flex-start; }
.cs-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
letter-spacing: -0.005em;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: rgba(20,20,28,0.5);
backdrop-filter: blur(12px);
transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cs-back:hover {
color: var(--text);
background: rgba(20,20,28,0.8);
border-color: var(--border-2);
}
.cs-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7a64ff;
padding: 0;
background: none;
border: none;
border-radius: 0;
}
.cs-eyebrow-dot {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cs-eyebrow-dotmark {
width: 7px; height: 7px;
border-radius: 50%;
background: #7a64ff;
box-shadow: 0 0 8px rgba(122,100,255,0.7);
flex-shrink: 0;
}
.cs-hero-title {
font-size: clamp(40px, 6vw, 76px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0;
color: var(--text);
max-width: 1100px;
}
.cs-hero-tagline {
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.005em;
color: #B4B4BE;
margin: 0;
max-width: 900px;
}
.cs-hero-tagline em {
font-family: var(--font-serif);
font-style: italic;
color: #9887ff;
letter-spacing: -0.005em;
}
.cs-hero-meta {
display: none; /* Hero meta is now in the Overview section (Figma) */
}
.cs-meta-pair {
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-meta-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
.cs-meta-value {
font-size: 15px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
.cs-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
/* Buttons in the case-study hero use the global .btn-primary (white default,
purple on hover) — same component as the homepage. */
/* Hero media — laptop sits directly on the dark page (Figma) */
.cs-hero-media {
position: relative;
z-index: 2;
width: min(100%, 880px);
margin: clamp(20px, 3vh, 36px) auto 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
/* 16:10 keeps the laptop in real-laptop proportions; width caps the size on big screens */
aspect-ratio: 16 / 10;
}
/* ---- Hero media pair: laptop + phone side by side ---- */
.cs-hero-media--pair {
width: min(100%, 980px);
aspect-ratio: auto;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
padding-bottom: 14px; /* room for the laptop base shadow */
}
.cs-hero-media--pair .laptop-mockup {
position: relative;
inset: auto;
width: 80%;
aspect-ratio: 16 / 10;
}
.cs-hero-media--pair .phone-mockup {
width: 16%;
max-width: 180px;
margin-bottom: 6px; /* nudge up so it doesn't sit on the laptop base */
margin-left: clamp(-32px, -2.4vw, -12px); /* pull the phone inward toward the laptop */
aspect-ratio: 9 / 17.5; /* slightly shorter than 9:19 so it fits cleanly */
z-index: 3; /* sits in front of laptop where they overlap */
}
/* Phone mockup — frosted black bezel with notch */
.phone-mockup {
position: relative;
aspect-ratio: 9 / 19;
background: #1A1A22;
border: 6px solid #1A1A22;
border-radius: 28px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.18),
inset 0 0 0 1px rgba(255,255,255,0.06),
0 24px 48px rgba(0,0,0,0.22);
overflow: hidden;
box-sizing: border-box;
}
.phone-notch {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 32%;
height: 12px;
background: #0A0A10;
border-radius: 0 0 8px 8px;
z-index: 3;
}
.phone-screen {
position: absolute;
inset: 0;
background: #0A0A10;
border-radius: 22px;
overflow: hidden;
z-index: 1;
}
.phone-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
@media (max-width: 640px) {
.cs-hero-media--pair .phone-mockup { display: none; }
.cs-hero-media--pair .laptop-mockup { width: 100%; }
}
/* ---- Silver phone variant — lighter aluminum bezel for hero screenshots ---- */
.phone-mockup--silver {
background: #C8CCD2;
border-color: #C8CCD2;
box-shadow:
0 0 0 1px rgba(255,255,255,0.16) inset,
0 0 0 1px rgba(0,0,0,0.18),
0 28px 56px -20px rgba(0,0,0,0.55),
0 12px 24px -8px rgba(0,0,0,0.35);
}
.phone-mockup--silver .phone-notch {
background: #1A1A1F;
}
.phone-mockup--silver .phone-screen {
background: #FFFFFF;
}
/* ---- Hero media trio — three phones, centered, middle one slightly lifted ---- */
.cs-hero-media--trio {
width: min(100%, 1040px);
aspect-ratio: auto;
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(14px, 1.6vw, 28px);
padding: clamp(8px, 2vh, 24px) 0;
margin-top: clamp(40px, 5vh, 64px);
}
.cs-hero-media--trio .phone-mockup {
width: 28%;
max-width: 260px;
aspect-ratio: 9 / 19;
}
.cs-hero-media--trio .phone-mockup--center {
transform: translateY(-8%);
}
@media (max-width: 640px) {
.cs-hero-media--trio { gap: 6px; padding-top: 12px; }
.cs-hero-media--trio .phone-mockup { width: 30%; }
.cs-hero-media--trio .phone-mockup--center { transform: translateY(-4%); }
}
.cs-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.cs-hero-fallback {
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(900px 400px at 50% 100%, rgba(122,100,255,0.4), transparent 60%),
radial-gradient(circle at 70% 30%, rgba(122,100,255,0.3), transparent 55%),
linear-gradient(135deg, #1a2540 0%, #0f1828 100%);
}
/* ---------- STATS STRIP ---------- */
.cs-stats-strip {
max-width: var(--container);
margin: clamp(48px, 6vh, 72px) auto 0;
padding: 0 var(--gutter);
}
.cs-stats-strip-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 4vw, 64px);
padding: clamp(28px, 4vh, 48px) clamp(24px, 4vw, 56px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
flex-wrap: wrap;
}
.cs-stat-divider {
width: 1px;
align-self: stretch;
background: var(--border);
}
.cs-stat {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 180px;
min-width: 0;
}
.cs-stat-value {
font-size: clamp(40px, 5.6vw, 72px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text);
}
.cs-stat-unit {
font-family: var(--font-serif);
font-style: italic;
color: var(--text-2);
font-size: 0.55em;
font-weight: 400;
margin-left: 4px;
}
.cs-stat-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
@media (max-width: 720px) {
.cs-stats-strip-inner { flex-direction: column; align-items: flex-start; }
.cs-stat-divider { display: none; }
}
/* ---------- CS SECTION (generic) ---------- */
.cs-section {
max-width: var(--container);
margin: 0 auto;
padding: var(--cs-space-section) var(--gutter) 0;
position: relative;
z-index: 1;
}
.cs-section-head {
margin-bottom: var(--cs-space-head);
max-width: none; /* full container width — gutter handles side margins */
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
align-items: flex-start;
}
.cs-section-head.section-head-center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
/* Overview section header — title + body paragraph */
.cs-overview-head { gap: 14px; max-width: none; }
.cs-body.cs-overview-body,
.cs-overview-body {
margin-top: 6px;
max-width: none;
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.65;
color: var(--text-2);
}
/* Overview 2-card row: My Role | Impact */
.cs-overview-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
margin-top: var(--cs-space-head);
}
@media (max-width: 880px) {
.cs-overview-cards { grid-template-columns: 1fr; }
}
.cs-overview-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-overview-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-overview-card-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.cs-overview-card-desc {
font-size: 15px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
}
.cs-overview-bullets {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: var(--text-2);
margin-top: 4px;
}
.cs-overview-bullets li {
position: relative;
padding-left: 22px;
line-height: 1.5;
}
.cs-overview-bullets li::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: #7a64ff;
}
.cs-overview-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 4px;
margin-bottom: 4px;
}
.cs-overview-metric { display: flex; flex-direction: column; gap: 4px; }
.cs-overview-metric-value {
font-size: clamp(28px, 2.8vw, 36px);
font-weight: 700;
color: #7a64ff;
line-height: 1;
letter-spacing: -0.02em;
}
.cs-overview-metric-label {
font-size: 13px;
color: var(--text-2);
line-height: 1.4;
}
@media (max-width: 480px) {
.cs-overview-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
}
/* Overview meta row — 4 small cards: Client · Timeline · Team · Toolkit */
.cs-meta-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cs-gap-cards);
margin-top: var(--cs-gap-cards);
align-items: stretch;
}
@media (max-width: 1024px) { .cs-meta-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-meta-row { grid-template-columns: 1fr; } }
.cs-meta-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-meta-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-meta-card .cs-eyebrow { font-size: 11px; letter-spacing: 0.16em; }
.cs-meta-card-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
color: var(--text);
line-height: 1.3;
margin: 0;
}
.cs-meta-card-desc {
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
margin: 0;
}
.cs-meta-card-list {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--text-2);
margin: 2px 0 0;
padding: 0;
list-style: none;
}
.cs-meta-card-list li {
position: relative;
padding-left: 16px;
line-height: 1.45;
}
.cs-meta-card-list li::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(122,100,255,0.7);
}
.cs-section-title {
font-size: clamp(26px, 3.4vw, 42px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.022em;
margin: 0;
color: var(--text);
}
/* Highlight treatment — purple Instrument Serif italic — applied across every
title class on the case study so the visual rhythm stays cohesive. */
.cs-section-title em,
.cs-phase-h em,
.cs-phase-sub-title em,
.cs-rf-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: #9887ff;
letter-spacing: -0.01em;
}
.cs-section-lede {
font-size: clamp(16px, 1.5vw, 19px);
color: var(--text-2);
line-height: 1.6;
margin: 0;
max-width: none;
}
.cs-body {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--text-2);
line-height: 1.7;
margin: 0 0 18px;
max-width: none;
}
.cs-body strong { color: #9887ff; font-weight: 600; }
/* ---------- INFO GRID (4 cards: role, team, tools, impact) ---------- */
.cs-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--cs-gap-cards);
}
@media (max-width: 760px) { .cs-info-grid { grid-template-columns: 1fr; } }
.cs-info-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
display: flex;
flex-direction: column;
gap: 14px;
}
.cs-info-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-info-card-accent {
background: linear-gradient(135deg, rgba(122,100,255,0.10) 0%, rgba(76,111,255,0.05) 100%);
border-color: rgba(122,100,255,0.25);
}
.cs-info-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: #7a64ff;
align-self: flex-start;
}
.cs-info-title {
font-size: clamp(20px, 2vw, 24px);
font-weight: 500;
letter-spacing: -0.018em;
margin: 0;
color: var(--text);
}
.cs-info-text {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
}
.cs-info-text strong { color: var(--text); font-weight: 600; }
.cs-info-list {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 15px;
color: var(--text-2);
}
.cs-info-list li {
padding-left: 20px;
position: relative;
line-height: 1.5;
}
.cs-info-list li::before {
content: "";
position: absolute;
left: 0; top: 10px;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(122,100,255,0.6);
}
/* ---------- SPLIT (image + text side-by-side) ---------- */
.cs-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.cs-split-image-right .cs-split-text { order: 1; }
.cs-split-image-right .cs-split-media { order: 2; }
.cs-split-image-left .cs-split-text { order: 2; }
.cs-split-image-left .cs-split-media { order: 1; }
@media (max-width: 880px) {
.cs-split { grid-template-columns: 1fr; }
.cs-split .cs-split-text, .cs-split .cs-split-media { order: 0; }
}
.cs-split-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cs-split-media {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
aspect-ratio: 4 / 3;
background: var(--surface-2);
}
.cs-split-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.cs-split-fallback {
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(circle at 30% 30%, rgba(122,100,255,0.25), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(76,111,255,0.18), transparent 55%),
linear-gradient(135deg, #1f1830 0%, #14101e 100%);
}
/* ---------- CARD GRID (Draftr-style: image-top, text-below) ---------- */
.cs-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 1100px) { .cs-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-card-grid { grid-template-columns: 1fr; } }
/* 3-up variant — for problem sections that ship three problems instead of four.
Cards span 1/3 of the section width so they line up cleanly with the section margins. */
.cs-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .cs-card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cs-card-grid--3 { grid-template-columns: 1fr; } }
/* Dual-step media — two phone screenshots placed side-by-side inside a single card.
Each one labelled "Step #1", "Step #2" beneath. */
.cs-card-media-dual {
display: flex;
gap: 12px;
margin: 0 clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
align-items: flex-end;
justify-content: center;
}
.cs-card-step {
flex: 1;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 50%;
}
.cs-card-step img,
.cs-card-step .cs-card-step-video {
display: block;
width: 100%;
height: auto;
max-height: 320px;
object-fit: contain;
border-radius: 10px;
background: #FFFFFF;
}
.cs-card-step figcaption {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--text-2);
text-transform: uppercase;
text-align: center;
}
/* Mobile — stack the two step phones vertically so each one stays readable on narrow screens. */
@media (max-width: 560px) {
.cs-card-media-dual { flex-direction: column; gap: 16px; align-items: center; }
.cs-card-step { max-width: 280px; width: 100%; }
}
/* Single-image variant of the dual-step media — for cards that only need to show one phone.
Sized to feel visually proportionate to the side-by-side dual variant. */
.cs-card-media-dual--single .cs-card-step {
max-width: 62%;
flex: 0 1 62%;
}
.cs-card-media-dual--single .cs-card-step img,
.cs-card-media-dual--single .cs-card-step .cs-card-step-video {
max-height: 360px;
}
.cs-card {
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
overflow: hidden;
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
display: flex;
flex-direction: column;
}
.cs-card:hover {
border-color: var(--border-3);
background: var(--surface-2);
transform: translateY(-3px);
}
.cs-card-media {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
margin: 0 clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
overflow: hidden;
border: 1px solid var(--border);
background: #FFFFFF;
flex-shrink: 0;
/* Flex column children stretch by default — no width:100% needed,
and adding it would overflow past the horizontal margins. */
}
.cs-card-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
/* Red problem-spotlight badge that sits below the card media. */
.cs-card-callout {
align-self: flex-start;
margin: 0 clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: #C0392B;
color: #FFFFFF;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 6px 18px -6px rgba(192,57,43,0.55), 0 2px 6px rgba(0,0,0,0.18);
pointer-events: none;
width: max-content;
}
.cs-card-callout::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 999px;
background: #FFFFFF;
box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
/* Wide aspect — for screenshots that are much wider than 16:10 (e.g. full-width slices) */
.cs-card-media--wide {
aspect-ratio: 1594 / 464;
background: #FFFFFF;
}
.cs-card-media--wide img { object-fit: contain; }
/* Tall aspect — for portrait mobile screenshots / screen-recording videos.
Keeps the same card frame, but lets the tall asset sit inside without cropping. */
.cs-card-media--tall img,
.cs-card-media--tall video { object-fit: contain; }
/* Video inside a problem card — fills the media slot the same way an img would. */
.cs-card-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
background: #FFFFFF;
}
/* Top-anchored image — for tall vertical screenshots (e.g. full-page scrolls).
Shows the top of the image so the recognisable header is visible. */
.cs-card-img-top {
object-position: top !important;
}
.cs-card-fallback,
.cs-card-fallback-1,
.cs-card-fallback-2,
.cs-card-fallback-3,
.cs-card-fallback-4 {
position: absolute; inset: 0;
z-index: 1;
background: #FFFFFF;
}
.cs-card-body {
padding: clamp(20px, 2.4vw, 32px);
display: flex;
flex-direction: column;
gap: 12px;
}
.cs-card-num {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ef4444;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cs-card-num-icon {
font-size: 12px;
line-height: 1;
}
.cs-card-title {
font-size: clamp(18px, 2vw, 22px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.018em;
margin: 0;
color: var(--text);
}
.cs-card-desc {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
}
/* ---------- SOLUTION BLOCK ---------- */
.cs-solution {
text-align: left;
}
.cs-solution .cs-section-title { max-width: none; }
/* Solution cards — 4-up row, check + title + description */
.cs-solution-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.8vw, 24px);
margin-top: clamp(32px, 4vh, 48px);
}
@media (max-width: 1024px) { .cs-solution-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-solution-cards { grid-template-columns: 1fr; } }
/* 3-up variant — for cases with three solution cards. Each card spans 1/3 of the section
so the row aligns flush with the section's left and right margins. */
.cs-solution-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .cs-solution-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cs-solution-cards--3 { grid-template-columns: 1fr; } }
/* User-flow component — horizontal sequence of dots + labels, with optional
alert/success highlight on the step that changed. Mirrors the Section 1 / Section 2
diagrams in the original Neighborbrite report. */
.cs-flow {
margin: 0 0 var(--cs-space-block);
padding: clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px) clamp(28px, 3vh, 36px);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-xl);
display: flex;
flex-direction: column;
gap: clamp(16px, 1.8vw, 24px);
}
.cs-flow--revised {
margin: var(--cs-space-block) 0 0;
background: rgba(122,100,255,0.06);
border-color: rgba(122,100,255,0.20);
}
.cs-flow-caption {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
margin: 0;
}
.cs-flow--revised .cs-flow-caption { color: #9887ff; }
.cs-flow-track {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: flex-start;
position: relative;
gap: 0;
}
.cs-flow-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 0 6px;
text-align: center;
}
/* Dashed connector that runs through the centerline of each node, except the last. */
.cs-flow-node:not(:last-child)::after {
content: "";
position: absolute;
top: 13px;
left: calc(50% + 18px);
right: calc(-50% + 18px);
border-top: 2px dashed rgba(255,255,255,0.28);
pointer-events: none;
}
.cs-flow-dot {
display: block;
width: 28px;
height: 28px;
border-radius: 999px;
background: #D9CFFB;
box-shadow: 0 0 0 4px rgba(217,207,251,0.18);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.cs-flow-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text);
line-height: 1.35;
max-width: 110px;
}
.cs-flow-flag {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
margin-top: 2px;
}
/* Alert (red) variant — the problem step that triggered drop-off */
.cs-flow-node--alert .cs-flow-dot {
background: #E15555;
box-shadow: 0 0 0 5px rgba(225,85,85,0.22);
}
.cs-flow-node--alert .cs-flow-label { color: #FFBFBF; font-weight: 700; }
.cs-flow-node--alert .cs-flow-flag {
background: rgba(225,85,85,0.20);
color: #FFB4B4;
}
/* Success (green) variant — the fixed step in the revised flow */
.cs-flow-node--success .cs-flow-dot {
background: #34C77C;
box-shadow: 0 0 0 5px rgba(52,199,124,0.22);
}
.cs-flow-node--success .cs-flow-label { color: #B6F0CE; font-weight: 700; }
.cs-flow-node--success .cs-flow-flag {
background: rgba(52,199,124,0.22);
color: #B6F0CE;
}
@media (max-width: 880px) {
.cs-flow-track { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
.cs-flow-node:not(:last-child)::after { display: none; }
}
/* Inline variant — for the flow living INSIDE a pivot card (half-width container).
Tighter padding, smaller dots, smaller labels so seven nodes fit cleanly side-by-side.
Designed for the LIGHT pastel pivot card backgrounds, so colors invert from the
dark-page default: white surface, dark text, dark dashed connectors. */
.cs-flow--inline {
margin: 0;
padding: 16px 12px 18px;
border-radius: 14px;
gap: 10px;
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 14px -10px rgba(0,0,0,0.30);
}
.cs-flow--inline.cs-flow--revised {
background: #FFFFFF;
border-color: rgba(14,90,69,0.22);
}
.cs-flow--inline .cs-flow-caption {
font-size: 10px;
letter-spacing: 0.10em;
color: rgba(0,0,0,0.55);
}
.cs-flow--inline.cs-flow--revised .cs-flow-caption { color: #0E5A45; }
.cs-flow--inline .cs-flow-track { gap: 0; }
.cs-flow--inline .cs-flow-node { gap: 6px; padding: 0 2px; }
/* Default dot — soft purple ring on white */
.cs-flow--inline .cs-flow-dot {
width: 18px;
height: 18px;
background: #7a64ff;
box-shadow: 0 0 0 3px rgba(122,100,255,0.18);
}
/* Alert (red) — the broken step */
.cs-flow--inline .cs-flow-node--alert .cs-flow-dot {
background: #C0392B;
box-shadow: 0 0 0 3px rgba(192,57,43,0.22);
}
/* Success (green) — the fixed step */
.cs-flow--inline .cs-flow-node--success .cs-flow-dot {
background: #1F7A3A;
box-shadow: 0 0 0 3px rgba(31,122,58,0.22);
}
/* Labels are dark slate so they pop on the white inline-flow surface. */
.cs-flow--inline .cs-flow-label {
font-size: 10px;
line-height: 1.25;
max-width: 64px;
color: #1A1A1A;
font-weight: 500;
}
.cs-flow--inline .cs-flow-node--alert .cs-flow-label { color: #8E2A1F; font-weight: 700; }
.cs-flow--inline .cs-flow-node--success .cs-flow-label { color: #0E5A45; font-weight: 700; }
/* Flag pills — solid color tints on the white background */
.cs-flow--inline .cs-flow-flag {
font-size: 8px;
padding: 2px 5px;
letter-spacing: 0.08em;
}
.cs-flow--inline .cs-flow-node--alert .cs-flow-flag {
background: #F8D7DC;
color: #8E2A1F;
}
.cs-flow--inline .cs-flow-node--success .cs-flow-flag {
background: #D9EFDC;
color: #0E5A45;
}
/* Dark dashed connector that's visible on white. */
.cs-flow--inline .cs-flow-node:not(:last-child)::after {
top: 8px;
left: calc(50% + 12px);
right: calc(-50% + 12px);
border-top: 1.5px dashed rgba(0,0,0,0.30);
}
@media (max-width: 880px) {
.cs-flow--inline .cs-flow-track { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
}
/* Gallery — for showing a series of phone screenshots side-by-side in the outcome section
(used in SkillsPe to display the shipped flows). Each child is a portrait phone image. */
.cs-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.8vw, 24px);
margin-top: var(--cs-space-head);
}
.cs-gallery-item {
margin: 0;
padding: clamp(10px, 1vw, 14px);
background: #F3EFE4;
border: 1px solid #E0D8C4;
border-radius: 16px;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 14px 32px -22px rgba(0,0,0,0.55);
overflow: hidden;
}
.cs-gallery-item img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
background: #FFFFFF;
aspect-ratio: 9 / 19.5;
object-fit: cover;
}
@media (max-width: 1024px) { .cs-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cs-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cs-gallery { grid-template-columns: 1fr; } }
/* Research-design layout — Setup, Participants, and Tasks all live inside one phase-block. */
.cs-research-design {
display: flex;
flex-direction: column;
gap: var(--cs-space-block);
}
.cs-rs-block {
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
}
.cs-rs-label {
display: inline-flex;
align-self: flex-start;
}
.cs-rs-scenario {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
max-width: 880px;
}
/* Reset margin-bottom on the inner results-grid since the parent rs-block handles gap. */
.cs-rs-block .cs-results-grid { margin-bottom: 0; }
.cs-solution-card {
padding: clamp(24px, 2.6vw, 32px);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-solution-card:hover { border-color: rgba(0,0,0,0.18); }
/* ODI-aligned color variants — same palette as the IA diagram. */
.cs-solution-card--green { background: #BFEFD9; }
.cs-solution-card--navy { background: #B8E0EE; }
.cs-solution-card--mustard { background: #F4E6AC; }
.cs-solution-card--rust { background: #F5C7BC; }
.cs-solution-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #1A1A1E;
color: #FFFFFF;
flex-shrink: 0;
margin-bottom: 4px;
}
.cs-solution-card--green .cs-solution-check { background: #0E5A45; }
.cs-solution-card--navy .cs-solution-check { background: #243B6B; }
.cs-solution-card--mustard .cs-solution-check { background: #B89200; }
.cs-solution-card--rust .cs-solution-check { background: #8E2A1F; }
.cs-solution-card-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
color: #1A1A1A;
margin: 0;
}
.cs-solution-card-desc {
font-size: 14px;
color: #2A2A2A;
line-height: 1.55;
margin: 0;
}
/* ---------- PHASES (alternating image-left / image-right) ---------- */
.cs-phase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-space-head);
align-items: start;
padding: var(--cs-space-block) 0;
border-top: 1px solid var(--border);
}
.cs-phase:first-of-type { border-top: 0; padding-top: 0; }
.cs-phase-image-right .cs-phase-text { order: 1; }
.cs-phase-image-right .cs-phase-media,
.cs-phase-image-right .cs-paper-figure { order: 2; }
.cs-phase-image-left .cs-phase-text { order: 2; }
.cs-phase-image-left .cs-phase-media,
.cs-phase-image-left .cs-paper-figure { order: 1; }
@media (max-width: 880px) {
.cs-phase { grid-template-columns: 1fr; gap: 32px; }
.cs-phase .cs-phase-text, .cs-phase .cs-phase-media { order: 0; }
}
.cs-phase-text { display: flex; flex-direction: column; gap: clamp(20px, 2.4vh, 28px); align-items: flex-start; }
.cs-phase-num {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7a64ff;
padding: 5px 12px;
border: 1px solid rgba(122,100,255,0.3);
border-radius: var(--r-pill);
background: rgba(122,100,255,0.08);
}
.cs-phase-title {
font-size: clamp(26px, 3vw, 40px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.025em;
margin: 0;
color: var(--text);
}
.cs-phase-desc {
font-size: clamp(15px, 1.4vw, 17px);
color: var(--text-2);
line-height: 1.65;
margin: 0;
max-width: none;
}
.cs-phase-desc strong { color: #9887ff; font-weight: 600; }
.cs-phase-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
font-size: 15px;
color: var(--text-2);
}
.cs-phase-list li {
position: relative;
padding-left: 22px;
line-height: 1.55;
}
.cs-phase-list li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 8px; height: 1.5px;
background: #7a64ff;
}
.cs-phase-list strong { color: var(--text); font-weight: 600; }
.cs-phase-media {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
aspect-ratio: 4 / 3;
background: var(--surface-2);
}
.cs-phase-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.cs-phase-fallback { position: absolute; inset: 0; z-index: 1; }
.cs-phase-fallback-1 {
background:
radial-gradient(circle at 30% 30%, rgba(122,100,255,0.30), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(76,111,255,0.20), transparent 55%),
linear-gradient(135deg, #1c1735 0%, #0e0c1a 100%);
}
.cs-phase-fallback-2 {
background:
radial-gradient(circle at 50% 30%, rgba(76,111,255,0.30), transparent 55%),
radial-gradient(circle at 30% 80%, rgba(122,100,255,0.18), transparent 55%),
linear-gradient(135deg, #14213a 0%, #0e131e 100%);
}
.cs-phase-fallback-3 {
background:
radial-gradient(circle at 70% 40%, rgba(255,110,171,0.22), transparent 55%),
radial-gradient(circle at 30% 70%, rgba(122,100,255,0.18), transparent 55%),
linear-gradient(135deg, #251a30 0%, #1a1020 100%);
}
.cs-phase-fallback-4 {
background:
radial-gradient(circle at 50% 50%, rgba(69,217,200,0.20), transparent 55%),
radial-gradient(circle at 80% 30%, rgba(122,100,255,0.20), transparent 55%),
linear-gradient(135deg, #142a30 0%, #0e1820 100%);
}
/* ---------- FINDINGS (inline highlights between phases) ---------- */
.cs-findings {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2vw, 24px);
margin: clamp(40px, 5vh, 64px) 0;
padding: clamp(24px, 3vw, 36px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
}
@media (max-width: 760px) { .cs-findings { grid-template-columns: 1fr; } }
.cs-finding {
display: flex;
flex-direction: column;
gap: 10px;
}
.cs-finding-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9887ff;
}
.cs-finding p {
font-size: 16px;
color: var(--text);
line-height: 1.55;
margin: 0;
}
/* ---------- RESULTS ---------- */
.cs-results .cs-section-head { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.cs-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cs-gap-cards);
margin-bottom: var(--cs-space-head);
}
/* 4-up variant — for 4-card grids that should run side-by-side. */
.cs-results-grid--2x2 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
.cs-results-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.cs-results-grid--2x2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .cs-results-grid { grid-template-columns: 1fr; } }
.cs-result-stat {
padding: var(--cs-pad-card);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
text-align: left;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-result-stat:hover { border-color: rgba(0,0,0,0.18); }
/* ODI-aligned color variants. */
.cs-result-stat--green { background: #BFEFD9; }
.cs-result-stat--navy { background: #B8E0EE; }
.cs-result-stat--mustard { background: #F4E6AC; }
.cs-result-stat--rust { background: #F5C7BC; }
.cs-result-value {
font-size: clamp(48px, 6vw, 80px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: #1A1A1A;
}
.cs-result-stat--green .cs-result-value { color: #0E5A45; }
.cs-result-stat--navy .cs-result-value { color: #243B6B; }
.cs-result-stat--mustard .cs-result-value { color: #B89200; }
.cs-result-stat--rust .cs-result-value { color: #8E2A1F; }
.cs-result-unit {
font-family: var(--font-serif);
font-style: italic;
color: rgba(26,26,26,0.55);
font-size: 0.5em;
font-weight: 400;
margin-left: 4px;
}
.cs-result-label {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(26,26,26,0.65);
margin-top: 8px;
}
.cs-result-stat--green .cs-result-label { color: #0E5A45; }
.cs-result-stat--navy .cs-result-label { color: #243B6B; }
.cs-result-stat--mustard .cs-result-label { color: #B89200; }
.cs-result-desc {
font-size: 14px;
color: #2A2A2A;
line-height: 1.55;
margin-top: 4px;
}
/* Key Screens block inside The Outcome — sub-head + figure pairs stacked */
.cs-keyscreens {
margin-top: var(--cs-space-block);
display: flex;
flex-direction: column;
gap: var(--cs-space-head);
}
.cs-keyscreens .cs-phase-sub-head + .cs-paper-figure {
margin-top: var(--cs-stack-sm);
}
/* Quote nested inside Result & Impact section */
.cs-results-quote-eyebrow {
display: block;
margin-top: var(--cs-space-head);
text-align: center;
}
.cs-results .cs-quote {
margin-left: auto;
margin-right: auto;
}
/* Two-up testimonial row inside Result & Impact */
.cs-quote-row {
margin-top: clamp(40px, 5vh, 64px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.4vw, 32px);
align-items: stretch;
}
.cs-quote-row .cs-quote.cs-quote--card {
margin: 0; /* row controls spacing now */
padding: clamp(32px, 3.2vw, 48px) clamp(36px, 3.6vw, 56px);
height: 100%;
}
.cs-quote-row .cs-quote.cs-quote--card .cs-quote-glyph {
font-size: clamp(60px, 6.4vw, 96px);
}
.cs-quote-row .cs-quote.cs-quote--card p {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
max-width: none;
margin-bottom: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 880px) {
.cs-quote-row { grid-template-columns: 1fr; }
}
/* Figma-style client quote card — bigger card, generous padding all around.
Selector uses two classes (.cs-quote.cs-quote--card) to win specificity over
the base .cs-quote { padding: 0; max-width: 920px; } defined later in this file. */
.cs-quote.cs-quote--card {
position: relative;
margin-top: clamp(40px, 5vh, 64px);
padding: clamp(48px, 5vw, 80px) clamp(72px, 8vw, 120px);
background: linear-gradient(180deg, rgba(122,100,255,0.18) 0%, rgba(122,100,255,0.08) 100%);
border: 1px solid rgba(122,100,255,0.22);
border-radius: clamp(20px, 2.4vw, 28px);
max-width: none;
text-align: left;
}
.cs-quote.cs-quote--card .cs-quote-glyph {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(80px, 9vw, 132px);
line-height: 0.7;
color: #9887ff;
margin: 0 0 clamp(4px, 0.6vw, 10px);
user-select: none;
}
.cs-quote.cs-quote--card p {
margin: 0 0 clamp(20px, 2.4vw, 32px);
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--text);
max-width: 920px;
}
.cs-quote.cs-quote--card p em {
color: #9887ff;
font-style: normal;
font-weight: 600;
}
.cs-quote.cs-quote--card .cs-quote-cite {
display: block;
margin: 0;
font-family: var(--font-sans);
font-style: normal;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--text-2);
}
.cs-results-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface-2);
margin-bottom: var(--cs-space-head);
}
.cs-results-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.cs-results-fallback {
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(900px 400px at 50% 100%, rgba(76,111,255,0.4), transparent 60%),
radial-gradient(circle at 30% 30%, rgba(122,100,255,0.3), transparent 55%),
linear-gradient(135deg, #1f1735 0%, #0e0c1a 100%);
}
.cs-results-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: clamp(20px, 2.4vh, 28px);
}
/* ---------- CLIENT QUOTE ---------- */
.cs-quote-section {
text-align: left;
}
.cs-quote {
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--text);
margin: clamp(24px, 3vh, 40px) 0 0;
padding: 0;
max-width: 920px;
position: relative;
}
.cs-quote p { margin: 0 0 24px; }
.cs-quote em {
color: #9887ff;
font-style: normal;
font-weight: 600;
}
.cs-quote-cite {
display: block;
font-family: var(--font-sans);
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-2);
margin-top: 16px;
}
/* ---------- REFLECTIONS ---------- */
.cs-reflect-body {
max-width: none;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ---------- NEXT CASE STUDY ---------- */
.cs-next {
max-width: var(--container);
margin: clamp(80px, 12vh, 140px) auto 0;
padding: 0 var(--gutter) clamp(60px, 8vh, 96px);
}
.cs-next-link {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: clamp(20px, 4vw, 40px);
padding: clamp(40px, 6vh, 80px) clamp(32px, 5vw, 64px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.cs-next-link:hover {
border-color: var(--border-3);
background: var(--surface-2);
transform: translateY(-3px);
}
.cs-next-link:hover .cs-next-arrow { transform: translateX(8px); color: #9887ff; }
.cs-next-text { display: flex; flex-direction: column; gap: 10px; }
.cs-next-title {
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0;
color: var(--text);
}
.cs-next-desc {
font-size: 15px;
color: var(--text-2);
line-height: 1.55;
margin: 0;
max-width: 720px;
}
.cs-next-arrow {
font-size: clamp(28px, 3.6vw, 44px);
color: var(--text-2);
transition: transform 0.3s var(--ease), color 0.3s var(--ease);
font-weight: 300;
}
@media (max-width: 640px) {
.cs-next-link { grid-template-columns: 1fr; }
.cs-next-arrow { display: none; }
}
/* Responsive tweak: hero text on small screens */
@media (max-width: 640px) {
.cs-hero-title { font-size: clamp(40px, 11vw, 60px); }
.cs-hero-tagline { font-size: clamp(18px, 5vw, 22px); }
}
/* ---------- FINAL REDESIGN PREVIEW ---------- */
.cs-final-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface-2);
margin-top: clamp(20px, 3vh, 32px);
}
.cs-final-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.cs-final-fallback {
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(1000px 400px at 50% 100%, rgba(122,100,255,0.4), transparent 60%),
radial-gradient(circle at 30% 30%, rgba(76,111,255,0.28), transparent 55%),
radial-gradient(circle at 80% 60%, rgba(255,110,171,0.16), transparent 55%),
linear-gradient(135deg, #1e1735 0%, #0c0a18 100%);
}
/* ---------- PROCESS OVERVIEW LIST ---------- */
.cs-process-overview {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 1.6vw, 20px);
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 880px) { .cs-process-overview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cs-process-overview { grid-template-columns: 1fr; } }
.cs-process-overview li {
display: flex;
flex-direction: column;
gap: 8px;
padding: clamp(20px, 2.4vw, 28px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
}
.cs-po-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: #7a64ff;
}
.cs-po-title {
font-size: 15px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.35;
}
/* ---------- PROCESS CARDS (Discover · Define · Design · Deliver) ---------- */
.cs-proc-row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 16px;
margin-top: clamp(32px, 4vh, 48px);
}
.cs-proc-card {
flex: 1 1 0;
min-width: 220px;
max-width: 280px;
padding: var(--cs-pad-card);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-proc-card:hover { border-color: rgba(0,0,0,0.18); }
/* ODI-aligned color variants — same palette as the IA diagram.
Pastel card fill + saturated badge + dark on-pastel text. */
.cs-proc-card--green { background: #BFEFD9; }
.cs-proc-card--navy { background: #B8E0EE; }
.cs-proc-card--mustard { background: #F4E6AC; }
.cs-proc-card--rust { background: #F5C7BC; }
.cs-proc-head {
display: flex;
align-items: center;
gap: 12px;
}
.cs-proc-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: #1A1A1E;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.cs-proc-card--green .cs-proc-badge { background: #0E5A45; }
.cs-proc-card--navy .cs-proc-badge { background: #243B6B; }
.cs-proc-card--mustard .cs-proc-badge { background: #B89200; }
.cs-proc-card--rust .cs-proc-badge { background: #8E2A1F; }
.cs-proc-title {
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
letter-spacing: -0.01em;
}
.cs-proc-week {
font-size: 11px;
font-weight: 600;
color: rgba(26,26,26,0.6);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cs-proc-stages {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.cs-proc-stages li {
position: relative;
padding-left: 14px;
font-size: 13px;
color: #2A2A2A;
line-height: 1.5;
}
.cs-proc-stages li::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 5px; height: 5px;
border-radius: 50%;
background: #1A1A1A;
}
.cs-proc-card--green .cs-proc-stages li::before { background: #0E5A45; }
.cs-proc-card--navy .cs-proc-stages li::before { background: #243B6B; }
.cs-proc-card--mustard .cs-proc-stages li::before { background: #B89200; }
.cs-proc-card--rust .cs-proc-stages li::before { background: #8E2A1F; }
.cs-proc-connector {
align-self: center;
width: 28px;
height: 2px;
background: rgba(255,255,255,0.18);
flex-shrink: 0;
border-radius: 999px;
}
@media (max-width: 1024px) {
.cs-proc-row { gap: 14px; }
.cs-proc-card { min-width: 200px; }
.cs-proc-connector { display: none; }
}
@media (max-width: 600px) {
.cs-proc-row { flex-direction: column; align-items: stretch; }
.cs-proc-card { max-width: none; min-width: 0; }
}
/* ---------- PHASE SECTION (with header) ---------- */
.cs-phase-section { padding-top: var(--cs-space-section); }
.cs-phase-header {
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
align-items: flex-start;
max-width: none;
}
/* First sub-block sits one "head" gap below the phase header. */
.cs-phase-header + .cs-phase-block {
margin-top: clamp(44px, 5.5vh, 64px);
}
.cs-phase-header .cs-phase-num {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7a64ff;
padding: 6px 14px;
border: 1px solid rgba(122,100,255,0.3);
border-radius: var(--r-pill);
background: rgba(122,100,255,0.08);
align-self: flex-start;
}
.cs-phase-h {
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.028em;
margin: 0;
color: var(--text);
}
.cs-phase-lede {
font-size: clamp(15px, 1.4vw, 18px);
color: var(--text-2);
line-height: 1.6;
margin: 0;
max-width: none;
}
/* Phase header — badge + label */
.cs-phase-num-row {
display: flex;
align-items: center;
gap: 12px;
}
.cs-phase-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 14px;
border-radius: 999px;
background: #7a64ff;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
}
.cs-phase-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-3);
}
/* Phase block — wrapping each sub-section (Goals, Stakeholder, Tech, Q+Q) */
.cs-phase-block {
margin-top: var(--cs-space-block);
display: flex;
flex-direction: column;
gap: var(--cs-space-head);
}
/* When .cs-phase is nested inside a .cs-phase-block, drop the legacy divider
and outer padding so the parent block's gap controls vertical rhythm. */
.cs-phase-block .cs-phase,
.cs-phase-block .cs-phase:first-of-type {
border-top: none !important;
border-bottom: none !important;
padding: 0 !important;
}
.cs-phase-block .cs-phase + .cs-phase {
margin-top: var(--cs-space-block);
}
/* Branched variant — adds extra top margin to the first cs-phase so the
umbrella sub-head (e.g. "Stakeholder interviews & ecosystem mapping")
visually reads as the parent, with its branches stepping down from it. */
.cs-phase-block--branched .cs-phase-sub-head + .cs-phase {
margin-top: clamp(16px, 2vh, 28px);
}
.cs-phase-sub-head {
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
}
.cs-phase-sub-title {
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.2;
margin: 0;
color: var(--text);
}
.cs-phase-sub-desc {
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.6;
color: var(--text-2);
margin: 0;
max-width: none;
}
.cs-phase-sub-desc strong { color: #9887ff; font-weight: 600; }
/* Mid-Fi figure CTA — floats at the top-right of the cream paper frame.
Only positioning/elevation overrides here; the color treatment comes from the
global .btn-primary so this stays in sync with every other button in the system. */
.cs-midfi-figure--has-cta { position: relative; }
.cs-figure-cta {
position: absolute;
top: clamp(22px, 2.4vw, 34px);
right: clamp(22px, 2.4vw, 34px);
z-index: 5;
box-shadow:
0 6px 14px -4px rgba(0,0,0,0.35),
0 18px 32px -16px rgba(0,0,0,0.5);
}
@media (max-width: 640px) {
.cs-figure-cta {
top: 14px;
right: 14px;
font-size: 13px;
padding-top: 8px;
padding-bottom: 8px;
}
}
/* Research Goals — 4-card 2×2 grid */
.cs-goals-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
}
.cs-goals-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
.cs-goals-grid,
.cs-goals-grid--3 { grid-template-columns: 1fr; }
}
.cs-goal-card {
padding: var(--cs-pad-card);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-goal-card:hover { border-color: rgba(0,0,0,0.18); }
/* ODI-aligned color variants — same palette as the IA diagram. */
.cs-goal-card--green { background: #BFEFD9; }
.cs-goal-card--navy { background: #B8E0EE; }
.cs-goal-card--mustard { background: #F4E6AC; }
.cs-goal-card--rust { background: #F5C7BC; }
.cs-goal-num {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-width: 42px;
height: 30px;
padding: 0 14px;
border-radius: 999px;
background: #1A1A1E;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
.cs-goal-card--green .cs-goal-num { background: #0E5A45; }
.cs-goal-card--navy .cs-goal-num { background: #243B6B; }
.cs-goal-card--mustard .cs-goal-num { background: #B89200; }
.cs-goal-card--rust .cs-goal-num { background: #8E2A1F; }
.cs-goal-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
margin: 0;
color: #1A1A1A;
}
.cs-goal-desc {
font-size: 14px;
line-height: 1.55;
color: #2A2A2A;
margin: 0;
}
/* Phase row — 2 cards side-by-side */
.cs-phase-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
align-items: stretch;
}
@media (max-width: 880px) { .cs-phase-row-2 { grid-template-columns: 1fr; } }
.cs-phase-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-phase-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-phase-card-tag {
display: inline-block;
align-self: flex-start;
padding: 0;
background: none;
border: none;
color: #7a64ff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cs-phase-card-tag--alert {
background: none;
color: #ef4444;
}
.cs-phase-card-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.cs-phase-card-desc {
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
/* Image figure inside a phase card (e.g. principles diagram, ecosystem map) */
.cs-phase-card-figure {
margin: 8px 0 0;
border-radius: var(--r-lg);
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--border);
}
.cs-phase-card-figure img {
display: block;
width: 100%;
height: auto;
}
/* Pair of media items inside a phase row (two wireframes side-by-side). Sits in the
image column of the .cs-phase grid and splits it 50/50 between the two figures. */
.cs-phase-media-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 1.8vw, 28px);
align-items: start;
}
/* Bare variant — strips the white-frame container so the wireframe artwork
(which already has its own rounded device bezels) renders edge-to-edge. */
.cs-phase-media-pair--bare {
overflow: visible;
padding: 4px; /* small inset so device-bezel shadows don't clip */
}
.cs-phase-media-pair--bare > figure {
margin: 0;
padding: 0;
background: transparent;
border: none;
overflow: visible;
border-radius: 0;
aspect-ratio: auto;
position: static;
}
.cs-phase-media-pair--bare > figure img {
display: block;
width: 100%;
height: auto;
object-fit: unset;
position: static;
inset: auto;
padding: 0;
border-radius: 0;
}
/* Testing pair — full-width row sitting under the Iterative Testing block.
Adds vertical breathing room so it reads as a separate gallery moment. */
.cs-phase-media-pair--testing {
margin-top: clamp(32px, 4.5vw, 56px);
align-items: center;
}
/* Per-figure rounded variant — overrides the bare-pair's 0 radius for the
left frame (which is a flat artwork that benefits from softened corners). */
.cs-phase-media-pair--bare > .cs-pair-fig--rounded {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55);
}
.cs-phase-media-pair--bare > .cs-pair-fig--rounded img {
border-radius: 18px;
}
@media (max-width: 720px) {
.cs-phase-media-pair--testing {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Phase row variant that gives more horizontal space to the media column when the
visuals are the focal point (e.g. mid-fi wireframes). */
.cs-phase--wide-media {
grid-template-columns: 3fr 2fr !important;
}
@media (max-width: 880px) {
.cs-phase--wide-media { grid-template-columns: 1fr !important; }
}
/* Light-bg phase media — white-framed container for images designed on light backgrounds
(principles diagram, ecosystem map, tech findings). The frame matches the image's own
white background so colours render correctly, and the image fills the frame at its
native aspect ratio so labels stay legible. */
.cs-phase-media-light {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: auto; /* let the image's natural aspect drive the height */
position: relative;
padding: clamp(10px, 1vw, 14px);
box-sizing: border-box;
}
.cs-phase-media-light img {
position: static;
inset: auto;
width: 100%;
height: auto;
object-fit: unset;
padding: 0;
border-radius: calc(var(--r-lg) - 6px);
display: block;
}
/* ============================================================
IA Diagram — "pasted artifact" treatment.
Full-width on the page, cream paper inside a soft frame, drop shadow,
and a hand-written-style caption underneath. Deliberately stylistically
different from the rest of the case study so it reads as an external
document, not page chrome.
============================================================ */
.cs-ia-artifact {
margin: 0;
padding: clamp(18px, 2.2vw, 32px);
background: #1C1C24; /* warmer, lifted frame — distinct from page bg */
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 18px 40px -22px rgba(0,0,0,0.75),
0 36px 80px -40px rgba(0,0,0,0.55);
position: relative;
overflow: hidden;
}
.cs-ia-artifact img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 0 0 1px rgba(0,0,0,0.4),
0 8px 24px -12px rgba(0,0,0,0.6);
}
.cs-ia-artifact figcaption {
margin-top: 14px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-2);
}
.cs-ia-notes {
margin-top: var(--cs-stack-sm);
display: flex;
flex-direction: column;
gap: 14px;
}
/* ============================================================
Pasted-artifact figure — cream-paper frame with caption.
Used across every diagram, screenshot, and key-workflow visual
on the case study so the page reads as a cohesive scrapbook.
============================================================ */
.cs-paper-figure,
.cs-midfi-figure { /* legacy alias */
margin: 0;
padding: clamp(14px, 1.6vw, 22px);
background: #F3EFE4; /* warm paper, distinct from dark page */
border: 1px solid #E0D8C4;
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 18px 40px -22px rgba(0,0,0,0.65),
0 36px 80px -40px rgba(0,0,0,0.45);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cs-paper-figure img,
.cs-midfi-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
background: #FFFFFF; /* in case the image has transparency */
}
.cs-paper-figure figcaption,
.cs-midfi-figure figcaption {
margin-top: 12px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.04em;
color: #7C6F4E;
}
/* Narrow variant — for small artifacts (e.g. testing quotes) so they
don't blow up to full container width. Centered horizontally. */
.cs-paper-figure--narrow {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Tall variant — for portrait/phone-shaped media (e.g. screen recordings).
Caps the media width so a vertical video doesn't stretch huge. */
.cs-paper-figure--tall {
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
/* Analytics grid — Phase 3 quantitative insights.
Three artifacts side-by-side: GA4 report, click heatmap, scroll map. */
.cs-analytics-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--cs-gap-cards);
align-items: start;
}
.cs-analytics-grid .cs-paper-figure--tall {
margin: 0;
max-width: none;
width: 100%;
}
@media (max-width: 1024px) {
.cs-analytics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.cs-analytics-grid { grid-template-columns: 1fr; }
.cs-analytics-grid .cs-paper-figure--tall { max-width: 380px; margin: 0 auto; }
}
/* Setup-layout — used in the Eye-tracking testing setup block.
Cards stacked vertically on the left, portrait video card on the right. */
.cs-setup-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--cs-gap-cards);
align-items: start;
}
.cs-setup-cards {
display: flex;
flex-direction: column;
gap: var(--cs-gap-cards);
}
.cs-setup-layout .cs-paper-figure--tall {
margin: 0; /* don't auto-center inside the grid cell */
max-width: none;
width: 100%;
}
@media (max-width: 880px) {
.cs-setup-layout { grid-template-columns: 1fr; }
.cs-setup-layout .cs-paper-figure--tall { max-width: 380px; margin: 0 auto; }
}
/* Video child — behaves the same as ![]()
inside the paper figure. */
.cs-paper-video {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
background: #000000;
}
.cs-midfi-notes {
margin-top: var(--cs-stack-sm);
display: flex;
flex-direction: column;
gap: 14px;
}
.cs-midfi-actions {
margin-top: 12px;
display: flex;
align-items: center;
gap: 12px;
}
/* ============================================================
Phase 4 — Final Design & the Pivot
4.1 The Twist: side-by-side before/after pivot cards
============================================================ */
.cs-phase4-block { gap: var(--cs-space-head); }
.cs-pivot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
}
@media (max-width: 880px) { .cs-pivot-grid { grid-template-columns: 1fr; } }
/* Stacked variant — each pivot card spans full width so it can hold a multi-visual gallery. */
.cs-pivot-grid--stack { grid-template-columns: 1fr; }
/* Multi-visual gallery inside a single pivot card. */
.cs-pivot-figs-row {
margin-top: var(--cs-stack-sm);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
align-items: start;
justify-items: center;
}
.cs-pivot-figs-row--rules { grid-template-columns: 1.1fr 1fr; align-items: center; }
@media (max-width: 760px) {
.cs-pivot-figs-row,
.cs-pivot-figs-row--rules { grid-template-columns: 1fr; }
}
/* Inside the gallery, allow figures to breathe wider than the side-by-side default. */
.cs-pivot-figs-row .cs-pivot-figure--tall { max-width: 320px; }
.cs-pivot-figs-row .cs-pivot-figure--tall img,
.cs-pivot-figs-row .cs-pivot-figure--tall video { max-height: 580px; }
.cs-pivot-figs-row--rules .cs-pivot-figure--tall { max-width: 360px; }
.cs-pivot-figs-row--rules .cs-pivot-figure--tall img { max-height: 680px; }
.cs-pivot-figs-row--rules .cs-paper-figure { margin: 0; max-width: 380px; width: 100%; }
/* Compact gallery — for findings that share the standard side-by-side 2-up pivot grid,
so multi-visual cards still fit cleanly inside a half-width card. */
.cs-pivot-figs-row--compact {
gap: 14px;
margin-top: var(--cs-stack-xs);
}
.cs-pivot-figs-row--compact .cs-pivot-figure {
margin-top: 0;
align-self: center;
width: 100%;
}
.cs-pivot-figs-row--compact .cs-pivot-figure--tall {
max-width: 220px;
padding: 6px;
}
.cs-pivot-figs-row--compact .cs-pivot-figure--tall img,
.cs-pivot-figs-row--compact .cs-pivot-figure--tall video { max-height: 420px; }
.cs-pivot-figs-row--compact.cs-pivot-figs-row--rules {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.cs-pivot-figs-row--compact.cs-pivot-figs-row--rules .cs-pivot-figure--tall img { max-height: 360px; }
.cs-pivot-figs-row--compact .cs-paper-figure {
padding: 6px;
max-width: 220px;
margin: 0;
box-shadow: 0 6px 14px -10px rgba(0,0,0,0.55);
}
.cs-pivot-figs-row--compact .cs-pivot-figs-stack { gap: 10px; }
/* Single-visual variant — same compact sizing as the 2-up row but only one slot, centered.
Lets a single video sit at the same scale as its paired-visual sibling card. */
.cs-pivot-figs-row--single { grid-template-columns: 1fr; justify-items: center; }
/* Prominent — for findings where BOTH cards carry a single visual; lets each one breathe larger
without disturbing the 2-up compact sizing used in multi-visual findings. */
.cs-pivot-figs-row--prominent.cs-pivot-figs-row--single .cs-pivot-figure--tall {
max-width: 300px;
padding: 8px;
}
.cs-pivot-figs-row--prominent.cs-pivot-figs-row--single .cs-pivot-figure--tall img,
.cs-pivot-figs-row--prominent.cs-pivot-figs-row--single .cs-pivot-figure--tall video {
max-height: 560px;
}
.cs-pivot-figs-stack {
display: flex;
flex-direction: column;
gap: var(--cs-gap-cards);
width: 100%;
align-items: center;
}
.cs-pivot-card {
padding: var(--cs-pad-card);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 22px;
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
min-height: 320px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-pivot-card:hover { border-color: rgba(0,0,0,0.18); }
.cs-pivot-card--before { background: #F5C7BC; } /* rust pastel */
.cs-pivot-card--after { background: #BFEFD9; } /* mint pastel */
.cs-pivot-tag {
align-self: flex-start;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
color: #FFFFFF;
}
.cs-pivot-card--before .cs-pivot-tag { background: #8E2A1F; } /* rust */
.cs-pivot-card--after .cs-pivot-tag { background: #0E5A45; } /* green */
.cs-pivot-title {
margin: 0;
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 600;
color: #1A1A1A;
letter-spacing: -0.01em;
}
.cs-pivot-desc {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #2A2A2A;
}
/* Image holder inside each pivot card — neutral white frame so the
underlying screenshot reads as a pasted artifact, not as part of the
colored card chrome. Constrained height keeps the image from
dominating the card content. */
.cs-pivot-figure {
margin-top: auto;
padding: 10px;
background: #FFFFFF;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 8px 24px -16px rgba(0,0,0,0.45);
overflow: hidden;
max-width: 380px;
align-self: center;
width: 100%;
}
.cs-pivot-figure img {
display: block;
width: 100%;
height: auto;
max-height: 280px;
object-fit: contain;
border-radius: 6px;
}
/* Tall variant — for portrait phone screenshots / screen recordings.
Lets vertical media take more height so it doesn't crush into a strip. */
.cs-pivot-figure--tall { max-width: 260px; }
.cs-pivot-figure--tall img,
.cs-pivot-figure--tall video {
display: block;
width: 100%;
height: auto;
max-height: 520px;
object-fit: contain;
border-radius: 6px;
}
.cs-pivot-video {
display: block;
width: 100%;
height: auto;
background: #000000;
}
/* Finding examples — supplementary visuals that sit BELOW a recommendation's
pivot grid. Used to show implementation variants (e.g. card-size options). */
.cs-finding-examples {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
margin-top: var(--cs-space-head);
align-items: start;
}
.cs-finding-examples--3 { grid-template-columns: 1fr 1fr 1fr; }
.cs-finding-examples--split { grid-template-columns: 1fr 1fr; align-items: stretch; }
.cs-finding-examples .cs-paper-figure { margin: 0; }
.cs-finding-examples .cs-paper-figure--tall { max-width: none; width: 100%; }
/* Stacked column variant — two paper-figures stacked vertically inside one cell. */
.cs-finding-examples-stack {
display: flex;
flex-direction: column;
gap: var(--cs-gap-cards);
}
@media (max-width: 1024px) {
.cs-finding-examples--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.cs-finding-examples,
.cs-finding-examples--3,
.cs-finding-examples--split { grid-template-columns: 1fr; }
}
/* — Before: three static-tier chips — */
.cs-tier-row {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.cs-tier-chip {
padding: 14px 12px;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(14,90,69,0.20);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.cs-tier-chip.is-recommended {
background: #0E5A45;
border-color: #0E5A45;
}
.cs-tier-chip.is-recommended .cs-tier-label,
.cs-tier-chip.is-recommended .cs-tier-addon { color: #FFFFFF; }
.cs-tier-chip.is-recommended .cs-bar { background: rgba(255,255,255,0.28); }
.cs-tier-label {
font-size: 12px;
font-weight: 700;
color: #1A1A1A;
}
.cs-tier-chip .cs-bar {
display: block;
height: 5px;
border-radius: 999px;
background: rgba(26,26,26,0.18);
}
.cs-tier-chip .cs-bar:nth-of-type(odd) { width: 80%; }
.cs-tier-chip .cs-bar:nth-of-type(even) { width: 56%; }
.cs-tier-addon {
margin-top: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #0E5A45;
opacity: 0.85;
}
/* — After: membership calculator mockup — */
.cs-calc {
margin-top: auto;
padding: 16px;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(14,90,69,0.22);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cs-calc-head {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(26,26,26,0.55);
}
.cs-calc-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
border-bottom: 1px solid rgba(26,26,26,0.08);
}
.cs-calc-row:last-of-type { border-bottom: none; }
.cs-calc-check {
width: 16px; height: 16px;
border-radius: 4px;
border: 1.5px solid #0E5A45;
background: transparent;
flex-shrink: 0;
position: relative;
}
.cs-calc-row.is-on .cs-calc-check {
background: #0E5A45;
}
.cs-calc-row.is-on .cs-calc-check::after {
content: "";
position: absolute;
left: 3px; top: 1px;
width: 5px; height: 9px;
border: solid #FFFFFF;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cs-calc-name {
flex: 1;
font-size: 14px;
color: #1A1A1A;
}
.cs-calc-price {
font-size: 13px;
font-weight: 600;
color: #0E5A45;
}
.cs-calc-total {
margin-top: 4px;
padding: 12px 14px;
background: #0E5A45;
color: #FFFFFF;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.cs-calc-total strong { font-size: 18px; letter-spacing: -0.01em; }
/* Pull-quote inside Phase 4 — the "this isn't working" moment.
Sits between the setup paragraph and the validation findings, so it
reads as the realization that triggered the pivot. */
.cs-pivot-quote {
margin: var(--cs-stack-sm) 0;
padding: clamp(28px, 3vw, 40px) clamp(32px, 4vw, 56px);
background: linear-gradient(180deg, rgba(142,42,31,0.12) 0%, rgba(142,42,31,0.04) 100%);
border-left: 4px solid #8E2A1F;
border-radius: 14px;
position: relative;
}
.cs-pivot-quote::before {
content: "\201C";
position: absolute;
top: 8px;
left: 18px;
font-family: var(--font-serif);
font-size: 64px;
line-height: 1;
color: rgba(142,42,31,0.35);
}
.cs-pivot-quote p {
margin: 0;
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.012em;
color: var(--text);
}
.cs-pivot-quote cite {
display: block;
margin-top: 12px;
font-style: normal;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #C7847A;
}
/* Principle list (inside Stakeholder Interviews card) */
.cs-principle-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
margin: 4px 0 0;
}
.cs-principle-list li {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 12px;
}
.cs-principle-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: #7a64ff;
color: #fff;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.cs-principle-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0;
line-height: 1.3;
}
.cs-principle-desc {
font-size: 13px;
color: var(--text-2);
margin: 2px 0 0;
line-height: 1.4;
}
/* Ecosystem diagram (inside Ecosystem Map card) */
.cs-ecosystem-diagram {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 28px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 14px;
}
.cs-ecosystem-core {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
border-radius: 999px;
background: #7a64ff;
color: #fff;
box-shadow: 0 0 0 8px rgba(122,100,255,0.12);
}
.cs-ecosystem-core-label { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.cs-ecosystem-core-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; opacity: 0.85; }
.cs-ecosystem-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.cs-ecosystem-chip {
padding: 8px 14px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border-2);
color: var(--text-2);
font-size: 11px;
font-weight: 500;
}
/* Focus-list (inside Qualitative card) */
.cs-focus-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.cs-focus-item {
padding: 14px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-focus-head {
display: flex;
align-items: center;
gap: 10px;
}
.cs-focus-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: #7a64ff;
color: #fff;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.cs-focus-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.cs-focus-desc {
font-size: 12px;
color: var(--text-2);
margin: 0;
line-height: 1.5;
}
/* Bar chart (inside Quantitative card) */
.cs-bar-chart {
padding: 18px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cs-bar-chart-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.cs-bar-chart-label {
font-size: 11px;
font-weight: 600;
color: var(--text-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cs-bar-chart-source {
font-size: 10px;
font-weight: 500;
color: var(--text-3);
opacity: 0.7;
}
.cs-bar-chart-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 90px;
gap: 8px;
}
.cs-bar {
flex: 1 1 0;
background: rgba(122, 100, 255, var(--o, 0.5));
border-radius: 4px;
height: var(--h, 50%);
min-height: 8px;
}
/* ---------- PHASE 2 — Architecture row (3 layer pillars) ---------- */
.cs-arch-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 20px);
}
@media (max-width: 880px) { .cs-arch-row { grid-template-columns: 1fr; } }
.cs-arch-pillar {
padding: clamp(22px, 2.4vw, 28px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-arch-pillar:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-arch-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.cs-arch-desc {
font-size: 13px;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
.cs-arch-items {
display: flex;
flex-direction: column;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.cs-arch-items li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.025);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.cs-arch-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: #7a64ff;
flex-shrink: 0;
}
/* ---------- PHASE 2 — IA / Architecture Diagram image ---------- */
.cs-ia-figure {
margin: 0 auto; /* center the figure within the block */
max-width: 1000px; /* don't blow out to full container width */
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
background: #FFFFFF; /* match the image's own white design canvas */
padding: clamp(24px, 2.6vw, 40px);
}
.cs-ia-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
/* ---------- PHASE 2 — Mid-fidelity option cards (3-up) ---------- */
.cs-options-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 20px);
}
@media (max-width: 880px) { .cs-options-row { grid-template-columns: 1fr; } }
.cs-option-card {
padding: clamp(22px, 2.4vw, 28px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-option-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-option-card--chosen { border-color: rgba(122,100,255,0.45); }
.cs-option-card--chosen:hover { border-color: rgba(122,100,255,0.7); }
.cs-option-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.cs-option-desc {
font-size: 13px;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
.cs-option-wf {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.cs-option-wf-line {
width: var(--w, 80%);
height: 8px;
border-radius: 2px;
background: rgba(180,180,190, var(--o, 0.4));
}
.cs-option-tag {
display: inline-flex;
align-self: flex-start;
align-items: center;
height: 24px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--border-2);
background: rgba(0,0,0,0.3);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--text-3);
}
.cs-option-tag--neutral { border-color: var(--text-3); color: var(--text-3); }
.cs-option-tag--chosen { border-color: #7a64ff; color: #7a64ff; }
.cs-option-tag--cyan { border-color: #67E8F9; color: #67E8F9; }
/* Sub-section number inside a phase block */
.cs-sub-num {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-2);
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--surface);
}
/* ---------- TECHNICAL ANALYSIS FINDING BLOCK ---------- */
.cs-finding-block {
display: grid;
gap: 12px;
margin-top: 8px;
}
.cs-finding-card {
padding: 18px 20px;
background: rgba(122,100,255,0.06);
border: 1px solid rgba(122,100,255,0.18);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-finding-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9887ff;
}
.cs-finding-card p {
font-size: 15px;
color: var(--text);
line-height: 1.55;
margin: 0;
}
/* ---------- RESEARCH FINDINGS GRID (with quotes) ---------- */
.cs-research-findings {
margin-top: 0; /* parent .cs-phase-block already provides the gap */
}
.cs-rf-head {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: clamp(28px, 4vh, 40px);
align-items: flex-start;
max-width: none;
}
.cs-rf-title {
font-size: clamp(24px, 2.8vw, 36px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.022em;
margin: 0;
color: var(--text);
}
.cs-rf-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cs-gap-cards);
}
/* 2×2 variant — for 4-card observation/insight grids that don't fit 3-up. */
.cs-rf-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .cs-rf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cs-rf-grid { grid-template-columns: 1fr; } .cs-rf-grid--2x2 { grid-template-columns: 1fr; } }
.cs-rf-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-rf-card:hover { border-color: var(--border-3); background: var(--surface-2); }
/* ODI palette variants — same color system as goal/proc/solution cards. */
.cs-rf-card--green,
.cs-rf-card--navy,
.cs-rf-card--mustard,
.cs-rf-card--rust {
border-color: rgba(0,0,0,0.06);
}
.cs-rf-card--green { background: #BFEFD9; }
.cs-rf-card--navy { background: #B8E0EE; }
.cs-rf-card--mustard { background: #F4E6AC; }
.cs-rf-card--rust { background: #F5C7BC; }
.cs-rf-card--green:hover { border-color: rgba(0,0,0,0.18); background: #BFEFD9; }
.cs-rf-card--navy:hover { border-color: rgba(0,0,0,0.18); background: #B8E0EE; }
.cs-rf-card--mustard:hover { border-color: rgba(0,0,0,0.18); background: #F4E6AC; }
.cs-rf-card--rust:hover { border-color: rgba(0,0,0,0.18); background: #F5C7BC; }
/* Dark text + saturated number badge on pastel cards. */
.cs-rf-card--green .cs-rf-num,
.cs-rf-card--navy .cs-rf-num,
.cs-rf-card--mustard .cs-rf-num,
.cs-rf-card--rust .cs-rf-num { font-weight: 700; }
.cs-rf-card--green .cs-rf-num { color: #0E5A45; }
.cs-rf-card--navy .cs-rf-num { color: #243B6B; }
.cs-rf-card--mustard .cs-rf-num { color: #B89200; }
.cs-rf-card--rust .cs-rf-num { color: #8E2A1F; }
.cs-rf-card--green .cs-rf-h,
.cs-rf-card--navy .cs-rf-h,
.cs-rf-card--mustard .cs-rf-h,
.cs-rf-card--rust .cs-rf-h { color: #1A1A1A; }
.cs-rf-card--green .cs-rf-desc,
.cs-rf-card--navy .cs-rf-desc,
.cs-rf-card--mustard .cs-rf-desc,
.cs-rf-card--rust .cs-rf-desc { color: #2A2A2A; }
.cs-rf-card--green .cs-rf-desc strong { color: #0E5A45; }
.cs-rf-card--navy .cs-rf-desc strong { color: #243B6B; }
.cs-rf-card--mustard .cs-rf-desc strong { color: #B89200; }
.cs-rf-card--rust .cs-rf-desc strong { color: #8E2A1F; }
.cs-rf-num {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7a64ff;
}
.cs-rf-h {
font-size: clamp(18px, 2vw, 22px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.018em;
margin: 0;
color: var(--text);
}
.cs-rf-desc {
font-size: 14px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
}
.cs-rf-quote {
margin: 12px 0 0;
padding: 18px 22px;
background: rgba(255,255,255,0.03);
border-left: 2px solid #7a64ff;
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cs-rf-quote p {
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 1.65;
letter-spacing: 0;
color: var(--text);
margin: 0;
}
/* Quote tone variants — negative (red) for problem findings, positive (green) for what worked */
.cs-rf-quote--negative {
background: #F8D7DC;
border-left: 3px solid #C0392B;
}
.cs-rf-quote--negative p {
color: #5A1A14;
font-style: italic;
}
.cs-rf-quote--positive {
background: #D9EFDC;
border-left: 3px solid #1F7A3A;
}
.cs-rf-quote--positive p {
color: #0E3A1C;
font-style: italic;
}
/* =============================================================
ABOUT PAGE
Inherits all homepage tokens, fonts, buttons, nav, cursor.
============================================================= */
.ab-hero {
position: relative;
width: 100%;
padding: clamp(110px, 14vh, 150px) var(--gutter) clamp(60px, 8vh, 96px);
overflow: hidden;
--mx: 50%;
--my: 50%;
}
.ab-hero-grid {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media (max-width: 880px) {
.ab-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.ab-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text-2);
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: rgba(20,20,28,0.5);
backdrop-filter: blur(8px);
margin-bottom: 24px;
}
.ab-status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--status-green);
box-shadow: 0 0 0 4px rgba(74,222,128,0.16), 0 0 8px var(--status-glow);
animation: ab-pulse 2.4s ease-in-out infinite;
}
@keyframes ab-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.ab-hero-title {
font-size: clamp(40px, 5.5vw, 72px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.03em;
margin: 0 0 24px;
color: var(--text);
}
.ab-hero-name { color: var(--accent-2); font-weight: 500; }
.ab-hero-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: #9887ff;
letter-spacing: -0.005em;
}
.ab-hero-tag {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.6;
color: var(--text-2);
margin: 0 0 32px;
max-width: 640px;
}
.ab-hero-meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 0 clamp(28px, 4vw, 56px);
padding-top: 28px;
border-top: 1px solid var(--border);
width: fit-content;
}
@media (max-width: 600px) {
.ab-hero-meta { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
}
.ab-meta-item { display: flex; flex-direction: column; gap: 6px; }
.ab-meta-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-3);
}
.ab-meta-value {
font-size: 14px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
/* ============================================================
ABOUT — PHOTO CLUSTER
Scattered polaroid-style photos with cursor parallax,
hover-lift, click-to-bring-forward, and floating doodles.
============================================================ */
.ab-photo-cluster {
position: relative;
width: 100%;
height: clamp(420px, 56vh, 600px);
perspective: 1200px;
}
@media (max-width: 880px) {
.ab-photo-cluster { height: clamp(380px, 70vw, 500px); }
}
.ab-photo {
position: absolute;
width: 56%;
aspect-ratio: 4 / 5;
cursor: pointer;
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.4s var(--ease),
box-shadow 0.4s var(--ease);
transform-style: preserve-3d;
--px: 0px;
--py: 0px;
--rot: 0deg;
--lift: 0px;
transform: translate(var(--px), var(--py)) translateY(var(--lift)) rotate(var(--rot));
}
.ab-photo:hover,
.ab-photo:focus-visible,
.ab-photo.is-active {
--lift: -10px;
filter: brightness(1.06);
outline: none;
}
.ab-photo:hover .ab-photo-frame,
.ab-photo:focus-visible .ab-photo-frame,
.ab-photo.is-active .ab-photo-frame {
box-shadow:
0 40px 80px -20px rgba(0,0,0,0.6),
0 0 0 1px rgba(122,100,255,0.25) inset,
0 0 32px rgba(122,100,255,0.18);
}
.ab-photo:hover .ab-photo-tag,
.ab-photo:focus-visible .ab-photo-tag,
.ab-photo.is-active .ab-photo-tag {
opacity: 1;
transform: translateY(0) rotate(var(--tag-rot, -3deg));
}
/* Individual photo positions + base rotations */
.ab-photo--01 { top: 6%; left: 18%; --rot: 3deg; z-index: 5; width: 60%; }
.ab-photo--02 { top: 14%; left: 50%; --rot: -6deg; z-index: 4; width: 48%; }
.ab-photo--03 { top: 50%; left: 5%; --rot: 7deg; z-index: 3; width: 46%; }
.ab-photo--04 { top: 44%; left: 56%; --rot: -3deg; z-index: 2; width: 50%; }
.ab-photo--05 { top: 28%; left: 28%; --rot: -2deg; z-index: 6; width: 54%; }
@media (max-width: 880px) {
/* Tighter cluster on smaller screens so nothing escapes the box */
.ab-photo--01 { top: 0%; left: 14%; width: 62%; }
.ab-photo--02 { top: 8%; left: 52%; width: 46%; }
.ab-photo--03 { top: 50%; left: 0%; width: 48%; }
.ab-photo--04 { top: 46%; left: 54%; width: 46%; }
.ab-photo--05 { top: 26%; left: 26%; width: 52%; }
}
.ab-photo-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border-2);
box-shadow: 0 24px 56px -16px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.04) inset;
transition: box-shadow 0.4s var(--ease);
}
.ab-photo-frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ab-photo-fallback {
position: absolute; inset: 0;
display: none;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a1530 0%, #0f0b2a 100%);
font-family: var(--font-serif);
font-style: italic;
font-size: 80px;
color: rgba(122,100,255,0.45);
}
.ab-photo--02 .ab-photo-fallback { background: linear-gradient(135deg, #2a1430 0%, #150a25 100%); }
.ab-photo--03 .ab-photo-fallback { background: linear-gradient(135deg, #142a30 0%, #0a1a25 100%); }
.ab-photo--04 .ab-photo-fallback { background: linear-gradient(135deg, #2a2014 0%, #1a1408 100%); }
.ab-photo--05 .ab-photo-fallback { background: linear-gradient(135deg, #20143a 0%, #100828 100%); }
.ab-photo-tag {
position: absolute;
bottom: -10px;
right: -8px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: rgba(20,20,28,0.92);
color: var(--text);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
border: 1px solid var(--border-2);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(6px) rotate(0deg);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.ab-photo--02 .ab-photo-tag { --tag-rot: 4deg; right: auto; left: -8px; }
.ab-photo--03 .ab-photo-tag { --tag-rot: -5deg; right: auto; left: 8px; bottom: -14px; }
.ab-photo--04 .ab-photo-tag { --tag-rot: 3deg; }
.ab-photo--05 .ab-photo-tag {
opacity: 1; /* main photo's tag is always visible */
transform: translateY(0) rotate(-3deg);
background: var(--accent);
color: white;
border-color: var(--accent);
box-shadow: 0 8px 20px rgba(122,100,255,0.4);
}
/* Floating doodles — playful personality marks */
.ab-doodle {
position: absolute;
pointer-events: none;
--px: 0px; --py: 0px;
transform: translate(var(--px), var(--py));
transition: transform 0.4s var(--ease);
z-index: 7;
}
.ab-doodle--arrow {
top: -10px;
right: 0%;
width: 110px;
color: #9887ff;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
transform: translate(var(--px), var(--py)) rotate(-8deg);
}
.ab-doodle--arrow svg { width: 100%; height: auto; }
.ab-doodle--arrow em {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: #9887ff;
}
.ab-doodle--star {
bottom: 6%;
left: -2%;
font-size: 22px;
color: #9887ff;
text-shadow: 0 0 14px rgba(122,100,255,0.5);
animation: ab-spin 14s linear infinite;
}
.ab-doodle--squiggle {
top: 38%;
right: -4%;
width: 70px;
color: rgba(152,135,255,0.6);
transform: translate(var(--px), var(--py)) rotate(20deg);
}
.ab-doodle--squiggle svg { width: 100%; height: auto; }
@keyframes ab-spin {
from { transform: translate(var(--px), var(--py)) rotate(0deg); }
to { transform: translate(var(--px), var(--py)) rotate(360deg); }
}
/* Tiny hint that fades after first interaction */
.ab-cluster-hint {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--text-3);
opacity: 0.7;
pointer-events: none;
}
/* Disable rotations / parallax for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.ab-photo {
--px: 0px !important;
--py: 0px !important;
transition: none;
}
.ab-doodle--star { animation: none; }
}
/* ----- Generic about section ----- */
.ab-section {
max-width: var(--container);
margin: 0 auto;
padding: clamp(80px, 12vh, 140px) var(--gutter) 0;
position: relative;
}
.ab-section:last-of-type {
padding-bottom: clamp(60px, 8vh, 96px);
}
.ab-section-head {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: clamp(40px, 6vh, 64px);
align-items: flex-start;
max-width: 920px;
}
.ab-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7a64ff;
}
.ab-section-title {
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0;
color: var(--text);
}
.ab-section-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: #9887ff;
letter-spacing: -0.01em;
}
.ab-section-lede {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
color: var(--text-2);
margin: 4px 0 0;
}
/* ----- THE STORY ----- */
.ab-story-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
@media (max-width: 880px) { .ab-story-grid { grid-template-columns: 1fr; } }
.ab-story-body { display: flex; flex-direction: column; gap: 18px; }
.ab-story-body p {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.75;
color: var(--text-2);
margin: 0;
}
.ab-story-body strong { color: var(--text); font-weight: 600; }
.ab-story-body em {
font-family: var(--font-serif);
font-style: italic;
color: #9887ff;
font-weight: 400;
}
/* ----- NOW ----- */
.ab-now-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 880px) { .ab-now-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ab-now-grid { grid-template-columns: 1fr; } }
.ab-now-card {
padding: clamp(22px, 2.4vw, 28px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.ab-now-card:hover {
transform: translateY(-3px);
border-color: var(--border-3);
background: var(--surface-2);
}
.ab-now-card--accent {
background: linear-gradient(135deg, rgba(122,100,255,0.10) 0%, rgba(76,111,255,0.05) 100%);
border-color: rgba(122,100,255,0.25);
}
.ab-now-icon { font-size: 22px; line-height: 1; }
.ab-now-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-3);
margin-top: 2px;
}
.ab-now-value {
font-size: 14px;
line-height: 1.55;
color: var(--text);
margin: 0;
}
.ab-now-value strong { color: var(--text); font-weight: 600; }
.ab-now-value em { font-family: var(--font-serif); font-style: italic; }
/* ----- WHAT I BELIEVE ----- */
.ab-believe-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2vw, 28px);
}
@media (max-width: 1024px) { .ab-believe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ab-believe-grid { grid-template-columns: 1fr; } }
.ab-believe-card {
padding: clamp(28px, 3vw, 36px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.ab-believe-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 40px; height: 2px;
background: #7a64ff;
transition: width 0.4s var(--ease);
}
.ab-believe-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.ab-believe-card:hover::before { width: 100%; }
.ab-believe-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: #9887ff;
margin-bottom: 4px;
}
.ab-believe-h {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 400;
line-height: 1.3;
color: var(--text);
margin: 0;
letter-spacing: -0.01em;
}
.ab-believe-d {
font-size: 14px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
}
/* ----- HOW I WORK (loop) ----- */
.ab-loop {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 20px;
padding: clamp(32px, 4vw, 48px);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
position: relative;
}
.ab-loop-step {
flex: 1 1 0;
min-width: 180px;
max-width: 240px;
padding: 24px;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.025);
display: flex;
flex-direction: column;
gap: 8px;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.ab-loop-step:hover { background: rgba(122,100,255,0.08); transform: translateY(-2px); }
.ab-loop-num {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: #7a64ff;
}
.ab-loop-h {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.ab-loop-d {
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
margin: 0;
}
.ab-loop-arrow {
align-self: center;
font-size: 20px;
color: var(--text-3);
}
@media (max-width: 1024px) {
.ab-loop-arrow { display: none; }
}
.ab-loop-back {
position: absolute;
bottom: 14px;
right: 18px;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--text-3);
opacity: 0.6;
}
/* ----- THE STACK ----- */
.ab-stack-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(16px, 1.6vw, 24px);
}
@media (max-width: 1024px) { .ab-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ab-stack-grid { grid-template-columns: 1fr; } }
.ab-stack-col {
padding: clamp(20px, 2vw, 24px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.ab-stack-col:hover { border-color: var(--border-3); background: var(--surface-2); }
.ab-stack-cat {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7a64ff;
margin-bottom: 16px;
}
.ab-stack-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ab-stack-list li {
font-size: 14px;
color: var(--text-2);
line-height: 1.4;
}
.ab-stack-list li strong {
color: var(--text);
font-weight: 600;
}
/* ----- BEYOND DESIGN ----- */
.ab-beyond-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 1024px) { .ab-beyond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ab-beyond-grid { grid-template-columns: 1fr; } }
.ab-beyond-card {
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--surface);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.ab-beyond-card:hover { transform: translateY(-3px); border-color: var(--border-3); }
.ab-beyond-card--lg {
grid-column: span 2;
}
@media (max-width: 1024px) { .ab-beyond-card--lg { grid-column: span 2; } }
@media (max-width: 600px) { .ab-beyond-card--lg { grid-column: span 1; } }
.ab-beyond-photo {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #1a1530 0%, #0f0b2a 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ab-beyond-card--lg .ab-beyond-photo {
aspect-ratio: 16 / 9;
}
.ab-beyond-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease);
}
.ab-beyond-card:hover .ab-beyond-photo img { transform: scale(1.04); }
.ab-beyond-placeholder {
font-size: 56px;
opacity: 0.35;
}
.ab-beyond-body { padding: clamp(20px, 2vw, 28px); }
.ab-beyond-h {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
color: var(--text);
margin: 0 0 8px;
}
.ab-beyond-d {
font-size: 14px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
}
/* ----- RECOGNITION ----- */
.ab-recog-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.ab-recog-row {
display: grid;
grid-template-columns: 80px 1fr 1.4fr;
gap: clamp(20px, 3vw, 40px);
padding: clamp(18px, 2.2vh, 28px) 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
transition: background 0.3s var(--ease);
}
.ab-recog-row:hover { background: rgba(122,100,255,0.04); }
@media (max-width: 760px) {
.ab-recog-row { grid-template-columns: 1fr; gap: 6px; }
}
.ab-recog-year {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: #9887ff;
}
.ab-recog-title {
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 500;
color: var(--text);
}
.ab-recog-where {
font-size: 14px;
color: var(--text-2);
line-height: 1.5;
}
.ab-recog-foot {
margin: clamp(28px, 4vh, 40px) 0 0;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.7;
color: var(--text-2);
max-width: 920px;
}
.ab-recog-foot em {
font-family: var(--font-serif);
font-style: italic;
color: var(--text);
}
/* ----- CONNECT ----- */
.ab-connect-card {
padding: clamp(48px, 6vw, 80px);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
background:
radial-gradient(circle at 20% 0%, rgba(122,100,255,0.16), transparent 50%),
radial-gradient(circle at 80% 100%, rgba(76,111,255,0.12), transparent 55%),
var(--surface);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
position: relative;
overflow: hidden;
}
.ab-connect-title {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(32px, 4.4vw, 56px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.ab-connect-lede {
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.6;
color: var(--text-2);
margin: 0;
max-width: 640px;
}
.ab-connect-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
/* Active nav link */
.nav-link-active {
color: var(--text) !important;
position: relative;
}
.nav-link-active::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 4px; height: 4px;
border-radius: 50%;
background: #7a64ff;
transform: translateX(-50%);
}
/* ============================================================
ODI · Phase 3 — Evaluative Research & Validation
3.1 Usability Testing | 3.2 Metrics | 3.3 Fixes | 3.4 Sessions
============================================================ */
.cs-phase3-block { gap: var(--cs-space-head); }
.cs-sub-num {
display: inline-block;
margin-right: 10px;
color: var(--text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* 3.1 — Participant cards (02 Existing / 06 New) */
.cs-participant-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cs-gap-cards);
}
@media (max-width: 760px) { .cs-participant-grid { grid-template-columns: 1fr; } }
.cs-participant-card {
position: relative;
padding: var(--cs-pad-card);
border: 1px solid var(--border-2);
border-radius: 22px;
background: linear-gradient(180deg, rgba(34,34,45,0.55) 0%, rgba(20,20,28,0.55) 100%);
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
min-height: 220px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-participant-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-participant-num {
font-size: clamp(40px, 4.4vw, 56px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent-2);
margin-bottom: 4px;
}
.cs-participant-title {
margin: 0;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.cs-participant-desc {
margin: 0;
color: var(--text-figma-2);
font-size: clamp(14px, 1.05vw, 15px);
line-height: 1.55;
}
.cs-tag-row {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cs-chip {
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
background: rgba(122, 100, 255, 0.16);
color: var(--accent-2);
letter-spacing: 0.005em;
}
/* 3.2 — Metric cards with progress bar */
.cs-metric-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cs-gap-cards);
}
@media (max-width: 980px) { .cs-metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-metric-grid { grid-template-columns: 1fr; } }
.cs-metric-card {
padding: var(--cs-pad-card);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 20px;
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
min-height: 180px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-metric-card:hover { border-color: rgba(0,0,0,0.18); }
/* ODI-aligned color variants — same palette as the IA diagram. */
.cs-metric-card--green { background: #BFEFD9; }
.cs-metric-card--navy { background: #B8E0EE; }
.cs-metric-card--mustard { background: #F4E6AC; }
.cs-metric-card--rust { background: #F5C7BC; }
.cs-metric-eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(26,26,26,0.55);
font-weight: 600;
}
.cs-metric-value {
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
margin-top: 6px;
color: #1A1A1A;
}
.cs-metric-unit {
font-size: 0.55em;
font-weight: 600;
margin-left: 1px;
}
.cs-metric-card--green .cs-metric-value { color: #0E5A45; }
.cs-metric-card--navy .cs-metric-value { color: #243B6B; }
.cs-metric-card--mustard .cs-metric-value { color: #B89200; }
.cs-metric-card--rust .cs-metric-value { color: #8E2A1F; }
.cs-metric-meta {
margin-top: auto;
color: rgba(26,26,26,0.65);
font-size: 13px;
}
.cs-metric-bar {
display: block;
height: 6px;
border-radius: 999px;
background: rgba(26,26,26,0.10);
overflow: hidden;
margin-top: 12px;
position: relative;
}
.cs-metric-bar-fill {
display: block;
height: 100%;
width: var(--p, 0%);
border-radius: 999px;
}
.cs-metric-card--green .cs-metric-bar-fill { background: #0E5A45; }
.cs-metric-card--navy .cs-metric-bar-fill { background: #243B6B; }
.cs-metric-card--mustard .cs-metric-bar-fill { background: #B89200; }
.cs-metric-card--rust .cs-metric-bar-fill { background: #8E2A1F; }
/* 3.3 — Fix cards (Navigation / Tier Model / Hierarchy) */
.cs-fix-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cs-gap-cards);
}
@media (max-width: 920px) { .cs-fix-grid { grid-template-columns: 1fr; } }
.cs-fix-card {
padding: var(--cs-pad-card);
border: 1px solid var(--border-2);
border-radius: 20px;
background: rgba(20,20,28,0.6);
display: flex;
flex-direction: column;
gap: var(--cs-stack-sm);
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cs-fix-card:hover { border-color: var(--border-3); background: var(--surface-2); }
.cs-fix-tag {
align-self: flex-start;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
}
.cs-fix-tag--purple { background: rgba(122,100,255,0.18); color: var(--accent-2); }
.cs-fix-tag--orange { background: rgba(245,166,91,0.18); color: #F5A65B; }
.cs-fix-tag--teal { background: rgba(103,232,249,0.16); color: var(--accent-cyan); }
.cs-fix-row { display: flex; flex-direction: column; gap: 6px; }
.cs-fix-label {
font-size: 13px;
font-weight: 600;
}
.cs-fix-label--broke { color: #F26F8A; }
.cs-fix-label--fix { color: var(--accent-cyan); }
.cs-fix-text {
margin: 0;
color: var(--text-figma-2);
font-size: 14px;
line-height: 1.55;
}
/* 3.4 — Moderated session cards (browser-chrome style) */
.cs-session-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cs-gap-cards);
}
@media (max-width: 920px) { .cs-session-grid { grid-template-columns: 1fr; } }
.cs-session-card {
position: relative;
padding: var(--cs-pad-card);
border: 1px solid var(--border-2);
border-radius: 20px;
background: rgba(20,20,28,0.6);
display: flex;
flex-direction: column;
gap: var(--cs-stack-xs);
min-height: 200px;
}
.cs-session-chrome {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.cs-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cs-dot--red { background: #F26F6F; }
.cs-dot--yellow { background: #F5C56F; }
.cs-dot--blue { background: #67E8F9; }
.cs-session-progress {
display: flex;
gap: 8px;
margin-top: 4px;
}
.cs-step {
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(122,100,255,0.22);
}
.cs-step.is-on { background: var(--accent-2); }
.cs-session-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-top: 6px;
}
.cs-session-bar {
display: block;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
}
.cs-session-bar--ghost { width: 78%; }
.cs-session-bar--short { width: 56%; }
.cs-session-bar--fill { background: var(--accent); width: 60%; }
.cs-session-bar--wide { width: 78%; }
.cs-session-bar--full { width: 92%; }