/* Extracted from temp_V21.vanilla.runway.html on 2026-05-11 */
/* =====================================================================
BASE / RESET
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #555555;
background: #f8fafc; /* slate-50 — matches home body bg exactly (tokens.css --bg-base, index.html:38). Seamless home → case-study transition; same surface the home card sits on. Liraz 2026-05-12: "כל קוביה מדף הבית זה עולם" */
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Runway selection: flat black */
body::selection, *::selection { background: #000000; color: #ffffff; }
/* Stripe-style numerals (preserved from source — used inside phone mockups) */
.stripe-text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-feature-settings: "ss01" on;
}
.stripe-tnum {
font-feature-settings: "ss01" on, "tnum" on;
}
:root {
--c-purple: #533afd;
--c-purple-light: #b9b9f9;
--c-amber: #fbbf24;
--c-bg: #020617;
--c-bg-2: #0f172a;
--c-bg-3: #1e293b;
--c-line: #334155;
/* Runway portfolio-frame tokens */
--rw-ink: #000000;
--rw-body: #555555;
--rw-muted: #A0A0A0;
--rw-hair: #E5E5E5;
}
/* =====================================================================
RUNWAY TYPOGRAPHY SYSTEM (portfolio frame only — NOT inner mockups)
===================================================================== */
.text-display {
font-size: 40px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.04em;
}
@media (min-width: 768px) {
.text-display {
font-size: 56px;
}
}
.text-heading-lg {
font-size: 32px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.03em;
}
@media (min-width: 768px) {
.text-heading-lg {
font-size: 40px;
}
}
.text-heading-md {
font-size: 28px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.text-heading-md {
font-size: 32px;
}
}
.text-heading-sm {
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
}
@media (min-width: 768px) {
.text-heading-sm {
font-size: 24px;
}
}
.text-subtitle {
font-size: 20px;
font-weight: 400;
line-height: 1.5;
}
.text-body {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.text-eyebrow {
font-size: 14px;
font-weight: 500;
line-height: 1.43;
letter-spacing: 0.35px;
text-transform: uppercase;
}
/* =====================================================================
LUCIDE ICON SIZING
===================================================================== */
[data-lucide], svg[data-lucide] { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ic-2-5 { width: 10px; height: 10px; }
.ic-3 { width: 12px; height: 12px; }
.ic-3-5 { width: 14px; height: 14px; }
.ic-4 { width: 16px; height: 16px; }
.ic-5 { width: 20px; height: 20px; }
.ic-6 { width: 24px; height: 24px; }
.ic-fill { fill: currentColor; }
.stroke-3 { stroke-width: 3; }
/* =====================================================================
PHONE MOCKUP
===================================================================== */
.phone {
position: relative;
flex-shrink: 0;
}
.phone[data-phone-size="sm"] { width: 200px; height: 425px; }
.phone[data-phone-size="md"] { width: 240px; height: 510px; }
.phone[data-phone-size="lg"] { width: 260px; height: 552.5px; }
.phone:not([data-phone-size]) { width: 240px; height: 510px; }
.phone[data-phone-size="sm"] .phone-frame { transform: scale(0.5); }
.phone[data-phone-size="md"] .phone-frame { transform: scale(0.6); }
.phone[data-phone-size="lg"] .phone-frame { transform: scale(0.65); }
.phone:not([data-phone-size]) .phone-frame { transform: scale(0.6); }
@media (max-width: 767px) {
.phone[data-phone-size="sm"],
.phone[data-phone-size="md"],
.phone[data-phone-size="lg"],
.phone:not([data-phone-size]) { width: 200px; height: 425px; }
.phone[data-phone-size="sm"] .phone-frame,
.phone[data-phone-size="md"] .phone-frame,
.phone[data-phone-size="lg"] .phone-frame,
.phone:not([data-phone-size]) .phone-frame { transform: scale(0.5); }
}
.phone-frame {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 850px;
border: 12px solid #0f172a;
background: #020617;
border-radius: 3.5rem;
overflow: hidden;
transform-origin: top left;
box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}
.phone-screen {
position: relative;
width: 100%;
height: 100%;
}
/* §4 + §10 phone slots use a Gemini JPG embed instead of a vanilla mount.
JPG fills the screen viewport, anchored to top so the header band stays visible
even when the source asset is taller than 16:9.5 phone proportions. */
.wb-screen-jpg { overflow: hidden; }
.wb-screen-jpg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 28px;
width: 33.3333%;
background: #0f172a;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
z-index: 100;
}
/* =====================================================================
LIST MOCKUP — shared between FunctionalListMockup + MockListStatic
(interior typography untouched — Synergym dark)
===================================================================== */
.list-mockup {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: #ffffff;
background: #020617;
overflow: hidden;
user-select: none;
}
.list-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
background: #020617;
border-bottom: 1px solid #1e293b;
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
pointer-events: none;
transform: translateY(0);
transition: transform 500ms ease-in-out;
}
.list-header.is-hidden { transform: translateY(-100%); }
.list-header-inner {
padding: 48px 20px 8px 20px;
background: #020617;
pointer-events: auto;
}
.list-header-bars {
display: flex;
gap: 6px;
margin-bottom: 20px;
}
.list-header-bar {
height: 4px;
flex: 1 1 0;
border-radius: 9999px;
background: #1e293b;
}
.list-header-bar.is-on { background: #533afd; }
.list-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.list-header-stats {
display: flex;
flex-direction: column;
color: #ffffff;
font-weight: 500;
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.025em;
}
.list-header-time {
margin-top: 4px;
color: #cbd5e1;
}
.list-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.list-header-streak {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #fbbf24;
border-radius: 9999px;
padding: 4px 12px;
background: #0f172a;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.list-header-streak-dot {
width: 16px;
height: 16px;
background: #fbbf24;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
}
.list-header-streak-num {
color: #ffffff;
font-size: 13px;
font-weight: 500;
}
.list-header-more-wrap { position: relative; }
.list-header-more {
color: #ffffff;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: color 150ms;
border-radius: 9999px;
position: relative;
z-index: 50;
}
.list-header-more:hover { color: #533afd; }
/* Source line 159: `animate-in fade-in slide-in-from-top-2` — fade + drop from -8px */
.list-header-menu {
position: absolute;
right: 0;
top: 100%;
margin-top: 8px;
width: 160px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
padding: 4px 0;
z-index: 50;
overflow: hidden;
animation: ai-fade-slide-top-2 150ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.list-header-menu-item {
padding: 12px 16px;
font-size: 14px;
color: #cbd5e1;
}
.list-header-menu-item.is-active {
color: #ffffff;
background: #334155;
}
.list-header-quit {
border: 1px solid #334155;
color: #cbd5e1;
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
background: #0f172a;
}
.list-header-expand {
max-height: 0;
opacity: 0;
margin-top: 0;
overflow: hidden;
transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out, margin-top 500ms ease-in-out;
}
.list-header.is-expanded .list-header-expand {
max-height: 120px;
opacity: 1;
margin-top: 20px;
}
.list-header-expand-row {
padding: 20px 4px 8px 4px;
border-top: 1px solid #1e293b;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}
.list-header-expand-cell {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
width: 25%;
}
.list-header-expand-cell-num {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.list-header-expand-cell-num.is-purple { color: #818cf8; }
.list-header-expand-cell-label {
color: #64748b;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.list-header-expand-divider {
width: 1px;
height: 24px;
background: #1e293b;
}
.list-header-handle-wrap {
width: 100%;
display: flex;
justify-content: center;
margin-top: 12px;
padding: 4px 0;
}
.list-header-handle {
width: 40px;
height: 6px;
border-radius: 9999px;
background: #334155;
transition: background 300ms;
}
.list-header.is-expanded .list-header-handle { background: #475569; }
.list-body {
flex: 1 1 0;
overflow-y: auto;
padding: 150px 20px 32px 20px;
display: flex;
flex-direction: column;
gap: 16px;
z-index: 10;
-ms-overflow-style: none;
scrollbar-width: none;
}
.list-body::-webkit-scrollbar { display: none; }
/* MockListStatic body — non-scrolling, used inside transitioning mockups */
.list-body-static {
flex: 1 1 0;
padding: 0 20px 0 20px;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.list-card {
display: flex;
flex-direction: column;
background: #0f172a;
border-radius: 16px;
overflow: hidden;
border: 1px solid #1e293b;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
width: 100%;
text-align: left;
color: inherit;
flex-shrink: 0;
}
.list-card-head {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
background: #0f172a;
transition: background 150ms;
cursor: pointer;
}
.list-card-head:hover { background: rgba(30, 41, 59, 0.5); }
.list-card-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.list-card-left {
display: flex;
align-items: center;
gap: 12px;
}
.list-card-status-btn {
color: #475569;
transition: color 150ms;
display: inline-flex;
}
.list-card-status-btn:hover { color: #533afd; }
.list-card-status-btn.is-done { color: #533afd; }
.list-card-pill {
border: 1px solid rgba(83, 58, 253, 0.5);
border-radius: 9999px;
padding: 4px 12px;
background: rgba(83, 58, 253, 0.1);
}
.list-card-pill-text {
color: #b9b9f9;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.025em;
}
.list-card-chev-btn {
color: #64748b;
padding: 4px;
display: inline-flex;
transition: color 150ms;
}
.list-card-chev-btn:hover { color: #cbd5e1; }
.list-card-meta {
display: flex;
align-items: center;
gap: 16px;
}
.list-card-thumbs {
position: relative;
width: 48px;
height: 44px;
flex-shrink: 0;
}
.list-card-thumb {
position: absolute;
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid #533afd;
object-fit: cover;
}
.list-card-thumb.thumb-a { left: 0; top: 0; opacity: 0.7; }
.list-card-thumb.thumb-b { left: 12px; top: 6px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); z-index: 10; }
.list-card-thumb.thumb-solo {
width: 44px;
height: 44px;
border-color: rgba(83, 58, 253, 0.5);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.list-card-titles {
display: flex;
flex-direction: column;
gap: 2px;
}
.list-card-title {
color: #ffffff;
font-weight: 600;
font-size: 16px;
line-height: 1.25;
margin: 0;
}
.list-card-title-up { text-transform: uppercase; }
.list-card-title-soft { opacity: 0.9; font-size: 14px; font-weight: 500; }
.list-card-sub {
color: #94a3b8;
font-size: 12px;
font-weight: 400;
margin: 2px 0 0 0;
}
.list-card-side-icons {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
margin-right: 4px;
color: #64748b;
}
.list-card-sets {
display: none;
flex-direction: column;
padding: 8px;
background: #020617;
border-top: 1px solid #1e293b;
}
.list-card.is-expanded .list-card-sets { display: flex; }
/* =====================================================================
SET ROW (V14: swipeable + status-driven)
===================================================================== */
.set {
position: relative;
overflow: hidden;
margin-bottom: 8px;
border-radius: 12px;
}
.set:last-child { margin-bottom: 0; }
.set-actions {
position: absolute;
top: 0; bottom: 0; right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 4px;
gap: 8px;
width: 100%;
pointer-events: none;
}
.set-action-partial {
pointer-events: auto;
height: calc(100% - 8px);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid #334155;
color: #cbd5e1;
border-radius: 8px;
transition: background 150ms;
}
.set-action-partial:hover { background: #1e293b; }
.set-action-partial-text {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.set-action-full {
pointer-events: auto;
height: calc(100% - 8px);
width: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #533afd;
color: #ffffff;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
transition: background 150ms;
}
.set-action-full:hover { background: #4434d4; }
.set-row {
position: relative;
z-index: 10;
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
transition: transform 300ms ease-out, border-color 150ms;
min-height: 64px;
transform: translateX(0);
touch-action: pan-y;
}
.set.is-swiped .set-row { transform: translateX(-150px); }
.set-row:hover { border-color: #334155; }
.set-inner {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
}
.set-icon-btn {
width: 32px;
height: 32px;
border-radius: 9999px;
border: 1px solid #334155;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #475569;
background: transparent;
transition: background 150ms, color 150ms, border-color 150ms;
}
.set-icon-btn:hover { background: #1e293b; }
.set-icon-btn.is-full {
border-color: #533afd;
background: #533afd;
color: #ffffff;
}
.set-icon-btn.is-partial {
border-color: #334155;
background: #1e293b;
color: #94a3b8;
}
.set-icon-btn.is-active {
border-color: #533afd;
background: rgba(83, 58, 253, 0.2);
color: #533afd;
}
.set-label {
color: #ffffff;
font-weight: 500;
font-size: 15px;
min-width: 45px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.set-stats {
display: flex;
gap: 16px;
margin-left: auto;
align-items: center;
}
.set-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.set-stat-label {
color: #64748b;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.set-stat-value {
color: #e2e8f0;
font-weight: 500;
font-size: 14px;
}
.set-more-btn {
padding: 4px;
color: #64748b;
margin-left: 4px;
transition: color 150ms;
}
.set-more-btn:hover { color: #cbd5e1; }
.list-finish-wrap { padding: 8px 0 24px 0; }
.list-finish {
width: 100%;
background: #1e293b;
color: #cbd5e1;
font-weight: 500;
font-size: 16px;
padding: 16px 0;
border-radius: 12px;
border: 1px solid #334155;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
transition: background 150ms;
}
.list-finish:hover { background: #334155; }
/* =====================================================================
ACTIVE TIMER OVERLAY (V14: appears when a set is activated)
===================================================================== */
/* Source line 583: backdrop = `animate-in fade-in duration-300` */
.timer-backdrop {
position: absolute;
inset: 0;
z-index: 40;
background: rgba(0,0,0,0.2);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
animation: ai-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Source line 584: bar = `animate-in slide-in-from-bottom duration-300` (no fade) */
.timer-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #1c1e54;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
box-shadow: 0 -15px 40px rgba(0,0,0,0.6);
border-top: 1px solid #2e2b8c;
padding: 24px 24px 48px 24px;
z-index: 50;
animation: ai-slide-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.timer-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.timer-row-1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.timer-eyebrow {
color: #b9b9f9;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.timer-progress-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.timer-progress-track {
width: 64px;
height: 6px;
background: #0d132b;
border-radius: 9999px;
overflow: hidden;
display: flex;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
}
.timer-progress-fill {
width: 40%;
background: #f96bee;
height: 100%;
animation: timer-pulse 1.5s ease-in-out infinite;
}
@keyframes timer-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
.timer-time {
color: #ffffff;
font-size: 13px;
font-weight: 500;
}
.timer-row-2 {
display: flex;
gap: 16px;
align-items: center;
}
.timer-icon-box {
width: 56px;
height: 56px;
background: #2a2b66;
border-radius: 10px;
flex-shrink: 0;
border: 1px solid #3e3f88;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
color: #533afd;
}
.timer-titles {
display: flex;
flex-direction: column;
}
.timer-title {
color: #ffffff;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
margin-bottom: 6px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.timer-stats {
color: #d6d9fc;
font-size: 12px;
line-height: 1.25;
margin-bottom: 6px;
display: flex;
gap: 12px;
}
.timer-active-label {
color: #8b8db8;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.timer-row-3 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.timer-row-3-left {
display: flex;
gap: 12px;
}
.timer-icon-circle {
width: 44px;
height: 44px;
background: #0d132b;
border: 1px solid #2e2b8c;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: #d6d9fc;
transition: background 150ms, color 150ms;
}
.timer-icon-circle:hover {
background: #061b31;
color: #ffffff;
}
.timer-row-3-right {
display: flex;
gap: 12px;
align-items: center;
}
.timer-incomplete {
padding: 10px 24px;
background: transparent;
border: 1px solid #b9b9f9;
color: #b9b9f9;
border-radius: 9999px;
font-size: 13px;
font-weight: 500;
transition: background 150ms;
}
.timer-incomplete:hover { background: rgba(255,255,255,0.1); }
.timer-confirm {
width: 48px;
height: 48px;
background: #4ade80;
color: #ffffff;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms;
}
.timer-confirm:hover { background: #22c55e; }
/* =====================================================================
IMMERSIVE MOCKUP (kept identical to V14.vanilla)
===================================================================== */
.immersive {
width: 100%;
height: 100%;
position: relative;
color: #ffffff;
background: #020617;
overflow: hidden;
user-select: none;
}
.immersive-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
transition: transform 700ms ease-out;
}
.immersive-bg.is-zoomed { transform: scale(1.05); }
.immersive-overlay-1 {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(2, 6, 23, 0.5);
mix-blend-mode: multiply;
}
.immersive-overlay-2 {
position: absolute;
inset: 0;
z-index: 0;
height: 75%;
margin-top: auto;
bottom: 0;
background: linear-gradient(to top, #020617 0%, rgba(2, 6, 23, 0.9) 50%, transparent 100%);
}
.immersive-top {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
}
.immersive-top-inner {
padding: 48px 24px 8px 24px;
}
.immersive-progress-bars {
display: flex;
gap: 6px;
margin-bottom: 20px;
}
.immersive-progress-bar {
height: 6px;
flex: 1 1 0;
border-radius: 9999px;
background: rgba(255,255,255,0.2);
transition: background-color 500ms, box-shadow 500ms;
}
.immersive-progress-bar.is-done { background: #533afd; }
.immersive-progress-bar.is-active {
background: #b9b9f9;
box-shadow: 0 0 8px rgba(185,185,249,0.8);
}
.immersive-top-row {
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
}
.immersive-top-left {
display: flex;
gap: 8px;
align-items: center;
}
.immersive-back {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.2);
border-radius: 6px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
transition: background 200ms, border-color 200ms;
}
.immersive-back.is-active {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
.immersive-type {
font-weight: 500;
font-size: 13px;
letter-spacing: 0.025em;
color: #cbd5e1;
text-transform: uppercase;
}
.immersive-timer {
background: rgba(0,0,0,0.2);
padding: 6px 12px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
}
.immersive-timer-icon { color: #533afd; }
.immersive-timer-text {
font-weight: 500;
font-size: 13px;
color: #ffffff;
}
.immersive-content {
position: relative;
z-index: 10;
flex: 1 1 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 140px 24px 40px 24px;
}
.immersive-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 32px;
}
.immersive-titles { display: flex; flex-direction: column; }
.immersive-eyebrow {
color: #533afd;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 8px;
}
.immersive-h1 {
color: #ffffff;
font-size: 44px;
font-weight: 500;
letter-spacing: -0.96px;
line-height: 1.1;
margin: 0 0 24px 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
white-space: pre-wrap;
}
.immersive-stats {
display: flex;
align-items: center;
gap: 16px;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.immersive-stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.immersive-stat-label {
color: #94a3b8;
font-size: 13px;
font-weight: 500;
}
.immersive-stat-label-lead {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.immersive-stat-value {
font-size: 26px;
font-weight: 500;
}
.immersive-stat-divider {
width: 1px;
height: 20px;
background: #334155;
}
.immersive-progress-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding-bottom: 4px;
}
.immersive-progress-track {
width: 10px;
height: 110px;
background: #1e293b;
border-radius: 9999px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
}
.immersive-progress-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #533afd;
border-radius: 9999px;
/* Default: ChallengeImmersive (source line 719, duration-500 ease-out) */
transition: height 500ms ease-out;
}
/* AutoImmersive frame uses duration-1000 ease-out (source line 939) */
.immersive-progress-fill.is-auto {
transition: height 1000ms ease-out;
}
.immersive-progress-text {
color: #ffffff;
font-weight: 500;
font-size: 11px;
text-shadow: 0 1px 1px rgba(0,0,0,0.05);
transition: opacity 300ms;
}
.immersive-cta-row {
display: flex;
gap: 16px;
align-items: center;
width: 100%;
position: relative;
z-index: 20;
}
.immersive-cta-primary {
flex: 1 1 0;
height: 56px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #533afd;
color: #ffffff;
font-weight: 500;
font-size: 16px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
transition: background 300ms, border-color 300ms;
}
.immersive-cta-primary.is-completed {
background: #4434d4;
border: 1px solid #533afd;
}
.immersive-cta-secondary {
width: 56px;
height: 56px;
background: #0f172a;
border: 1px solid #1e293b;
color: #94a3b8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 14px;
}
/* =====================================================================
TAILWIND-ANIMATE COMPOSITIONS (parity with @tailwindcss/animate)
Source compositions:
animate-in fade-in slide-in-from-bottom-16 duration-500
animate-in fade-in slide-in-from-right-16 duration-500
animate-in fade-in slide-in-from-bottom-full duration-500
animate-in fade-in duration-300
animate-in slide-in-from-bottom duration-300
animate-in fade-in slide-in-from-top-2
Easing matches Tailwind animate's default `ease-out` curve
(cubic-bezier(0.16, 1, 0.3, 1) — quartic ease-out).
===================================================================== */
@keyframes ai-fade-slide-bottom-16 {
from { opacity: 0; transform: translate3d(0, 64px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ai-fade-slide-right-16 {
from { opacity: 0; transform: translate3d(64px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ai-fade-slide-bottom-full {
from { opacity: 0; transform: translate3d(0, 100%, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ai-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ai-slide-bottom {
from { transform: translate3d(0, 100%, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes ai-fade-slide-top-2 {
from { opacity: 0; transform: translate3d(0, -8px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.ai-fade-slide-bottom-16 { animation: ai-fade-slide-bottom-16 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ai-fade-slide-right-16 { animation: ai-fade-slide-right-16 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ai-fade-slide-bottom-full{ animation: ai-fade-slide-bottom-full 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ai-fade-in { animation: ai-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ai-slide-bottom { animation: ai-slide-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ai-fade-slide-top-2 { animation: ai-fade-slide-top-2 150ms cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Cursor (pointer) animations — V14 */
@keyframes cursor-swipe-left {
0% { transform: translate(50px, 0); opacity: 0; }
20% { transform: translate(50px, 0); opacity: 1; }
70% { transform: translate(-30px, 0); opacity: 1; }
100% { transform: translate(-30px, 0); opacity: 0; }
}
@keyframes cursor-swipe-up {
0% { transform: translate(0, 50px); opacity: 0; }
20% { transform: translate(0, 50px); opacity: 1; }
70% { transform: translate(0, -30px); opacity: 1; }
100% { transform: translate(0, -30px); opacity: 0; }
}
@keyframes cursor-click {
0% { transform: scale(1.2); opacity: 0; }
30% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.85); opacity: 1; }
70% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.2); opacity: 0; }
}
@keyframes cursor-drag-down {
0% { transform: translate(-50%, -30px); opacity: 0; }
20% { transform: translate(-50%, -30px); opacity: 1; }
70% { transform: translate(-50%, 80px); opacity: 1; }
100% { transform: translate(-50%, 80px); opacity: 0; }
}
.cursor-swipe-left { animation: cursor-swipe-left 1.5s ease-in-out forwards; }
.cursor-swipe-up { animation: cursor-swipe-up 1.5s ease-in-out forwards; }
.cursor-click { animation: cursor-click 1s ease-in-out forwards; }
.cursor-drag-down { animation: cursor-drag-down 1.5s ease-in-out forwards; }
/* Source-style aliases (matches `animate-cursor-*` from temp_V14_runway) */
.animate-cursor-swipe-left { animation: cursor-swipe-left 1.5s ease-in-out forwards; }
.animate-cursor-swipe-up { animation: cursor-swipe-up 1.5s ease-in-out forwards; }
.animate-cursor-click { animation: cursor-click 1s ease-in-out forwards; }
.animate-cursor-drag-down { animation: cursor-drag-down 1.5s ease-in-out forwards; }
.cursor-pin {
position: absolute;
z-index: 100;
color: rgba(255,255,255,0.9);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
pointer-events: none;
}
.cursor-pin-inner {
width: 48px;
height: 48px;
background: rgba(255,255,255,0.2);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.4);
}
.cursor-pin-inner svg { transform: rotate(-45deg); }
/* Light-surface variant — ported verbatim from leader.css for the TM hero
auto-demo, which floats the cursor over the white macbook screen. */
.cursor-pin.on-light .cursor-pin-inner {
background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cursor-pin.on-light .cursor-pin-inner i {
color: rgba(255, 255, 255, 0.95);
}
/* Source: Tailwind's default `animate-pulse` — opacity 1 ↔ 0.5, 2s, cubic-bezier(0.4,0,0.6,1), infinite */
.cursor-pin-inner.is-pulse { animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes tw-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.cursor-pin-sm .cursor-pin-inner {
width: 40px;
height: 40px;
}
.cursor-pin-sm .cursor-pin-inner svg { width: 20px; height: 20px; }
/* =====================================================================
APPROACH-TRANSITION CROSSFADE (List <-> Immersive)
===================================================================== */
.xfade-layer {
position: absolute;
inset: 0;
transition: opacity 500ms ease-in-out;
}
.xfade-layer.is-hidden {
opacity: 0;
pointer-events: none;
}
.xfade-layer.is-shown {
opacity: 1;
pointer-events: auto;
}
/* Static-list translate wrapper (for TimerPersistentBar + SessionOverview) */
.static-list-translate {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding-top: 0;
transition: transform 1000ms ease-in-out;
}
/* Session-overview overlay top-shift */
.session-shade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
pointer-events: none;
transition: opacity 500ms, top 500ms;
opacity: 0;
top: 0;
}
.session-shade.is-visible {
opacity: 1;
top: 220px;
}
/* =====================================================================
PAGE FRAME — Runway footer (case-study chrome)
Header lives in /tokens.css (shared site-wide).
===================================================================== */
.rw-footer {
border-top: 1px solid var(--rw-hair);
padding: 32px 0;
background: #ffffff;
}
.rw-footer-inner {
max-width: 72rem;
margin: 0 auto;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
font-size: 14px;
color: var(--rw-muted);
}
.rw-footer-links {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.rw-footer-links a {
color: var(--rw-muted);
text-decoration: none;
transition: color 200ms;
}
.rw-footer-links a:hover { color: #7c3aed; }
/* =====================================================================
PAGE SECTIONS — Runway portfolio frame (flat white + hairlines)
===================================================================== */
/* Hero */
.hero {
padding: 96px 16px 96px 16px;
max-width: 72rem;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.hero-eyebrow {
color: var(--rw-muted);
margin: 0 0 24px 0;
}
.project-tag {
display: inline-block;
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--rw-muted);
letter-spacing: 0;
line-height: 1.4;
}
.hero-h1 {
color: var(--rw-ink);
margin: 0 0 32px 0;
}
.hero-lede {
color: var(--rw-body);
max-width: 42rem;
margin: 0 auto 96px auto;
}
.hero-phones {
position: relative;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
perspective: 2000px;
cursor: pointer;
}
.hero-phone {
position: absolute;
transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-phone.is-left {
transform: translateX(-48px) rotate(-6deg);
z-index: 20;
}
.hero-phone.is-right {
transform: translateX(48px) rotate(6deg);
z-index: 10;
}
/* §4 Solution v20 CSS retired 2026-05-14 — section removed in commit 9087d37, all .solution-v20-* rules deleted as orphans. */
/* ====================================================================
Section: §5 My Design Process — Round 4d V4_similar port
Markup + class structure from sketches/case-study/trainee/_archive/liraz_v4_similar.html
lines 640-727 (CSS) + 1238-1281 (HTML). Layered with the Round 4b
branch-expand additions below (.stepper-v20-branch chain rebound to
.mind-node hosts).
Citations:
DESIGN-nike.md §typography → mn-label 13/600/0.01em (lines 702-708)
DESIGN-shopify.md §buttons → mn-icon 64×64 white + 2px line border
DESIGN-shopify.md §color → purple-only via --brand-solid `#7c3aed`
DESIGN-shopify.md §spacing → 8px grid (gap-12, padding 5/8/9/10/12)
==================================================================== */
/* Section frame — keeps the existing background + padding from rounds 1-3
so the surrounding rhythm doesn't shift. `.process` is the V4_similar
namespace; we keep `.stepper-v20-section` on the same element so the
reduced-motion JS class hook (`.no-reveal-anim`) and other inherited
rules continue to apply. */
.stepper-v20-section.process {
padding: 96px 16px; /* was 128px — standardized to 96px section padding 2026-05-14. */
background: #f8fafc; /* match body — unified slate-50 surface */
overflow: hidden;
position: relative;
}
/* Process head — eyebrow above the row, V4_similar's `.mono-label` style.
The eyebrow uses BOTH `.mono-label` (V4 verbatim) and `.text-eyebrow`
(V21 global) so we inherit V21's mono font + tracking automatically. */
.stepper-v20-section .process-head {
max-width: 72rem;
margin: 0 auto;
text-align: center;
margin-bottom: 56px; /* V4_similar uses --space-9 ≈ 64px; 56px keeps eyebrow tight to row */
}
/* P0-4: unified eyebrow color → var(--text-muted). */
.stepper-v20-section .process-head .mono-label {
display: block;
color: var(--text-muted);
margin-bottom: var(--space-4);
}
/* Process head H2 — V4_similar verbatim (lines 649-655). Bold sans, tight
tracking, fluid scale. Acts as a tagline summary; not redundant with the
full mn-labels below because labels are now multi-word ("Map Edge Cases"). */
.stepper-v20-section .process-head h2 {
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-weight: 700;
font-size: clamp(28px, 4vw, 40px); /* V21 equivalent of V4's --text-2xl-fluid */
letter-spacing: -0.02em;
color: #0f172a;
margin: 0;
}
/* Process strip — horizontal row of 5 mind-nodes, equal flex.
8% inset background dashed line replaces the round-3 animated SVG —
same visual purpose, simpler implementation. */
.stepper-v20-section .process-strip {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 72rem; /* 1152px — matches V21 page-grid */
margin: 0 auto;
padding: 0 16px;
}
.stepper-v20-section .process-strip::before {
content: '';
position: absolute;
top: 40px; /* aligns to mn-icon vertical center (80/2) */
left: 8%;
right: 8%;
height: 1px;
background: repeating-linear-gradient(to right,
#cbd5e1 0, #cbd5e1 6px,
transparent 6px, transparent 12px);
z-index: 0;
display: none;
}
@media (min-width: 768px) {
.stepper-v20-section .process-strip::before { display: block; }
}
/* Mobile: allow horizontal scroll, hide scrollbar, generous gap between cards */
@media (max-width: 767px) {
.stepper-v20-section .process-strip {
overflow-x: auto;
gap: 32px;
padding-bottom: 32px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.stepper-v20-section .process-strip::-webkit-scrollbar { display: none; }
}
/* === Pulse ring keyframe — V4_similar verbatim (lines 697-701) === */
@keyframes pulse-ring-purple {
0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35); }
70% { box-shadow: 0 0 0 15px rgba(124, 58, 237, 0); }
100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
/* Mind-node — column flex column with circle + num + label.
Acts as the clickable surface (role="button" tabindex="0"). */
.mind-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 1;
z-index: 1;
min-width: 100px;
background: transparent;
cursor: pointer;
transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mind-node:focus-visible {
outline: 2px solid #7c3aed;
outline-offset: 8px;
border-radius: 8px;
}
/* Mn-icon — 64×64 white circle with 2px slate border, hand-rolled SVG inside.
V4_similar verbatim (lines 686-695). Pulse ring fires on .has-children. */
.mn-icon {
position: relative;
z-index: 1;
width: 80px;
height: 80px;
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mind-node.has-children .mn-icon {
animation: pulse-ring-purple 3.4s infinite;
}
/* Mn-icon SVG — V4_similar's stroke-1.8 hand-rolled (lines 725-726) */
.mn-icon svg {
width: 32px;
height: 32px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Mn-num — JetBrains Mono 10px, slate, V4_similar verbatim (lines 709-715) */
.mn-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
color: #94a3b8;
letter-spacing: 0.1em;
margin-top: -4px;
font-variant-numeric: tabular-nums;
transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Mn-label — Inter 13/600/0.01em — V4_similar verbatim (lines 702-708) */
.mn-label {
font-size: 13px;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.01em;
text-align: center;
max-width: 120px;
transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Hover — V4_similar lift + invert (lines 716-723) */
.mind-node:hover .mn-icon {
border-color: #7c3aed;
color: #7c3aed;
transform: scale(1.08);
background: #ffffff;
box-shadow: 0 10px 24px rgba(124, 58, 237, 0.14);
}
.mind-node:hover .mn-label,
.mind-node:hover .mn-num {
color: #7c3aed;
}
/* Round 4f burst — one-shot dramatic burst when parent becomes active.
Scale 1.0 → 1.10 (sharp 30% peak) → 1.0 over 600ms with overshoot
easing for a physical "pop" feel. Box-shadow ring expands outward
from 0 to 32px in parallel. `forwards` holds the dual-layer glow at end. */
/* Subtle one-shot burst — soft scale 1.06 + glow ring expand. 500ms ease-out.
Forwards holds the dual-layer glow at end. */
@keyframes mn-icon-burst {
0% { transform: scale(1);
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4),
0 0 25px rgba(124, 58, 237, 0.25),
inset 0 0 10px rgba(124, 58, 237, 0.06); }
40% { transform: scale(1.06);
box-shadow: 0 0 0 24px rgba(124, 58, 237, 0),
0 0 25px rgba(124, 58, 237, 0.25),
inset 0 0 10px rgba(124, 58, 237, 0.06); }
100% { transform: scale(1);
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0),
0 0 25px rgba(124, 58, 237, 0.25),
inset 0 0 10px rgba(124, 58, 237, 0.06); }
}
/* Active (aria-expanded="true") — subtle burst + dual-layer glow held. */
.mind-node[aria-expanded="true"] .mn-icon {
animation: mn-icon-burst 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 1 forwards;
background: #ffffff;
border-color: #7c3aed;
color: #7c3aed;
box-shadow: 0 0 25px rgba(124, 58, 237, 0.25),
inset 0 0 10px rgba(124, 58, 237, 0.06);
}
.mind-node[aria-expanded="true"] .mn-label,
.mind-node[aria-expanded="true"] .mn-num {
color: #7c3aed;
}
/* === Cursor-follow teardrop tooltip — single fixed element, JS-driven === */
.stepper-v20-tip {
position: fixed;
pointer-events: none;
background: #7c3aed;
color: #ffffff;
padding: 6px 14px;
border-radius: 4px 16px 16px 16px; /* teardrop */
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
opacity: 0;
transform: translateY(4px) scale(0.96);
transform-origin: top left;
box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 10000;
}
.stepper-v20-tip.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* === Detail panel === */
.stepper-v20-detail-wrap {
max-width: 64rem;
margin: 64px auto 0;
position: relative;
}
.stepper-v20-detail {
text-align: left;
max-width: 48rem;
margin: 0 auto;
opacity: 0;
transform: translateY(16px);
transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stepper-v20-detail[hidden] {
display: none;
}
.stepper-v20-detail.is-open {
opacity: 1;
transform: translateY(0);
}
/* P0-4: unified eyebrow color (step number) — 8px margin kept (compact sub-context). */
.stepper-v20-detail-step {
color: var(--text-muted);
display: block;
margin: 0 0 var(--space-2) 0;
}
.stepper-v20-detail-h3 {
color: #000000;
margin: 0 0 16px 0;
}
.stepper-v20-detail-body {
color: #555555;
margin: 0;
}
/* ====================================================================
Section: §5 Stepper — Round 4 BRANCH-EXPAND
Sub-nodes fan around a clicked step, connected by dotted SVG curves.
DNA from home page wheel (.mind-node.has-children + .map-link), adapted
to the horizontal stepper's row layout. ALL purple `#7c3aed`, 8px grid,
layered on top of rounds 1-3 (no existing rules altered).
Citations:
DESIGN-nike.md §typography → label rhythm (Inter 13/500 leaf, 11/500 mobile)
DESIGN-shopify.md §buttons → sub-circle 1.5px stroke, soft purple fill
DESIGN-shopify.md §color → purple-only, no accent variants
DESIGN-shopify.md §spacing → 8px grid offsets, 16/24/32 rhythm
==================================================================== */
/* Mind-node needs overflow:visible to host the absolute branch overlay */
.mind-node.has-children { overflow: visible; }
/* Branch wrapper — absolutely positioned, centered on the parent mn-icon.
Anchored relative to `.mind-node` (which is position:relative). The wrapper
is 240×240; we offset it upward so its center sits on the mn-icon center
(mn-icon is 64×64 at the TOP of .mind-node before the gap-12+mn-num+mn-label).
Vertical position math: mn-icon center = 32px from .mind-node top
(32 = mn-icon height/2). Wrapper top center = 32px from .mind-node top,
i.e. top: 32px with translate(-50%, -50%). */
.stepper-v20-branch {
position: absolute;
top: 40px;
left: 50%;
width: 240px;
height: 240px;
transform: translate(-50%, -50%);
pointer-events: none; /* let sub-nodes opt back in */
opacity: 0;
visibility: hidden;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0s linear 240ms;
z-index: 3; /* above strip ::before (z:0) + mn-icon (z:1) */
display: none; /* mobile fallback uses detail panel */
}
@media (min-width: 768px) {
.stepper-v20-branch { display: block; }
}
.mind-node.is-branch-open .stepper-v20-branch {
opacity: 1;
visibility: visible;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0s linear 0s;
}
/* SVG layer for dotted curves — sits BEHIND the parent circle so the
circle's white fill clips the inner path-start visually. Sub-nodes
float above the SVG via z-index. */
.stepper-v20-branch-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 0;
}
.stepper-v20-subnode { z-index: 2; }
/* Curve = dashed slate path — mirrors home page wheel `.map-link` verbatim
(index.html:1012-1026). Slate stroke (not purple), 6 6 dasharray, always
running continuous flow loop. No one-shot reveal — curves fade in via
opacity only when branch opens; the flow keeps running in background. */
.stepper-v20-curve {
fill: none;
stroke: #cbd5e1;
stroke-width: 1.25;
stroke-linecap: round;
stroke-dasharray: 6 6;
opacity: 0;
animation: stepper-curve-flow 4s linear infinite;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mind-node.is-branch-open .stepper-v20-curve {
opacity: 1;
}
@keyframes stepper-curve-flow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -24; } /* 2 dashes × (6+6) = 24 — one full tile, matches home page link-flow */
}
/* Per-curve stagger — opacity fade-in only (flow loop always runs) */
.mind-node.is-branch-open .stepper-v20-curve:nth-of-type(1) { transition-delay: 80ms; }
.mind-node.is-branch-open .stepper-v20-curve:nth-of-type(2) { transition-delay: 180ms; }
.mind-node.is-branch-open .stepper-v20-curve:nth-of-type(3) { transition-delay: 280ms; }
/* Sub-node — circle + label group, absolutely placed in the 200×200 space.
Gap bumped 8→10 for label breathing room. */
.stepper-v20-subnode {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transform: translate(-50%, -50%) translateY(6px);
opacity: 0;
transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: auto;
}
/* Round 4f collision fix — for sub-nodes ABOVE the parent, label sits ABOVE
the dot (column-reverse). Prevents collision between sub-label and the
parent's own mn-label sitting just below the parent circle. */
.stepper-v20-subnode.is-above {
flex-direction: column-reverse;
}
.mind-node.is-branch-open .stepper-v20-subnode {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.mind-node.is-branch-open .stepper-v20-subnode:nth-child(1) { transition-delay: 120ms, 120ms; }
.mind-node.is-branch-open .stepper-v20-subnode:nth-child(2) { transition-delay: 220ms, 220ms; }
.mind-node.is-branch-open .stepper-v20-subnode:nth-child(3) { transition-delay: 320ms, 320ms; }
/* Sub-circle — leaf-node verbatim port from home page methodology section.
44×44 hollow circle with 1.5px purple stroke, no fill, no inner dot.
Matches `index.html:1188-1194` `.mind-node.leaf-node .mn-icon` rule.
Round-4e: Liraz wanted home page leaf treatment verbatim. */
.stepper-v20-subnode-dot {
width: 44px;
height: 44px;
border-radius: 9999px;
border: 1.5px solid rgba(124, 58, 237, 0.5);
background: #ffffff;
color: #7c3aed;
display: flex;
align-items: center;
justify-content: center;
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Icon inside sub-circle — muted slate to match home page leaves' grayed treatment.
Round-4f: lucide icons (18px, 1.5 stroke) inside the 44×44 hollow circles. */
.stepper-v20-subnode-dot svg {
width: 18px;
height: 18px;
stroke-width: 1.5;
color: #94a3b8;
transition: color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-dot {
transform: scale(1.1);
border-color: #7c3aed;
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.1);
}
.mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-dot svg {
color: #7c3aed;
}
/* Sub-label — Inter 13px muted slate (verbatim from home page leaf-node:
`index.html:1194` `.mind-node.leaf-node .mn-label { font-size: 13px;
color: var(--text-muted) }`). Round-4e: color shifted from slate-900
to slate-500 to match home page muted hierarchy. */
.stepper-v20-subnode-label {
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
color: #64748b;
text-align: center;
text-transform: none;
white-space: normal;
max-width: 140px;
transition: color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-label {
color: #7c3aed;
}
/* === Per-step sub-node placement (200×200 local viewBox space) ===
Parent circle sits at (100, 100). Sub-nodes positioned with CSS
top/left in percentages so they scale with the viewBox.
Vertical fan: one above the parent, one or two below. */
/* Default (middle steps 02, 03, 04) — 3-child layouts fan above + below */
.mind-node .stepper-v20-subnode.is-above { top: 6%; left: 50%; }
.mind-node .stepper-v20-subnode.is-below-l { top: 90%; left: 22%; }
.mind-node .stepper-v20-subnode.is-below-r { top: 90%; left: 78%; }
/* Step 01 — 2-child, edge-aware (lean RIGHT to avoid left edge clipping) */
.mind-node[data-step="01"] .stepper-v20-subnode.is-above { top: 8%; left: 70%; }
.mind-node[data-step="01"] .stepper-v20-subnode.is-below-r { top: 90%; left: 70%; }
/* Step 05 — 2-child, edge-aware (lean LEFT to avoid right edge clipping) */
.mind-node[data-step="05"] .stepper-v20-subnode.is-above { top: 8%; left: 30%; }
.mind-node[data-step="05"] .stepper-v20-subnode.is-below-l { top: 90%; left: 30%; }
/* === Parent mn-icon visual cue when branch is open ===
Match the V4_similar aria-expanded glow + halt pulse — PLUS add a 6px
outer ring (rgba 0.08) to differentiate "branch open" from a plain
detail-panel open state. Mind-node's `[aria-expanded="true"]` rule
above owns the base 2-layer glow; this rule adds depth. */
.mind-node.is-branch-open .mn-icon {
background: #ffffff;
border-color: #7c3aed;
color: #7c3aed;
box-shadow: 0 0 25px rgba(124, 58, 237, 0.25),
inset 0 0 10px rgba(124, 58, 237, 0.06),
0 0 0 6px rgba(124, 58, 237, 0.08);
}
.mind-node.is-branch-open .mn-num,
.mind-node.is-branch-open .mn-label {
color: #7c3aed;
}
/* Reduced motion — kill all animations, keep static states.
Two entry points fire the same selectors:
1. `@media (prefers-reduced-motion: reduce)` — OS-level user preference (spec-standard).
2. `.stepper-v20-section.no-reveal-anim` — JS-toggled class set by `initStepperReducedMotionAndEsc()` at boot. Same effect, addressable for testing or future per-section overrides.
Both paths apply the same rule set below. */
@media (prefers-reduced-motion: reduce) {
.mn-icon { animation: none; }
.mind-node,
.mn-icon,
.mn-num,
.mn-label,
.stepper-v20-detail,
.stepper-v20-tip {
transition: none;
}
/* Branch reveal — instant, no stroke-dashoffset draw + kill continuous flow */
.stepper-v20-branch,
.stepper-v20-subnode,
.stepper-v20-curve,
.stepper-v20-subnode-dot {
transition: none;
}
.stepper-v20-curve {
stroke-dashoffset: 0;
opacity: 0.7;
animation: none;
}
.mind-node.is-branch-open .stepper-v20-curve {
transition-delay: 0s;
animation: none;
}
.mind-node.is-branch-open .stepper-v20-subnode {
transition-delay: 0s;
transform: translate(-50%, -50%);
}
}
/* Class-toggled mirror (JS path) — applies via `.stepper-v20-section.no-reveal-anim`
since the section keeps the dual class (`.stepper-v20-section .process`). */
.stepper-v20-section.no-reveal-anim .mn-icon { animation: none; }
.stepper-v20-section.no-reveal-anim .mind-node,
.stepper-v20-section.no-reveal-anim .mn-icon,
.stepper-v20-section.no-reveal-anim .mn-num,
.stepper-v20-section.no-reveal-anim .mn-label,
.stepper-v20-section.no-reveal-anim .stepper-v20-detail,
.stepper-v20-section.no-reveal-anim .stepper-v20-tip,
.stepper-v20-section.no-reveal-anim .stepper-v20-branch,
.stepper-v20-section.no-reveal-anim .stepper-v20-subnode,
.stepper-v20-section.no-reveal-anim .stepper-v20-curve,
.stepper-v20-section.no-reveal-anim .stepper-v20-subnode-dot {
transition: none;
}
.stepper-v20-section.no-reveal-anim .stepper-v20-curve {
stroke-dashoffset: 0;
opacity: 0.7;
animation: none;
}
.stepper-v20-section.no-reveal-anim .mind-node.is-branch-open .stepper-v20-curve {
transition-delay: 0s;
animation: none;
}
.stepper-v20-section.no-reveal-anim .mind-node.is-branch-open .stepper-v20-subnode {
transition-delay: 0s;
transform: translate(-50%, -50%);
}
/* === Mobile (<768px) fallback ===
Branch is hidden; rounds 1-3 detail panel remains the disclosure surface.
Already declared above via `display: none` default + md+ override. */
/* §7 Pilot Findings v20 CSS retired 2026-05-14 — section removed in commit 9087d37, all .pilot-v20-* rules deleted as orphans. */
/* Section: Challenge & Approach + Decisions (scroll-spy) — flat white (no hairline in v2) */
.ss-section {
background: #f8fafc; /* match body — unified slate-50 surface */
padding: 96px 16px; /* 2026-05-14: gutter moved from .ss-inner to section level so inner content aligns to x=64 anchor */
}
/* .ss-inner retired 2026-05-14 — replaced by .cs-wrap. */
.ss-grid {
display: none;
align-items: flex-start;
gap: 80px; /* 2026-05-14: was 64; bumped 16px to preserve phone position after .ss-inner padding removal */
position: relative;
}
.scroll-spy-left {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
padding-right: 40px;
flex: 1 1 0;
}
.scroll-spy-left.is-decisions {
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.fade-stack {
display: grid;
width: 100%;
}
.fade-stack > [data-fade-item] {
grid-column: 1 / 2;
grid-row: 1 / 2;
opacity: 0;
pointer-events: none;
z-index: 0;
transition: opacity 700ms ease-in-out;
}
.fade-stack > [data-fade-item].active {
opacity: 1;
pointer-events: auto;
z-index: 10;
}
.scroll-spy-right {
flex: 1 1 0;
display: flex;
flex-direction: column;
padding-top: 40px; /* matches source `pt-10` */
}
/* Source: min-h-[140vh] + items-start */
.scroll-spy-section {
min-height: 140vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
/* Overview/Challenge/Approach intro + Key Design Decisions — 100vh slot.
Phone centered at viewport y=50% at section entry, aligned with
sticky-centered text on left. Phone then scrolls naturally
(trainee-pattern).
Fix 2026-05-20 — slot reduced from 140vh→100vh because the 140vh slot
pushed the centered phone well below the sticky text heading at section
entry (heading at ~33% top, phone at ~43% top), so the §Challenge
heading appeared to land mid-viewport with a dead zone above instead
of anchoring next to its phone. Matches safe.html's intro pattern.
2026-05-20 follow-up — extended to [data-type="decision"] because
§Key Design Decisions exhibited the same heading-vs-phone offset on
the base 140vh rule. Mirrors safe.css combined selector. */
.scroll-spy-section[data-type="intro"],
.scroll-spy-section[data-type="decision"] {
align-items: center;
min-height: 100vh;
}
/* Anchor phone top edge to h2 top edge in intro sections (Challenge,
Approach). Measured at 1280x900: h2 top = 203px, centered phone top =
195px → phone is 8px ABOVE h2 with no shift. translateY(1vh) ≈ 9px
lands phone top within ±1px of h2 top, matching safe.css's -1.5vh mac
anchor pattern (just with opposite sign because phones are taller than
macs so their centered top sits closer to viewport top than h2).
Skipped on [data-type="decision"] — those use a column layout with the
"Key Design Decisions" h2 at the top of the sticky block and visually
anchor without a shift (Liraz confirmed). */
.scroll-spy-section[data-type="intro"] > .phone {
transform: translateY(1vh);
}
.ss-mobile {
display: block;
}
.ss-mobile-stack {
display: flex;
flex-direction: column;
gap: 128px;
}
.ss-mobile-item {
display: flex;
flex-direction: column;
gap: 32px;
}
.ss-mobile-item-phone {
display: flex;
justify-content: center;
}
.ds-mobile-flow {
display: flex;
justify-content: center;
width: 100%;
/* Reset min-height inherited from .scroll-spy-section (140vh) */
min-height: 0;
}
.ss-mobile-decisions-h2 {
margin: 0 0 40px 0;
}
/* Runway-frame heading colors */
.ss-h2 { color: var(--rw-ink); margin: 0 0 24px 0; }
.ss-h3 { color: var(--rw-ink); margin: 0 0 20px 0; }
.ss-h2-decisions { color: var(--rw-ink); margin: 0 0 40px 0; }
.ss-body { color: var(--rw-body); }
.ss-body p { margin: 0 0 16px 0; }
.ss-body p:last-child { margin-bottom: 0; }
.ss-body ul {
list-style: disc;
list-style-position: inside;
margin: 0;
padding: 0 0 0 8px;
}
.ss-body ul li { margin-bottom: 8px; }
.ss-body ul li:last-child { margin-bottom: 0; }
.ss-body-decisions p { margin: 0 0 16px 0; }
.ss-body-decisions p:last-child { margin-bottom: 0; }
/* Solution */
.solution-section {
padding: 96px 16px;
background: #ffffff;
overflow: hidden;
}
.solution-head {
max-width: 72rem;
margin: 0 auto 96px auto;
text-align: center;
}
.solution-eyebrow {
color: var(--rw-muted);
margin: 0 0 16px 0;
}
.solution-h2 {
color: var(--rw-ink);
margin: 0 0 24px 0;
}
.solution-lede {
color: var(--rw-body);
max-width: 48rem;
margin: 0 auto;
}
.solution-lede p { margin: 0 0 8px 0; }
.solution-lede p:last-child { margin-bottom: 0; }
.solution-row {
max-width: 64rem;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
.solution-label {
display: none;
flex-direction: column;
gap: 16px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
max-width: 200px;
}
.solution-label.is-left { left: 0; text-align: right; }
.solution-label.is-right { right: 0; text-align: left; }
.solution-label h4 {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--rw-ink);
margin: 0 0 8px 0;
}
.solution-label p {
color: var(--rw-body);
margin: 0;
}
.solution-label .dash {
position: absolute;
top: 24px;
border-top: 1px solid var(--rw-hair);
width: 48px;
}
.solution-label.is-left .dash { left: 100%; margin-left: 16px; }
.solution-label.is-right .dash { right: 100%; margin-right: 16px; }
/* Impact */
.impact-section {
padding: 96px 16px;
background: #ffffff;
}
.impact-wrap {
max-width: 56rem;
margin: 0 auto;
}
.impact-h2 {
color: var(--rw-ink);
margin: 0 0 32px 0;
}
.impact-body { color: var(--rw-body); }
.impact-body p { margin: 0 0 16px 0; }
.impact-body p:last-child { margin-bottom: 0; }
/* Project Details */
.details-section {
padding: 96px 16px;
background: #ffffff;
}
.details-wrap {
max-width: 56rem;
margin: 0 auto;
}
.details-h3 {
color: var(--rw-ink);
margin: 0 0 32px 0;
}
.details-body { color: var(--rw-body); }
.details-body p { margin: 0 0 12px 0; }
.details-body p:last-child { margin-bottom: 0; }
/* Section: §8 Impact & Outcomes (v20 — bullets + border-top + conclusion) */
.impact-v20-section {
padding: 96px 16px;
background: #f8fafc; /* match body — unified slate-50 surface */
}
/* .impact-v20-wrap retired 2026-05-14 — replaced by .cs-wrap. Width canonical in /tokens.css. */
.impact-v20-h2 {
color: #000000;
margin: 0 0 32px 0; /* mb-8 */
max-width: 44rem; /* reading measure within 72rem wrap, hugs left edge */
width: 100%;
}
.impact-v20-body {
color: #555555;
max-width: 44rem; /* reading measure */
width: 100%;
}
.impact-v20-list {
list-style: disc;
list-style-position: outside;
margin: 0 0 48px 20px; /* ml-5 + mb-12 */
padding: 0;
max-width: 44rem; /* bullets stay within reading measure */
}
.impact-v20-list li {
margin: 0;
padding-left: 4px;
}
.impact-v20-list li + li {
margin-top: 16px; /* space-y-4 */
}
.impact-v20-conclusion {
padding-top: 32px; /* pt-8 */
border-top: 1px solid #E5E5E5;
}
.impact-v20-conclusion p {
color: #000000;
font-size: 20px;
font-weight: 500;
line-height: 1.6; /* leading-relaxed */
margin: 0;
}
/* P1-5 §11 Impact eyebrow — match other top-level section eyebrows. */
.impact-v20-eyebrow {
display: block;
color: var(--text-muted);
margin: 0 0 var(--space-4) 0;
max-width: 44rem; /* hug left edge of 72rem wrap — grid align with §5/§6 */
width: 100%;
}
/* P0-1 §12 Project Details — missing CSS added.
Mirrors `.next-case-section` shape so eyebrows align horizontally. */
.project-details-section {
padding: var(--space-12) var(--space-4);
background: var(--bg-base);
}
/* .project-details-wrap retired 2026-05-14 — replaced by .cs-wrap. */
.project-details-eyebrow {
display: block;
color: var(--text-muted);
margin: 0 0 var(--space-4) 0;
max-width: 44rem; /* hug left edge of 72rem wrap */
width: 100%;
}
.project-details-h2 {
color: var(--text-main);
margin: 0 0 var(--space-5) 0;
max-width: 44rem;
width: 100%;
}
.project-details-body {
color: var(--text-muted);
max-width: 44rem; /* reading measure for narrative paragraphs */
width: 100%;
}
.details-body strong {
font-weight: 600;
color: var(--rw-ink);
}
/* ===== EDITORIAL SECTIONS (§5 structures-and-combinations, §6 wizard-to-inline).
Gemini reference layout. Locked 2026-05-13.
Section backgrounds killed; both sections sit on the page's default slate-50 surface.
Rhythm comes from air (padding-block: 96→160px), not surface chrome.
§5 = 2-col side-by-side (text left, diagram right) — `.editorial-section` default.
§6 = stacked single column (text on top, diagram full-width below) — `.editorial-section--alt` modifier.
Diagram is the visual hero — its own lavender bg breathes edge-to-edge (no frame). */
.editorial-section {
padding: 96px 16px; /* was clamp(96px, 14vw, 160px) — clamped to 160 at 1280, too large. Standardized 2026-05-14. */
background: transparent;
}
/* §5 wrap layout: .cs-wrap.cs-flow on mobile (stacked flex). Desktop overrides to 2-col grid.
.editorial-wrap base rule retired 2026-05-14 — replaced by .cs-wrap + .cs-flow in /tokens.css.
§6 also retired its alt-wrap gap overrides — §6 uses .cs-wrap (no .cs-flow), rhythm via margins. */
@media (min-width: 768px) {
.editorial-section:not(.editorial-section--alt) .cs-wrap {
display: grid;
grid-template-columns: minmax(0, 440px) minmax(0, 520px);
gap: clamp(48px, 6vw, 96px); /* min gap — space-between will grow it when wrap has extra width */
justify-content: space-between; /* §5 text at wrap-left, figure at wrap-right, gap absorbs extra space. 2026-05-14. */
align-items: center;
}
}
.editorial-text {
display: flex;
flex-direction: column;
}
.editorial-eyebrow {
display: block;
color: var(--text-muted);
margin: 0 0 16px 0;
}
.editorial-h2 {
color: #000000;
margin: 0 0 24px 0;
letter-spacing: -0.02em;
line-height: 1.18;
}
.editorial-figure {
width: 100%;
margin: 0;
display: flex;
justify-content: center;
}
/* No frame around the diagram. Let the lavender bg of the image itself breathe edge-to-edge. */
.editorial-figure img {
display: block;
max-width: 100%;
height: auto;
}
.editorial-body {
color: var(--text-muted);
text-align: left;
}
.editorial-body p {
margin: 0 0 16px 0;
line-height: 1.7;
}
.editorial-body p:last-child {
margin-bottom: 0;
}
.editorial-body strong {
color: var(--text-main); /* Slate 900 — Before/After labels gain emphasis without color */
font-weight: 600;
letter-spacing: -0.005em;
}
@media (min-width: 768px) {
.editorial-h2 {
/* font-size override removed 2026-05-13 — inherit from text-heading-md to match Approach/Challenge size */
margin-bottom: 24px; /* was 28 — off 8-grid. Liraz 2026-05-13. */
}
/* §6 stacked: text block stays flush-left within wrap, capped width for readable line-length. */
.editorial-section--alt .editorial-text {
max-width: 64rem;
}
/* §6 stacked figure: full-width within 72rem wrap, centered. */
.editorial-section--alt .editorial-figure img {
width: 100%;
}
}
/* §6 Shape Up editorial pattern — rhythm polish 2026-05-14 (ui-expert).
§6 uses .cs-wrap WITHOUT .cs-flow — no parent flex/gap to neutralize.
Rhythm owned by per-element margins, producing descending cadence:
12 → 24 → 48 → 32 → 16. One strong break at lede→figure (evidence enters). */
.editorial-section--alt .editorial-eyebrow,
.editorial-section--alt .editorial-h2,
.editorial-section--alt .editorial-lede,
.editorial-section--alt .editorial-beats {
max-width: 44rem;
width: 100%;
}
.editorial-section--alt .editorial-eyebrow {
margin: 0 0 var(--space-3) 0; /* 12 — label belongs TO the h2, tight */
}
.editorial-section--alt .editorial-h2 {
margin: 0 0 var(--space-5) 0; /* 24 — semantic break to lede */
text-wrap: balance; /* prevent widow on "Combinations: …" */
}
.editorial-lede {
font-size: 17px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 var(--space-8) 0; /* 48 — the ONE strong break: evidence enters */
}
.editorial-figure--framed {
display: block; /* override .editorial-figure flex */
width: 100%;
margin: 0 0 var(--space-6) 0; /* 32 — figure → beats */
padding: var(--space-3) 0; /* 12 vertical breathing inside the rules */
background: transparent; /* the strip is cited evidence, not a card */
border: 0;
border-top: 1px solid var(--line-color);
border-bottom: 1px solid var(--line-color);
border-radius: 0;
box-sizing: border-box;
}
.editorial-figure--framed img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.editorial-beats {
display: flex;
flex-direction: column;
gap: var(--space-6); /* 32 between Before↔After — paired, not separate */
margin: 0; /* gap to figure owned by figure margin-bottom */
}
.editorial-beat {
margin: 0;
}
.editorial-beat-label {
display: block;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-2) 0; /* 8 — label tight to body */
}
.editorial-beat-body {
font-size: 16px;
line-height: 1.6;
color: var(--text-main); /* body promoted to ink — labels carry the muted role */
margin: 0;
}
/* Visibility helpers */
.hide-mobile { display: none; }
.show-mobile-only { display: block; }
/* Responsive */
@media (min-width: 768px) {
.hero-phones { height: 600px; }
.hero-phone.is-left {
transform: translateX(-240px) rotate(-6deg);
}
.hero-phone.is-right {
transform: translateX(240px) rotate(6deg);
}
.hero-phones:hover .hero-phone.is-left {
transform: translateX(-160px) rotate(-3deg) scale(1.05);
}
.hero-phones:hover .hero-phone.is-right {
transform: translateX(160px) rotate(3deg) scale(1.05);
}
.hide-mobile { display: flex; }
.show-mobile-only { display: none; }
.ss-grid { display: flex; }
.ss-mobile { display: none; }
.solution-row {
flex-direction: row;
gap: 96px;
}
.solution-label { display: flex; }
}
/* ===== METADATA — ported verbatim from trainee_v26 (Liraz: "המטה דאטה ... אני רוצה שיחזור") ===== */
/* Shared mono label utility — single source of truth for mono caps eyebrows.
Ported because .metadata + .cs-num-header rely on it and v21.css did not define one. */
.label-mono{
font-family:var(--font-mono);
font-size:var(--text-xs);
font-weight:500;
text-transform:uppercase;
/* Home parity: 0.14em (matches index.html eyebrow tracking) */
letter-spacing:0.14em;
color:var(--text-muted);
font-variant-numeric:tabular-nums;
}
.label-mono--brand{color:var(--brand-solid);}
.label-mono--block{display:block;}
/* §2 METADATA — 4 columns, centered on page-grid (72rem max-width matches other sections) */
.metadata{
max-width:72rem; /* matches .ss-inner / hero / process-strip — Liraz 2026-05-12: "המטה דאטה לא ממורכז!!!!" */
margin:var(--space-7) auto 0;
padding:var(--space-7) clamp(16px, 5vw, 24px);
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-6);
border-top:1px solid var(--line-color);
border-bottom:1px solid var(--line-color);
}
.meta-cell{text-align:center;}
.meta-cell .label-mono{display:block;margin-bottom:var(--space-2);}
.meta-cell p{
margin:0;
font-size:var(--text-base);
color:var(--text-main);
line-height:1.5;
}
/* §X NUMBERED SECTION HEADERS — "01 / METADATA · Project facts"
Visual eyebrow above each top-level section. aria-hidden so
the existing h2 inside each section keeps semantic role. */
.cs-num-header{
display:flex;
align-items:baseline;
gap:var(--space-4);
margin-bottom:var(--space-7);
padding-top:var(--space-9);
}
.cs-num-header .cs-num{
font-family:var(--font-mono);
font-size:var(--text-sm);
font-weight:600;
color:var(--brand-solid);
letter-spacing:0.18em;
text-transform:uppercase;
font-variant-numeric:tabular-nums;
flex-shrink:0;
/* optical: mono uppercase needs slight nudge so the divider lands on baseline */
line-height:1;
}
.cs-num-header .cs-title-eyebrow{
font-family:var(--font-mono);
font-size:var(--text-sm);
font-weight:500;
/* sit between brand-solid and text-muted — eye anchors on the number first */
color:#475569; /* slate-600 — half-step between text-muted (#64748b) and text-main (#0f172a) */
letter-spacing:0.16em;
text-transform:uppercase;
line-height:1;
}
.cs-num-header::after{
content:"";
flex:1;
height:1px;
background:var(--line-color);
/* align hairline to text baseline (text sits on baseline, descenders below) */
transform:translateY(-0.32em);
}
/* Responsive — match trainee_v26 / home_v12 breakpoints */
@media (max-width:1023px){
.metadata{grid-template-columns:repeat(2,1fr);gap:var(--space-6);}
}
@media (max-width:767px){
.metadata{
grid-template-columns:1fr;
padding:var(--space-5) 0;
}
}
@media (max-width:480px){
/* Numbered section header — wrap eyebrow under the number on the
smallest phones so the mono caps don't crowd the hairline divider. */
.cs-num-header{
flex-wrap:wrap;
gap:var(--space-2) var(--space-3);
padding-top:var(--space-7);
margin-bottom:var(--space-5);
}
.cs-num-header::after{flex-basis:100%;order:99;transform:none;}
}
/* ===== HD-SPINE — home-DNA seed (V21).
One-of-a-kind signature; appears only between hero-phones and metadata.
Visual lineage:
· index.html:579-582 → scroll-bridge dashed line + flowing dots
· index.html:1066-1101 → pulse-ring-purple keyframe (dual-layer glow)
Design-MD-Library:
· DESIGN-nike.md §"Signature Components" (line 489) — earns weight by appearing once
· DESIGN-nike.md §"Decorative Depth" (line 377) — disc is semantic waypoint, not ornament
· DESIGN-nike.md §"Whitespace Philosophy" (line 364) — min 64-80px breathing room
· DESIGN-shopify.md §"Surface & Background" (line 33) — lavender behind, cards stay white
Liraz: "קטע קטן של הדיסק עם הקווים כאילו הוא רץ עליהם מהטלפון"
===== */
.hd-spine{
position:relative;
width:2px;
height:clamp(220px, 7vw, 300px);
margin:24px auto 0; /* tight bottom — disc lands just above metadata's hairline */
pointer-events:none;
}
.hd-spine-anchor{
position:absolute;
top:-10px; left:50%;
width:8px; height:8px; /* inverse-of-disc: smaller + hollow. Liraz: "קטן יותר ומעין ההיפוך שלו" */
background:#ffffff;
border:1.5px solid #7c3aed;
border-radius:50%;
transform:translateX(-50%);
/* no glow — solid filled disc is the "active" one; anchor is the empty starting point */
}
.hd-spine-line{
position:absolute;
top:0; left:50%;
width:1.5px;
height:100%;
transform:translateX(-50%);
background:repeating-linear-gradient(
to bottom,
#94a3b8 0, #94a3b8 6px, /* slate-400 — visible against the #f8fafc bg (was #cbd5e1 too faint) */
transparent 6px, transparent 12px
);
}
/* No flowing dots — Liraz 2026-05-12: "מנקודה אחת לשנייה" (anchor → disc, static). */
/* Disc — LOOK lifted from trainee_v22_editorial.html .case-spine .spine-dot (lines 281-296):
10px, brand-solid fill, dual-layer box-shadow (soft ring + outer glow).
BEHAVIOR: hidden on page load; travels top → bottom ONCE on first scroll, lands at bottom + stays.
Liraz 2026-05-12: "אני רוצה שזה יתנגן פעם אחת שהמתחלים לגולל" */
.hd-spine-disc{
position:absolute;
top:0; left:50%;
width:12px; height:12px; /* match anchor — Liraz: "העיצוב של הקטנה יותר נכון, צריך להחליף ביניהם" */
margin-left:-6px;
background:#7c3aed;
border-radius:50%;
/* same dual-layer glow as .hd-spine-anchor — they look identical, one static + one travels */
box-shadow:0 0 0 4px rgba(124, 58, 237, 0.12),
0 0 16px rgba(124, 58, 237, 0.4);
opacity:0; /* JS controls opacity based on scroll position */
will-change:transform, opacity;
}
/* Disc travel is driven by JS scroll listener (sets transform + opacity inline).
No CSS animation needed; @keyframes hd-spine-travel below kept as reference / fallback. */
@keyframes hd-spine-travel{
0% { transform:translateY(0);
opacity:0;
box-shadow:0 0 0 4px rgba(124, 58, 237, 0),
0 0 0 rgba(124, 58, 237, 0); }
12% { transform:translateY(10px);
opacity:1;
box-shadow:0 0 0 6px rgba(124, 58, 237, 0.12),
0 0 22px rgba(124, 58, 237, 0.5); }
50% { transform:translateY(calc((clamp(220px, 7vw, 300px) - 18px) * 0.5));
opacity:1;
box-shadow:0 0 0 10px rgba(124, 58, 237, 0.08),
0 0 28px rgba(124, 58, 237, 0.6); }
100% { transform:translateY(calc(clamp(220px, 7vw, 300px) - 18px));
opacity:1;
box-shadow:0 0 0 6px rgba(124, 58, 237, 0.12),
0 0 22px rgba(124, 58, 237, 0.5); }
}
@media (prefers-reduced-motion: reduce){
.hd-spine.is-traveling .hd-spine-disc{ animation:none; }
.hd-spine-disc{
top:auto; bottom:0;
opacity:1; /* no animation — show disc at destination immediately */
box-shadow:0 0 0 4px rgba(124, 58, 237, 0.12),
0 0 18px rgba(124, 58, 237, 0.5);
}
}
/* =====================================================================
§13 NEXT-CASE NAV — cross-link block.
2 cards, 50/50 split on desktop, stacked on mobile.
One active link to the next case-study + one disabled "Coming soon" card.
Reused on trainee.html (task #16) — same component, swapped contents.
Design DNA: hairline borders, purple `#7c3aed` accent on hover, no soft chrome.
===================================================================== */
.next-case-section {
padding: 96px 16px 96px; /* was clamp(72px, 10vw, 120px) top — capped at 96px 2026-05-14. */
background: #ffffff;
border-top: 1px solid var(--line-color);
}
/* Shrink pass 3: wrap narrowed 56rem → 48rem so each card is ~360px wide
on the 2-col layout, matching editorial body widths and reducing the section's
/* Auto-fit redesign (Task #20, Liraz 2026-05-13: "זה לא בשורה אחת"):
wrap widened to 80rem so 5 cards land in ONE row at 1280+ viewport
(~232px each with 16px gaps). Drops to 4 cols at ~1100px, 3 at ~830px, 2 at ~580px, 1 at <440px. */
/* .next-case-wrap retired 2026-05-14 — replaced by .cs-wrap.cs-wrap--grid. */
/* P0-4: unified eyebrow — bottom margin bumped 12 → 16 (var(--space-4)). */
.next-case-eyebrow {
display: block;
color: var(--text-muted);
margin: 0 0 var(--space-4) 0;
}
.next-case-h2 {
color: #0f172a;
margin: 0 0 48px 0;
letter-spacing: -0.02em;
line-height: 1.3;
font-size: 22px; /* 2026-05-14: shrunk from inherited text-heading-md (32px) — Liraz directive. */
font-weight: 500;
}
@media (min-width: 768px) {
.next-case-h2 { font-size: 24px; }
}
/* =====================================================================
§13 — CASE STUDIES ROW
Horizontal row of 3 home-style project-cards.
Source: index.html `.project-card` / `.bloom-card` / `.pj-scene` system,
ported here so case-study pages can show the same component without
linking the home stylesheet. Per-card hover (3D scene explode) preserved.
===================================================================== */
/* Vars not in /tokens.css — ported from index.html `:root` */
:root {
--visual-h: 320px;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Row container — 3 equal cols desktop, 1 col below 1024 (skip 2-col).
3 cards leave an orphan in 2-col, so collapse straight to single column. */
.case-studies-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
align-items: stretch;
}
@media (max-width: 1023px) {
.case-studies-row {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* === PROJECT CARD — shell (info+visual stacked vertically inside each col) === */
.case-studies-row .project-card {
background: var(--surface);
border: 1px solid var(--line-brand-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-card);
/* Override home's side-by-side flex — each col is ~360px wide so stack
info-above-visual inside every card. */
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: stretch;
text-decoration: none;
color: inherit;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.case-studies-row .project-card:hover {
box-shadow: var(--shadow-hover);
border-color: var(--line-brand-hover);
transform: translateY(-3px);
}
/* Per-card identity — border tint */
.case-studies-row .project-card.card-blue {
border-color: var(--line-blue-soft);
}
.case-studies-row .project-card.card-blue:hover {
border-color: var(--line-blue-hover);
}
.case-studies-row .project-card.card-peach {
border-color: var(--line-peach-soft);
}
.case-studies-row .project-card.card-peach:hover {
border-color: var(--line-peach-hover);
}
/* Per-card tints — drives the .project-visual::before radial backdrop */
.case-studies-row .bloom-card { --card-tint: rgba(124, 58, 237, 0.12); }
.case-studies-row .project-card.card-blue { --card-tint: rgba(59, 130, 246, 0.12); }
.case-studies-row .project-card.card-peach { --card-tint: rgba(249, 115, 22, 0.12); }
/* Info column (text side) */
.case-studies-row .project-info {
z-index: 10;
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.case-studies-row .project-info,
.case-studies-row .bloom-info-col {
flex: 1;
}
.case-studies-row .card-cta,
.case-studies-row .currently-viewing-pill {
margin-top: auto;
}
.case-studies-row .card-meta {
margin-top: auto;
margin-bottom: var(--space-4);
}
.case-studies-row .project-info h3 {
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
font-weight: 600;
margin: 0;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text-main);
}
.case-studies-row .project-info p {
font-size: var(--text-sm);
color: var(--text-muted);
margin: 0;
line-height: 1.6;
}
/* Bloom card internals — neutralize home's flex 2-col internal layout */
.case-studies-row .bloom-card {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: stretch;
}
.case-studies-row .bloom-info-col,
.case-studies-row .bloom-visual-col {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
}
.case-studies-row .bloom-visual-col {
flex: none;
}
/* Visual container — height bumped from 140/180 → 180/220 so wireframe
primitives (wf-header-bar 8px, wf-row 28px, wf-tile, wf-bubble) have
breathing room and don't get flex-squeezed to 0 height. */
.case-studies-row .project-visual {
flex: none;
width: 100%;
height: clamp(180px, 17vw, 220px);
background: var(--bg-base);
border-radius: var(--radius-md);
border: 1px solid var(--line-color);
position: relative;
perspective: 1800px;
direction: ltr;
overflow: hidden;
}
.case-studies-row .project-visual::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
var(--card-tint, rgba(124, 58, 237, 0.12)) 0%,
transparent 70%);
z-index: 0;
pointer-events: none;
}
/* === 3D SCENE === */
.case-studies-row .pj-scene {
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex; align-items: center; justify-content: center;
z-index: 1;
}
.case-studies-row .project-card:hover .pj-scene {
transform: rotateX(58deg) rotateZ(-35deg) scale(0.9);
}
.case-studies-row .pj-layer {
position: absolute; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
transform-style: preserve-3d;
transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .pj-layer.data {
opacity: 0;
transform: translateZ(-40px);
filter: blur(0.5px);
}
.case-studies-row .project-card:hover .pj-layer.data {
opacity: 1;
transform: translateZ(-60px);
filter: blur(0);
}
.case-studies-row .pj-layer.blueprint {
opacity: 0.55;
transform: translateZ(-10px);
}
.case-studies-row .project-card:hover .pj-layer.blueprint {
opacity: 1;
transform: translateZ(0px);
}
.case-studies-row .pj-layer.ui {
transform: translateZ(35px);
box-shadow: var(--shadow-card), 0 24px 60px -20px rgba(15, 23, 42, 0.22);
}
.case-studies-row .project-card:hover .pj-layer.ui {
transform: translateZ(60px);
}
/* ================================================================
FOOTER SYNERGYM CARD — real-screen cascade ported from home
#bloom-card-d (index.html ~L1679-1800). Every selector re-scoped
to .case-studies-row .synergym-card so NOTHING bleeds to the
sibling Leader (.card-blue) / SAFE (.card-peach) wf-* mini-cards
sharing this .case-studies-row / .pj-scene.
Internal composition (surface %, device sizes, overlap) copied
VERBATIM from home — the .cascade-stage uses home's intrinsic
513×352 box and is uniformly scaled 0.8 → 0.544, absolutely
centered, to fit the ~350×218 footer visual with air on all
sides, at rest AND through the .pj-scene Z-tilt swing.
Refs: DESIGN-RULES.md §Motion + §Cross-project consistency;
design-md-library/DESIGN-nike.md §Elevation & Depth;
DESIGN-shopify.md §Depth & Elevation. Product brand #5D5FEF
(NOT portfolio #7c3aed) per project_mockup-uses-product-brand. */
/* --- cascade stage + 3 overlapping surfaces (scale RE-TUNED for footer) --- */
.case-studies-row .synergym-card .cascade-stage {
/* MATCH home's intrinsic box exactly (513x352). The surface offsets
left:24% / right:0 are percentages of stage WIDTH while device sizes
are fixed px — so the stage width MUST equal home's 513px for the 3
devices to space identically. A 100% (~350px) footer stage spaced
them differently; pinning 513px makes the composition pixel-faithful
to home, then a single uniform scale shrinks the whole trio to fit. */
position: absolute;
left: 50%;
top: 50%;
width: 513px;
height: 352px;
isolation: isolate;
--cascade-top: 10.23%;
/* Center via absolute + translate(-50%,-50%) instead of flex: the 513px
stage overflows the ~350px footer .pj-layer, and flex justify-content
doesn't cleanly center a heavily-overflowing item (it sat 32px right).
Absolute centering is dead-center at ANY viewport (responsive footer),
and a fixed px translate would only be correct at one width. Then a
single uniform scale shrinks the whole trio (0.544 vs home's 0.8) to
fit with home-like margins — at rest AND through the .pj-scene Z-tilt.
Applies to the shared selector so .ui screens + .data sheets stay
aligned. */
transform: translate(-50%, -50%) scale(0.544);
transform-origin: center;
}
.case-studies-row .synergym-card .surface {
position: absolute;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .synergym-card .surface--trainee { top: var(--cascade-top); left: 0; z-index: 2; }
.case-studies-row .synergym-card .surface--tasks { top: var(--cascade-top); left: 24%; z-index: 1; }
.case-studies-row .synergym-card .surface--workout { top: 22.16%; right: 0; z-index: 3; }
/* ===== DEVICE: PHONE — "trainee" size 112x238 (inner 400x850) ===== */
.case-studies-row .synergym-card .phone { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .phone[data-phone-size="trainee"] { width: 112px; height: 238px; }
.case-studies-row .synergym-card .phone[data-phone-size="trainee"] .phone-frame {
transform: scale(calc(238 / 850));
transform-origin: top left;
width: 400px; height: 850px;
}
.case-studies-row .synergym-card .phone-frame {
position: absolute; top: 0; left: 0;
width: 400px; height: 850px;
border: 12px solid #0f172a;
background: #020617;
border-radius: 3.5rem;
overflow: hidden;
transform-origin: top left;
box-shadow:
0 0 0 4px rgba(255,255,255,0.10),
0 8px 16px -4px rgba(15,23,42,0.22),
0 64px 110px -36px rgba(15,23,42,0.34),
0 150px 210px -90px rgba(30,27,90,0.34);
}
.case-studies-row .synergym-card .phone-screen { position: relative; width: 100%; height: 100%; background: #020617; }
.case-studies-row .synergym-card .phone-notch {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
height: 28px; width: 33.3333%;
background: #0f172a;
border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
z-index: 100;
}
.case-studies-row .synergym-card .phone-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }
/* ===== DEVICE: MACBOOK — "sm" size 380x238 (inner 1440x900) ===== */
.case-studies-row .synergym-card .mac { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .mac[data-mac-size="sm"] { width: 380px; height: 238px; }
.case-studies-row .synergym-card .mac[data-mac-size="sm"] .macbook-frame {
transform: scale(calc(380 / 1440));
transform-origin: top left;
width: 1440px; height: 900px;
}
.case-studies-row .synergym-card .macbook-frame {
position: absolute; top: 0; left: 0;
width: 1440px; height: 900px;
background: #1e293b;
border: 1px solid #0f172a;
border-radius: 30px;
overflow: hidden;
transform-origin: top left;
box-shadow:
0 8px 20px -4px rgba(15,23,42,0.20),
0 90px 150px -50px rgba(15,23,42,0.38),
0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .synergym-card .macbook-bar {
position: absolute; top: 0; left: 0; right: 0; height: 52px;
background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .synergym-card .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .synergym-card .macbook-screen {
position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .synergym-card .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }
/* --- DATA layer: clean process motif (white sheets + dots + wires) --- */
.case-studies-row .synergym-card .dat-slot { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .dat-slot.phone-slot { width: 112px; height: 238px; }
.case-studies-row .synergym-card .dat-slot.mac-slot { width: 380px; height: 238px; }
/* white surface sheet — the real screen floats above it on the tilt */
.case-studies-row .synergym-card .dat-foot {
position: absolute; inset: 0;
background: #fbfbff;
border: 1px dashed rgba(93,95,239,0.55);
border-radius: 18px;
box-shadow: 0 10px 24px -16px rgba(30,27,90,0.30);
}
.case-studies-row .synergym-card .mac-slot .dat-foot { border-radius: 10px; }
/* small #5D5FEF accent dot, gentle tight halo */
.case-studies-row .synergym-card .dat-node {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 9px; height: 9px; border-radius: 50%;
background: linear-gradient(135deg,#5D5FEF 0%,#4338ca 100%);
box-shadow:
0 0 0 3px rgba(93,95,239,0.12),
0 0 7px 1px rgba(93,95,239,0.40);
}
/* dashed connector wires linking the 3 dots */
.case-studies-row .synergym-card .pj-layer.data .cascade-stage > svg.dat-wires {
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.case-studies-row .synergym-card .surface { transition: none; }
}
/* bp-label — code-tag */
.case-studies-row .bp-label {
position: absolute;
top: -12px; right: 12px;
background: #0f172a;
color: #a78bfa;
font-size: 10px;
padding: 4px 8px;
border-radius: 4px;
font-family: 'SFMono-Regular', monospace;
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
transform: translateY(10px);
z-index: 20;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* === BLOOM (Synergym) internals ===
Phone + dashboard chrome treatments scoped under .case-studies-row so the
home-page bloom card (index.html) is untouched. Goal: phones read as REAL
PHONES (narrow aspect, rounded corners, top notch), dashboard reads as a
REAL WINDOW (traffic-light title bar). */
.case-studies-row .bloom-container {
width: 88%; height: 78%;
position: relative;
display: flex; gap: var(--space-2);
align-items: center; justify-content: center;
}
.case-studies-row .bloom-mobile {
width: 24%; height: 96%;
border-radius: 14px;
position: relative;
z-index: 3;
}
.case-studies-row .bloom-dash {
width: 48%; height: 84%;
border-radius: 8px;
position: relative;
z-index: 2;
}
.case-studies-row .ui .bloom-mobile,
.case-studies-row .ui .bloom-dash {
background: white;
border: 1px solid var(--line-color);
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column;
}
.case-studies-row .ui .bloom-mobile {
padding: 12px 7px 7px;
gap: 5px;
}
.case-studies-row .ui .bloom-dash { padding: var(--space-2); gap: var(--space-2); flex-direction: row; }
.case-studies-row .blueprint .bloom-mobile,
.case-studies-row .blueprint .bloom-dash {
background: rgba(255,255,255,0.5);
border: 1px dashed var(--line-color);
backdrop-filter: blur(4px);
}
/* Phone notch */
.case-studies-row .ui .bloom-mobile::before {
content: "";
position: absolute;
top: 4px; left: 50%;
transform: translateX(-50%);
width: 26%; height: 4px;
background: #0f172a;
border-radius: 999px;
opacity: 0.85;
z-index: 4;
}
/* Dashboard window chrome — traffic-light title bar */
.case-studies-row .ui .bloom-dash {
position: relative;
padding-top: calc(var(--space-2) + 14px);
overflow: hidden;
}
.case-studies-row .ui .bloom-dash::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 16px;
border-bottom: 1px solid var(--line-color);
background-image:
radial-gradient(circle 2px at 8px 8px, #fbbf24 0 100%, transparent 0),
radial-gradient(circle 2px at 16px 8px, #34d399 0 100%, transparent 0),
radial-gradient(circle 2px at 0px 8px, #f87171 0 100%, transparent 0),
linear-gradient(to bottom, #fbfcfd 0%, #f5f7fa 100%);
background-position: 0 0, 0 0, 8px 0, 0 0;
background-repeat: no-repeat;
}
/* Per-surface accent tints — ALL surfaces share Synergym indigo (#5D5FEF).
Synergym is one product; Trainee · Workout · Tasks all carry the same
brand color. Peach belongs to safe, never to the umbrella. */
.case-studies-row .synergym-card .bloom-mobile[data-surface="workout"] .wf-row.is-active {
background: linear-gradient(135deg, rgba(93, 95, 239, 0.16) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
border-color: rgba(93, 95, 239, 0.26);
}
.case-studies-row .synergym-card .bloom-mobile[data-surface="workout"] .wf-row.is-active .wf-line {
background: linear-gradient(135deg, rgba(93, 95, 239, 0.45) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .synergym-card .bloom-dash[data-surface="tasks"] .wf-tile.is-active {
background: linear-gradient(135deg, rgba(93, 95, 239, 0.16) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
border-color: rgba(93, 95, 239, 0.26);
}
.case-studies-row .synergym-card .bloom-dash[data-surface="tasks"] .wf-tile.is-active .wf-line {
background: linear-gradient(135deg, rgba(93, 95, 239, 0.45) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .data .data-grid-box {
width: 100%; height: 100%;
position: relative;
display: flex; gap: var(--space-3);
align-items: center; justify-content: center;
}
.case-studies-row .data .d-node {
width: 10px; height: 10px;
background: var(--gradient-brand);
border-radius: 50%;
box-shadow: 0 0 10px var(--brand-solid);
position: absolute;
}
/* === LEADER (blue) layout === */
.case-studies-row .leader-layout {
width: 95%; height: 85%;
position: relative;
display: flex;
border-radius: var(--radius-sm);
}
.case-studies-row .l-sidebar {
width: 10%;
background: #f8fafc;
border-right: 1px solid var(--line-color);
display: flex; flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) 6px;
align-items: center;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.case-studies-row .l-list {
width: 30%;
background: white;
border-right: 1px solid var(--line-color);
display: flex; flex-direction: column;
padding: var(--space-2);
gap: var(--space-1);
}
.case-studies-row .l-main {
flex: 1;
background: white;
display: flex; flex-direction: column;
padding: var(--space-4);
gap: var(--space-3);
}
.case-studies-row .l-right {
width: 22%;
background: #f8fafc;
border-left: 1px solid var(--line-color);
padding: var(--space-3);
display: flex; flex-direction: column;
gap: var(--space-2);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.case-studies-row .ui .leader-layout {
background: white;
border: 1px solid var(--line-color);
box-shadow: var(--shadow-card);
}
.case-studies-row .blueprint .leader-layout {
background: rgba(255,255,255,0.5);
border: 1px dashed var(--line-color);
backdrop-filter: blur(4px);
}
.case-studies-row .blueprint .l-sidebar,
.case-studies-row .blueprint .l-list,
.case-studies-row .blueprint .l-main,
.case-studies-row .blueprint .l-right {
background: transparent;
border-color: var(--line-color);
border-style: dashed;
}
.case-studies-row .l-icon {
width: 16px; height: 16px;
background: var(--slate-soft);
border-radius: 4px;
}
.case-studies-row .l-icon.active { background: var(--text-main); }
/* === SAFE (peach) layout === */
.case-studies-row .safe-layout {
width: 90%; height: 80%;
display: flex;
padding: var(--space-4);
gap: var(--space-5);
border-radius: var(--radius-md);
}
.case-studies-row .s-upload {
flex: 1;
border-radius: var(--radius-sm);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--space-3);
}
.case-studies-row .s-chat {
flex: 1;
display: flex; flex-direction: column;
justify-content: flex-end;
gap: var(--space-3);
}
.case-studies-row .s-purple-box {
border-radius: var(--radius-md);
padding: var(--space-4);
}
.case-studies-row .s-input {
height: 32px;
border-radius: var(--radius-lg);
display: flex; align-items: center;
padding: 0 var(--space-3);
}
.case-studies-row .ui .safe-layout {
background: white;
border: 1px solid var(--line-color);
box-shadow: var(--shadow-card);
}
.case-studies-row .ui .s-upload {
border: 1px dashed var(--slate-soft);
background: #f8fafc;
}
.case-studies-row .ui .s-purple-box {
background: var(--accent-gray);
border: 1px solid var(--line-color);
box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06);
}
.case-studies-row .ui .s-input {
border: 1px solid var(--line-color);
background: white;
}
.case-studies-row .blueprint .safe-layout {
background: rgba(255,255,255,0.5);
border: 1px dashed var(--line-color);
backdrop-filter: blur(4px);
}
.case-studies-row .blueprint .s-upload,
.case-studies-row .blueprint .s-purple-box,
.case-studies-row .blueprint .s-input {
background: transparent;
border: 1px dashed var(--line-color);
}
/* === SAFE polish v2 — product-UI miniature (chrome + drop zone + chat affordances)
Mirrors the same block in /index.html and /case-study/safe.css. === */
.case-studies-row .ui .safe-layout {
position: relative;
padding-top: calc(var(--space-4) + 16px);
overflow: hidden;
}
.case-studies-row .ui .safe-layout::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 20px;
border-bottom: 1px solid var(--line-color);
background-image:
radial-gradient(circle 2.5px at 10px 10px, #fbbf24 0 100%, transparent 0),
radial-gradient(circle 2.5px at 20px 10px, #34d399 0 100%, transparent 0),
radial-gradient(circle 2.5px at 0px 10px, #f87171 0 100%, transparent 0),
linear-gradient(to bottom, #fbfcfd 0%, #f5f7fa 100%);
background-position: 0 0, 0 0, 10px 0, 0 0;
background-repeat: no-repeat;
}
.case-studies-row .ui .safe-layout::after {
content: "ASK";
position: absolute;
top: 4px; right: 8px;
font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
font-size: 7px;
font-weight: 600;
letter-spacing: 0.08em;
color: #c2410c;
background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(249,115,22,0.06));
border: 1px solid rgba(249,115,22,0.22);
padding: 1px 5px;
border-radius: 999px;
line-height: 1;
}
.case-studies-row .ui .safe-layout {
padding-left: var(--space-3);
padding-right: var(--space-3);
padding-bottom: var(--space-3);
gap: var(--space-3);
}
.case-studies-row .ui .s-upload {
flex: 0 0 38%;
position: relative;
background: repeating-linear-gradient(45deg, #fafbfc 0 5px, #f4f6f9 5px 10px);
border-radius: 8px;
gap: 6px;
}
.case-studies-row .ui .s-upload .wf-sq {
width: 26px; height: 30px;
background: #fff;
border: 1px solid var(--line-color);
border-radius: 4px;
position: relative;
box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
.case-studies-row .ui .s-upload .wf-sq::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 8px; height: 8px;
background: linear-gradient(225deg, var(--line-color) 50%, transparent 50%);
border-bottom-left-radius: 2px;
}
.case-studies-row .ui .s-upload .wf-sq::after {
content: "";
position: absolute;
left: 4px; right: 4px; bottom: 5px;
height: 8px;
background:
linear-gradient(to bottom, #e2e8f0 0 2px, transparent 2px 4px, #e2e8f0 4px 6px, transparent 6px 8px);
border-radius: 1px;
}
.case-studies-row .ui .s-chat {
flex: 1 1 auto;
justify-content: flex-start;
gap: 5px;
padding-top: 1px;
}
.case-studies-row .ui .s-chat .wf-bubble { padding: 5px 7px; min-width: 50%; }
.case-studies-row .ui .s-chat .wf-bubble--right { min-width: 55%; }
.case-studies-row .ui .s-chat .wf-bubble--left { min-width: 65%; }
.case-studies-row .ui .s-chat .wf-input {
position: relative;
height: 20px;
margin-top: auto;
background: #fff;
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(15,23,42,0.02);
}
.case-studies-row .ui .s-chat .wf-input::before {
content: "";
position: absolute;
left: 8px; top: 50%;
transform: translateY(-50%);
width: 38%; height: 3px;
background: var(--accent-gray);
border-radius: 2px;
}
.case-studies-row .ui .s-chat .wf-input::after {
content: "";
position: absolute;
right: 3px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(249,115,22,1) 0%, rgba(234,88,12,1) 100%);
box-shadow: 0 1px 3px rgba(234,88,12,0.4);
}
/* === WIREFRAME PRIMITIVES (wf-*) ===
`flex-shrink: 0` on every fixed-height primitive — otherwise inside the
compressed footer mobiles (~110px tall after padding) the wf-header-bar
/ wf-row / wf-chip collapse to 0 height and the mocks read as empty
outlined rectangles. */
.case-studies-row .wf-sq { width: 14px; height: 14px; background: var(--accent-gray); border-radius: 3px; flex-shrink: 0; }
.case-studies-row .wf-line { height: 4px; background: var(--accent-gray); border-radius: 2px; flex: 1; min-width: 0; }
.case-studies-row .wf-header-bar { height: 8px; background: var(--text-main); border-radius: 3px; width: 55%; margin-bottom: 4px; flex-shrink: 0; }
.case-studies-row .wf-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: white; border: 1px solid var(--line-color); border-radius: 6px; flex-shrink: 0; min-height: 18px; }
.case-studies-row .wf-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding-left: 6px; min-height: 0; }
.case-studies-row .wf-tile { background: white; border: 1px solid var(--line-color); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 0; }
.case-studies-row .wf-side { width: 22%; border-right: 1px dashed var(--line-color); flex-shrink: 0; }
.case-studies-row .wf-chip { height: 8px; background: var(--accent-gray); border-radius: 3px; margin-bottom: 4px; flex-shrink: 0; }
.case-studies-row .wf-bubble { background: white; border: 1px solid var(--line-color); border-radius: 6px; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; max-width: 75%; flex-shrink: 0; }
.case-studies-row .wf-bubble--right { align-self: flex-end; background: var(--accent-gray); }
.case-studies-row .wf-bubble--right .wf-line { background: rgba(255,255,255,0.6); }
.case-studies-row .wf-bubble--left { align-self: flex-start; }
.case-studies-row .wf-input { height: 12px; background: white; border: 1px solid var(--line-color); border-radius: 6px; margin-top: auto; flex-shrink: 0; }
/* Active tints (135deg gradient — purple / blue / peach) */
.case-studies-row .wf-row.is-active,
.case-studies-row .wf-tile.is-active {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
border-color: rgba(124, 58, 237, 0.22);
}
.case-studies-row .wf-row.is-active .wf-line,
.case-studies-row .wf-tile.is-active .wf-line {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .wf-row.is-active-blue {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
border-color: rgba(59, 130, 246, 0.22);
}
.case-studies-row .wf-row.is-active-blue .wf-line {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .wf-bubble.is-active-peach {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
border-color: rgba(249, 115, 22, 0.22);
max-width: 80%;
}
.case-studies-row .wf-bubble.is-active-peach .wf-line {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}
/* === CTA links (Leader + safe cards) === */
.case-studies-row .card-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
font-size: var(--text-sm);
font-weight: 600;
color: var(--brand-solid);
text-decoration: none;
align-self: flex-start;
transition: gap 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .card-cta:hover { gap: var(--space-3); color: var(--text-main); }
.case-studies-row .card-cta .arrow { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.case-studies-row .card-cta:hover .arrow { transform: translateX(2px); }
.case-studies-row .card-cta--blue { color: var(--blue-solid); }
.case-studies-row .card-cta--blue:hover { color: var(--text-main); }
.case-studies-row .card-cta--peach { color: var(--peach-solid); }
.case-studies-row .card-cta--peach:hover { color: var(--text-main); }
/* Indigo CTA — Synergym umbrella card on safe.html (View case study →). */
.case-studies-row .card-cta--indigo { color: #5D5FEF; }
.case-studies-row .card-cta--indigo:hover { color: #4338ca; }
.case-studies-row .card-cta--indigo .arrow { color: inherit; }
/* Meta caption above CTA — Synergym card on non-current pages. JetBrains Mono,
uppercased eyebrow treatment so it reads as metadata, not body copy. */
.case-studies-row .card-meta {
display: block;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--text-default);
margin-top: auto;
margin-bottom: 0;
line-height: 1.5;
}
.case-studies-row .card-meta-link {
color: #5D5FEF;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.case-studies-row .card-meta-link:hover,
.case-studies-row .card-meta-link:focus-visible {
color: #4338ca;
border-bottom-color: currentColor;
}
.case-studies-row .card-meta-link:focus-visible {
outline: none;
}
.case-studies-row .card-meta-arrow {
color: #5D5FEF;
margin-left: var(--space-2);
font-weight: 600;
}
/* === SYNERGYM "Currently viewing" pill — Synergym-indigo (#5D5FEF) === */
.case-studies-row .bloom-card.is-current {
/* subtle indigo accent border to mark the current case study */
border-color: #A5B4FC;
}
.case-studies-row .bloom-card.is-current:hover {
border-color: #A5B4FC;
transform: none;
}
.case-studies-row .currently-viewing-pill {
display: inline-flex;
align-items: center;
margin-top: var(--space-3);
padding: 3px 9px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(93, 95, 239, 0.14), rgba(93, 95, 239, 0.06));
color: #4338ca;
border: 1px solid rgba(93, 95, 239, 0.28);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
align-self: flex-start;
line-height: 1.2;
}
/* =====================================================================
§13 — SYNERGYM UMBRELLA CARD (3 equal cols, 2026-05-17 refactor)
Slot 1 is the umbrella card that surfaces 3 sub-pills
(Trainee · Workout Builder · Task Management). Slot 2/3 are
Leader.Codes / safe. Grid lives in the base `.case-studies-row` rule
above (`repeat(3, 1fr)` desktop → 1col below 1024); no double-wide
override anymore — Liraz brief: "3 equal boxes".
===================================================================== */
/* Umbrella card — slightly more presence + indigo accent. */
.case-studies-row .synergym-card {
--card-tint: rgba(93, 95, 239, 0.10);
border-color: rgba(93, 95, 239, 0.22);
}
.case-studies-row .synergym-card:hover {
border-color: rgba(93, 95, 239, 0.42);
}
.case-studies-row .synergym-card.is-current,
.case-studies-row .synergym-card.is-current:hover {
border-color: #A5B4FC;
}
/* Eyebrow above the H3 — "Sportstech Platform" mono cap label. */
.case-studies-row .synergym-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5D5FEF;
margin: 0 0 var(--space-2) 0;
}
/* Visual: row of 3 mini phones instead of single bloom-mobile. */
.case-studies-row .synergym-visual {
height: clamp(160px, 15vw, 200px);
}
.case-studies-row .synergym-trio {
width: 92%;
height: 82%;
display: flex;
gap: var(--space-3);
align-items: center;
justify-content: center;
}
.case-studies-row .synergym-trio .bloom-mobile {
flex: 1;
height: 100%;
max-width: 32%;
border-radius: var(--radius-md);
}
.case-studies-row .ui .syn-mini {
background: white;
border: 1px solid var(--line-color);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
padding: var(--space-2);
gap: 4px;
}
.case-studies-row .blueprint .synergym-trio .bp-box {
background: rgba(255, 255, 255, 0.5);
border: 1px dashed var(--line-color);
backdrop-filter: blur(4px);
}
.case-studies-row .synergym-card .data .d-node {
background: linear-gradient(135deg, #5D5FEF 0%, #0f172a 62%);
box-shadow: 0 0 10px rgba(93, 95, 239, 0.55);
}
/* Surfaces strip — sits below the visual inside the card. */
/* Indigo currently-viewing pill — Synergym umbrella card on trainee.html /
workout.html. Mirrors the peach pill structure (line height, padding,
border radius from `.currently-viewing-pill`) and only overrides the
color hue. No leading dot — per Liraz's locked spec (2026-05-17). */
.case-studies-row .currently-viewing-pill--indigo {
background: linear-gradient(135deg, rgba(93, 95, 239, 0.14), rgba(93, 95, 239, 0.06));
color: #4338ca;
border-color: rgba(93, 95, 239, 0.28);
}
.case-studies-row .case-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: var(--space-3);
}
.case-studies-row .case-nav .currently-viewing-pill {
margin-top: 0;
}
.case-studies-row .case-nav-sep {
color: var(--text-muted, #94a3b8);
font-size: 12px;
line-height: 1;
}
.case-studies-row .case-nav .card-meta-link {
font-size: 12px;
line-height: 1.2;
}
.case-studies-row .case-nav-item {
white-space: nowrap;
}
/* === Reduced-motion / hover-none neutralization === */
@media (hover: none) {
.case-studies-row .project-card:hover {
transform: none;
box-shadow: var(--shadow-card);
}
.case-studies-row .project-card:hover .pj-scene { transform: none; }
.case-studies-row .project-card:hover .pj-layer.data {
opacity: 0;
transform: translateZ(-40px);
filter: blur(0.5px);
}
.case-studies-row .project-card:hover .pj-layer.blueprint {
opacity: 0.55;
transform: translateZ(-10px);
}
.case-studies-row .project-card:hover .pj-layer.ui {
transform: translateZ(35px);
}
.case-studies-row .project-card.card-blue:hover { border-color: var(--line-blue-soft); }
.case-studies-row .project-card.card-peach:hover { border-color: var(--line-peach-soft); }
.case-studies-row .card-cta:hover {
gap: var(--space-2);
color: var(--brand-solid);
}
.case-studies-row .card-cta:hover .arrow { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.case-studies-row .project-card,
.case-studies-row .pj-scene,
.case-studies-row .pj-layer {
transition: none;
}
.case-studies-row .project-card:hover { transform: none; }
.case-studies-row .project-card:hover .pj-scene { transform: none; }
}
/* =====================================================================
WORKOUT BUILDER PHONE INTERNALS — vanilla port of wb_v20_final
(sketches/case-study/workout-builder/wb_v20_final, React+Tailwind).
Per `feedback_template-fidelity-combine-not-redesign.md`: every
`#5D5FEF`, dimension, transition preserved verbatim.
Scoped under `.wb-*` so it never affects portfolio frame / trainee
internals. Renders inside a 400×850 phone-screen viewport.
===================================================================== */
/* Shared root surface inside phone-screen */
.wb-app {
position:absolute;
inset:0;
background:#F4F6F9;
color:#1C1C1E;
font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
overflow:hidden;
display:flex;
flex-direction:column;
/* Inside dark phone-frame; the screen itself is light */
border-radius:inherit;
}
.wb-scroll {
flex:1;
overflow-y:auto;
-ms-overflow-style:none;
scrollbar-width:none;
padding-bottom:88px; /* room for floating CTA */
position:relative;
}
.wb-scroll::-webkit-scrollbar { display:none; }
/* ===== SESSION EDITOR (wb_v20_final renderSessionScreen, lines 423-568) ===== */
.wb-session__header {
display:flex;
align-items:center;
justify-content:space-between;
padding:42px 16px 10px; /* matches pt-12/pb-3/px-5 */
position:sticky;
top:0;
z-index:30;
background:rgba(244,246,249,0.95);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
.wb-session__header-left {
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.wb-icon-btn {
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9999px;
border:0;
background:transparent;
color:#1C1C1E;
cursor:pointer;
padding:0;
flex-shrink:0;
}
.wb-icon-btn svg { width:20px; height:20px; stroke-width:2.5; }
.wb-avatar {
width:36px;
height:36px;
border-radius:9999px;
object-fit:cover;
border:1px solid #E5E5EA;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
flex-shrink:0;
}
.wb-session__title {
display:flex;
flex-direction:column;
min-width:0;
}
.wb-session__title-h1 {
font-size:15px;
font-weight:700;
color:#1C1C1E;
letter-spacing:-0.01em;
line-height:1.15;
margin:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wb-session__title-sub {
font-size:12px;
font-weight:500;
color:#8E8E93;
line-height:1.15;
margin-top:2px;
}
.wb-session__header-right {
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}
.wb-round-btn {
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9999px;
background:#FFFFFF;
border:1px solid #E5E5EA;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
color:#1C1C1E;
cursor:pointer;
padding:0;
}
.wb-round-btn svg { width:14px; height:14px; }
.wb-save-btn {
background:#5D5FEF;
color:#FFFFFF;
padding:8px 16px;
border-radius:9999px;
border:0;
font-size:13px;
font-weight:700;
cursor:pointer;
box-shadow:0 4px 12px rgba(93,95,239,0.3);
transition:background-color 200ms ease;
}
.wb-save-btn:hover { background:#4a4cbf; }
/* Workout cover banner */
.wb-cover {
margin:10px 16px 0;
height:84px;
border-radius:16px;
position:relative;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
border:1px solid #E5E5EA;
/* Cover image: gym/workout silhouette via gradient + radial highlight (no remote img to keep it self-contained) */
background:
radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,0.16), transparent 55%),
linear-gradient(135deg, #1f2937 0%, #0f172a 60%, #111827 100%);
}
.wb-cover::after {
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.30);
}
.wb-cover__row {
position:absolute;
inset:0;
padding:0 14px;
display:flex;
align-items:center;
justify-content:space-between;
z-index:1;
}
.wb-cover__left {
display:flex;
align-items:center;
gap:6px;
}
.wb-cover__title {
color:#FFFFFF;
font-size:15px;
font-weight:600;
letter-spacing:0.02em;
margin:0;
}
.wb-cover svg { width:18px; height:18px; color:#FFFFFF; stroke-width:2.5; }
/* Stats bar */
.wb-stats {
margin:18px 22px 16px;
display:flex;
align-items:center;
justify-content:space-between;
}
.wb-stats__text {
font-size:12px;
color:#8E8E93;
font-weight:500;
letter-spacing:-0.01em;
}
.wb-stats__text strong {
color:#1C1C1E;
font-weight:700;
margin-right:10px;
}
.wb-stats__text strong:last-of-type { margin-right:0; }
.wb-stats__sort {
width:28px;
height:28px;
border-radius:9999px;
background:#FFFFFF;
border:1px solid #E5E5EA;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0;
cursor:pointer;
}
.wb-stats__sort svg { width:10px; height:10px; color:#1C1C1E; stroke-width:3; }
/* Section list */
.wb-sections {
padding:0 16px;
display:flex;
flex-direction:column;
gap:14px;
}
.wb-section-card {
background:#FAFAFA;
border-radius:24px;
box-shadow:0 4px 16px rgba(0,0,0,0.03);
border:1px solid #E5E5EA;
overflow:hidden;
}
.wb-section-card__head {
width:100%;
padding:14px 18px;
background:#FFFFFF;
display:flex;
align-items:center;
justify-content:space-between;
border:0;
cursor:pointer;
font-family:inherit;
}
.wb-section-card[data-open="true"] .wb-section-card__head {
border-bottom:1px solid #E5E5EA;
}
.wb-section-card__head-left {
display:flex;
align-items:center;
gap:10px;
}
.wb-section-card__head svg { width:18px; height:18px; color:#1C1C1E; stroke-width:2.5; }
.wb-section-card__title {
font-size:15px;
font-weight:600;
color:#1C1C1E;
letter-spacing:-0.01em;
}
.wb-section-card__body {
padding:14px;
display:flex;
flex-direction:column;
gap:12px;
}
.wb-section-card[data-open="false"] .wb-section-card__body { display:none; }
/* Exercise block (single + flow/superset) */
.wb-block {
background:#FFFFFF;
border-radius:18px;
border:1px solid #E5E5EA;
box-shadow:0 2px 8px rgba(0,0,0,0.02);
padding:12px;
position:relative;
}
.wb-block--flow {
/* The vertical purple connector that ties exercises into a superset */
border:1px solid #C7C8F9;
background:linear-gradient(180deg, #FFFFFF 0%, #F8F9FE 100%);
}
.wb-block__exercises {
display:flex;
flex-direction:column;
gap:10px;
position:relative;
}
/* The flow connector — vertical purple line between exercises */
.wb-block--flow .wb-block__exercises::before {
content:"";
position:absolute;
left:22px;
top:32px;
bottom:32px;
width:2px;
background:linear-gradient(180deg, #5D5FEF 0%, #A5B4FC 100%);
border-radius:1px;
z-index:0;
}
.wb-exercise {
display:flex;
align-items:center;
gap:10px;
position:relative;
z-index:1;
}
.wb-exercise__thumb {
width:44px;
height:44px;
border-radius:12px;
background:#F4F6F9;
border:1px solid #E5E5EA;
flex-shrink:0;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}
.wb-exercise__meta {
flex:1;
min-width:0;
}
.wb-exercise__name {
font-size:13px;
font-weight:600;
color:#1C1C1E;
letter-spacing:-0.01em;
line-height:1.2;
margin:0 0 2px 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wb-exercise__tags {
font-size:10px;
color:#8E8E93;
font-weight:500;
letter-spacing:-0.01em;
}
.wb-exercise__star {
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
color:#D1D1D6;
background:transparent;
border:0;
padding:0;
cursor:pointer;
}
.wb-exercise__star.is-starred { color:#5D5FEF; }
.wb-exercise__star.is-starred svg { fill:#5D5FEF; }
.wb-exercise__star svg { width:18px; height:18px; }
/* Set table */
.wb-set-table {
margin-top:10px;
border-top:1px solid #F0F0F0;
padding-top:10px;
}
.wb-set-row {
display:grid;
grid-template-columns:32px 1fr 1fr 1fr;
gap:6px;
align-items:center;
padding:4px 0;
}
.wb-set-row--head {
font-size:9px;
font-weight:600;
color:#8E8E93;
text-transform:uppercase;
letter-spacing:0.08em;
padding-bottom:4px;
border-bottom:1px solid #F0F0F0;
}
.wb-set-row--head + .wb-set-row { padding-top:6px; }
.wb-set-row__cell {
font-size:12px;
font-weight:600;
color:#1C1C1E;
text-align:center;
letter-spacing:-0.01em;
}
.wb-set-row__cell--num {
width:24px;
height:24px;
border-radius:8px;
background:#F0F1FF;
color:#5D5FEF;
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
}
.wb-add-set {
margin-top:8px;
width:100%;
padding:8px;
border-radius:10px;
background:#F0F1FF;
color:#5D5FEF;
border:0;
font-size:11px;
font-weight:600;
cursor:pointer;
transition:background-color 200ms ease;
font-family:inherit;
}
.wb-add-set:hover { background:#E0E2FF; }
/* Floating new-workout CTA */
.wb-fab-wrap {
position:absolute;
bottom:0;
left:0;
right:0;
padding:16px;
z-index:40;
pointer-events:none;
background:linear-gradient(0deg, #F4F6F9 0%, rgba(244,246,249,0.8) 60%, transparent 100%);
display:flex;
justify-content:flex-start;
}
.wb-fab {
pointer-events:auto;
padding:11px 18px;
background:#FFFFFF;
border:1px solid #E5E5EA;
color:#1C1C1E;
border-radius:9999px;
font-weight:700;
font-size:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
font-family:inherit;
}
/* ===== SELECT EXERCISES (wb_v20_final renderSelectScreen, lines 571-665) ===== */
.wb-select__header {
display:flex;
align-items:center;
justify-content:space-between;
padding:36px 20px 14px;
background:rgba(255,255,255,0.9);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
position:sticky;
top:0;
z-index:30;
border-bottom:1px solid rgba(229,229,234,0.5);
box-shadow:0 1px 3px rgba(0,0,0,0.02);
}
.wb-select__back {
color:#8E8E93;
background:transparent;
border:0;
font-size:13px;
font-weight:600;
cursor:pointer;
padding:0;
font-family:inherit;
}
.wb-select__back:hover { color:#1C1C1E; }
.wb-select__title {
font-size:15px;
font-weight:600;
color:#1C1C1E;
letter-spacing:-0.01em;
margin:0;
}
.wb-select__filter {
width:36px;
height:36px;
border-radius:9999px;
background:#F4F6F9;
border:1px solid #E5E5EA;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#1C1C1E;
}
.wb-select__filter svg { width:16px; height:16px; }
.wb-select__body {
padding:0 16px;
margin-top:18px;
}
/* Search bar */
.wb-search {
position:relative;
margin-bottom:18px;
}
.wb-search__icon {
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
width:16px;
height:16px;
color:#8E8E93;
pointer-events:none;
}
.wb-search__input {
width:100%;
background:#FFFFFF;
border:1px solid #E5E5EA;
box-shadow:0 4px 16px rgba(0,0,0,0.03);
border-radius:18px;
padding:13px 14px 13px 40px;
color:#1C1C1E;
font-size:13px;
font-weight:500;
box-sizing:border-box;
font-family:inherit;
outline:none;
transition:box-shadow 200ms ease;
}
.wb-search__input::placeholder { color:#8E8E93; }
.wb-search__input:focus {
box-shadow:0 0 0 3px rgba(93,95,239,0.18), 0 4px 16px rgba(0,0,0,0.03);
}
/* Segmented control */
.wb-segmented {
display:flex;
background:rgba(229,229,234,0.5);
padding:5px;
border-radius:14px;
margin-bottom:18px;
gap:0;
}
.wb-segmented__btn {
flex:1;
padding:7px 0;
border:0;
background:transparent;
color:#8E8E93;
font-size:11px;
font-weight:500;
border-radius:10px;
letter-spacing:-0.01em;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
font-family:inherit;
transition:background-color 200ms ease;
}
.wb-segmented__btn svg { width:12px; height:12px; }
.wb-segmented__btn.is-active {
background:#FFFFFF;
color:#1C1C1E;
font-weight:600;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.wb-section-label {
font-size:10px;
font-weight:600;
color:#8E8E93;
text-transform:uppercase;
letter-spacing:0.12em;
margin:0 0 12px 4px;
}
/* Exercise list */
.wb-list {
display:flex;
flex-direction:column;
gap:12px;
padding-bottom:8px;
}
.wb-list-item {
display:flex;
align-items:center;
justify-content:space-between;
padding:12px;
background:#FFFFFF;
border:1px solid #E5E5EA;
border-radius:22px;
box-shadow:0 8px 24px rgba(0,0,0,0.03);
cursor:pointer;
transition:box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.wb-list-item:hover {
box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.wb-list-item.is-selected {
border:2px solid #5D5FEF;
padding:11px; /* compensate the extra 1px border */
box-shadow:0 8px 24px rgba(93,95,239,0.12);
}
.wb-list-item__left {
display:flex;
align-items:center;
gap:12px;
min-width:0;
flex:1;
}
.wb-list-item__thumb {
width:44px;
height:44px;
border-radius:14px;
background:#F4F6F9;
border:1px solid #E5E5EA;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
overflow:hidden;
}
.wb-list-item__name {
font-size:13px;
font-weight:600;
color:#1C1C1E;
letter-spacing:-0.01em;
line-height:1.25;
margin:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wb-list-item__tags {
font-size:11px;
color:#8E8E93;
font-weight:500;
letter-spacing:-0.01em;
margin-top:2px;
text-transform:capitalize;
}
.wb-list-item__tags-sep {
margin:0 6px;
}
.wb-list-item__star {
width:24px;
height:24px;
color:#D1D1D6;
background:transparent;
border:0;
padding:0;
cursor:pointer;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.wb-list-item__star.is-on { color:#5D5FEF; }
.wb-list-item__star.is-on svg { fill:#5D5FEF; }
.wb-list-item__star svg { width:18px; height:18px; }
/* Floating action bar */
.wb-action-bar {
position:absolute;
bottom:0;
left:0;
right:0;
padding:18px 18px 24px;
z-index:20;
background:linear-gradient(0deg, #F4F6F9 0%, #F4F6F9 60%, transparent 100%);
display:flex;
gap:10px;
}
.wb-action-bar__btn {
flex:1;
padding:13px 0;
background:#FFFFFF;
border:1px solid #E5E5EA;
border-radius:16px;
font-weight:600;
font-size:12px;
color:#8E8E93;
box-shadow:0 4px 16px rgba(0,0,0,0.04);
cursor:not-allowed;
opacity:0.55;
font-family:inherit;
transition:opacity 200ms ease, background-color 200ms ease;
}
.wb-action-bar__btn.is-enabled {
color:#1C1C1E;
opacity:1;
cursor:pointer;
}
.wb-action-bar__btn.is-enabled:hover { background:#F8F9FE; }
.wb-action-bar__btn--primary {
background:#5D5FEF;
color:#FFFFFF;
border-color:#5D5FEF;
box-shadow:0 8px 24px rgba(93,95,239,0.32);
opacity:1;
cursor:pointer;
}
.wb-action-bar__btn--primary:hover { background:#4a4cbf; }
/* ============================================================
SECTION PADDING — responsive standardization (2026-05-14, Liraz "comfortable" pick)
Base (mobile <768): 64px each side → 128px between sections
Tablet (768-1023): 80px each side → 160px between sections
Desktop (≥1024): 96px each side → 192px between sections (base rule values already set above)
============================================================ */
@media (max-width: 767px) {
.hero,
.editorial-section,
.stepper-v20-section.process,
.impact-v20-section,
.project-details-section,
.ss-section,
.next-case-section {
padding-block: 64px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.hero,
.editorial-section,
.stepper-v20-section.process,
.impact-v20-section,
.project-details-section,
.ss-section,
.next-case-section {
padding-block: 80px;
}
}
/* === Mac mockup — ported from safe.css for hero iframe === */
.mac {
position: relative;
flex-shrink: 0;
}
.mac[data-mac-size="sm"] { width: 316.8px; height: 198px; }
.mac[data-mac-size="md"] { width: 604.8px; height: 378px; }
.mac[data-mac-size="lg"] { width: 720px; height: 450px; }
.mac:not([data-mac-size]) { width: 604.8px; height: 378px; }
.mac[data-mac-size="sm"] .macbook-frame { transform: scale(0.22); }
.mac[data-mac-size="md"] .macbook-frame { transform: scale(0.42); }
.mac[data-mac-size="lg"] .macbook-frame { transform: scale(0.50); }
.mac:not([data-mac-size]) .macbook-frame { transform: scale(0.42); }
@media (max-width: 767px) {
.mac[data-mac-size="sm"],
.mac[data-mac-size="md"],
.mac[data-mac-size="lg"],
.mac:not([data-mac-size]) { width: 316.8px; height: 198px; }
.mac[data-mac-size="sm"] .macbook-frame,
.mac[data-mac-size="md"] .macbook-frame,
.mac[data-mac-size="lg"] .macbook-frame,
.mac:not([data-mac-size]) .macbook-frame { transform: scale(0.22); }
}
.macbook-frame {
position: absolute;
top: 0;
left: 0;
width: 1440px;
height: 900px;
background: #F4F4F5;
border: 1px solid #E2E8F0;
border-radius: 14px;
overflow: hidden;
transform-origin: top left;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 30px 80px -32px rgba(15, 23, 42, 0.22);
}
.macbook-bar {
position: absolute;
top: 0; left: 0; right: 0;
height: 32px;
background: #F4F4F5;
border-bottom: 1px solid #E2E8F0;
display: flex;
align-items: center;
gap: 7px;
padding: 0 14px;
z-index: 100;
}
.macbook-bar i {
width: 12px;
height: 12px;
border-radius: 50%;
background: #d1d5db;
display: inline-block;
}
.macbook-bar i:nth-child(1) { background: #ff5f57; }
.macbook-bar i:nth-child(2) { background: #ffbd2e; }
.macbook-bar i:nth-child(3) { background: #28c840; }
.macbook-screen {
position: absolute;
top: 32px; /* below the title bar */
left: 0;
width: 100%;
height: calc(100% - 32px);
background: #FFFFFF;
}
/* Hero macs — single-Mac variant (3-Mac stacking rules dropped; we render one Mac, not three). */
.hero-macs {
position: relative;
height: 450px; /* matches actual hero-mac rendered height */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
@media (max-width: 767px) {
.hero-macs { height: 280px; }
}
/* Iframe inside any Mac (hero or body scroll-spy slots) — fills macbook-screen 1:1. */
.macbook-screen > iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
background: #fff;
}
/* Hero hero-mac: KEEP the macbook chrome (3 colored title-bar dots) visible,
mirroring leader.html's hero pattern. Leader.css L4362 strips chrome ONLY on
[data-type="decision"] slots, not on hero. Aspect mismatch (32px) addressed
by Part B inside new_task_v1.preview.html embed CSS — see iframe-aspect-mismatch.md. */
/* === Design Process: mobile responsive (375px scroll-snap) === */
.process-swipe-hint { display: none; }
@media (max-width: 480px) {
/* Tighter section rhythm — 128px is desktop-scale, too generous at 375 */
.stepper-v20-section.process {
padding: 72px 16px;
}
.stepper-v20-section .process-head {
margin: 0 0 32px 0;
}
/* Strip — scroll container, anchor for ::before */
.stepper-v20-section .process-strip {
position: relative;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
padding: 20px 16px; /* 20px vertical = headroom for pulse-ring shadow (15px) */
gap: 16px;
-webkit-overflow-scrolling: touch;
}
/* Disable strip-level connector at mobile — using per-card connectors instead
(strip's overflow:auto traps absolute children in scroll-space, not viewport) */
.stepper-v20-section .process-strip::before {
display: none;
}
/* Cards — fixed width, consistent height so labels of different line counts
don't make adjacent cards visually unbalanced */
.mind-node {
position: relative;
flex: 0 0 42%;
min-width: 0;
min-height: 124px;
scroll-snap-align: start;
}
/* Per-card connector — each card draws a segment from its icon center to the
NEXT card's icon center. Self-correcting at any card width / scroll position.
White icon fill of next card naturally masks the line end. */
.mind-node::after {
content: '';
position: absolute;
top: 28px;
left: 50%;
width: calc(100% + 16px);
height: 1px;
background: repeating-linear-gradient(to right,
#cbd5e1 0, #cbd5e1 6px,
transparent 6px, transparent 12px);
z-index: 0;
pointer-events: none;
}
.mind-node:last-child::after {
display: none;
}
/* Icon — same white fill / border as desktop, just smaller */
.mn-icon { width: 56px; height: 56px; }
/* Label — let it flow naturally. Wrapping allowed for long labels.
No min-height — that's what caused v1's "empty bottom" on 1-word labels */
.mn-label {
max-width: 100%;
font-size: 12px;
line-height: 1.3;
}
/* Swipe hint — present + readable, but tighter spacing than v1 */
.process-swipe-hint {
display: block;
text-align: center;
margin-top: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-muted);
text-transform: uppercase;
}
}
/* === Body Mac chrome strip — Phase J ===
Hero keeps the 3 colored title-bar dots (Leader/Safe convention).
Body scroll-spy Macs (intro + decision) strip the bar AND extend
macbook-screen to fill the full Mac. Mirrors leader.css L4361-4364
and safe.css L4404-4407 verbatim. Resolves:
(a) visual inconsistency vs Leader/Safe (3 dots only in hero)
(b) iframe aspect mismatch — without screen-extend, iframe area is
1440×868 but new_task_v1 React app designed for 1440×900 (32px
bottom clip). Extend to top:0/height:100% → 1440×900 fit. */
.scroll-spy-section[data-type="intro"] .macbook-bar,
.scroll-spy-section[data-type="decision"] .macbook-bar { display: none; }
.scroll-spy-section[data-type="intro"] .macbook-screen,
.scroll-spy-section[data-type="decision"] .macbook-screen { top: 0; height: 100%; }
/* === Editorial figure caption — small mono italic centered. Per Liraz 2026-05-25: the
"small caption of image name" she described for the 2 reference diagrams in §5+§6. === */
.editorial-figure figcaption {
margin-top: 16px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-style: italic;
font-size: 13px;
color: var(--text-muted, #6b7280);
text-align: center;
letter-spacing: 0.02em;
}
/* ================================================================
FOOTER LEADER.CODES MINI-CARD — real macbook + white-sheet data
layer. Mirrors the locked Leader HOME recipe: one real macbook
screen at rest; a white sheet + 3 blue dots + dashed wires reveal
BENEATH on the .pj-scene Z-tilt hover. NO blueprint / wireframe
layers, NO cursor-pin (footer is static).
Brand = blue #3b82f6 / var(--gradient-blue) / var(--blue-solid).
Ported verbatim from workout.css. */
/* Flex-center the scene + both layers (no .cascade-stage wrapper here,
so we center the .mac / .dat-slot directly inside their .pj-layer). */
.case-studies-row .card-blue .pj-scene { display: flex; align-items: center; justify-content: center; }
.case-studies-row .card-blue .pj-layer { display: flex; align-items: center; justify-content: center; }
/* Real macbook — 380×238 native (inner 1440×900), uniformly scaled
to fit the small footer card. */
.case-studies-row .card-blue .mac { position: relative; flex-shrink: 0; }
.case-studies-row .card-blue .mac[data-mac-size="sm"] { width: 380px; height: 238px; transform: scale(0.62); transform-origin: center center; }
.case-studies-row .card-blue .mac[data-mac-size="sm"] .macbook-frame {
transform: scale(calc(380 / 1440));
transform-origin: top left;
width: 1440px; height: 900px;
}
.case-studies-row .card-blue .macbook-frame {
position: absolute; top: 0; left: 0;
width: 1440px; height: 900px;
background: #1e293b;
border: 1px solid #0f172a;
border-radius: 30px;
overflow: hidden;
transform-origin: top left;
box-shadow:
0 8px 20px -4px rgba(15,23,42,0.20),
0 90px 150px -50px rgba(15,23,42,0.38),
0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .card-blue .macbook-bar {
position: absolute; top: 0; left: 0; right: 0; height: 52px;
background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .card-blue .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .card-blue .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .card-blue .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .card-blue .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .card-blue .macbook-screen {
position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .card-blue .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }
/* DATA layer (revealed beneath on tilt): white sheet + dashed wires +
3 blue dots — same footprint as the macbook, scaled to match. */
.case-studies-row .card-blue .dat-slot.leader-foot-slot {
position: relative; flex-shrink: 0;
width: 380px; height: 238px;
transform: scale(0.62); transform-origin: center center;
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .dat-foot {
position: absolute; inset: 0;
background: #fbfdff;
border: 1px dashed rgba(59,130,246,0.55);
border-radius: 10px;
box-shadow: 0 10px 24px -16px rgba(15,23,42,0.30);
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .dat-wires {
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .d-node {
position: absolute;
width: 9px; height: 9px; border-radius: 50%;
transform: translate(-50%, -50%);
}
/* ================================================================
FOOTER SAFE MINI-CARD — real macbook + white-sheet data layer.
Mirrors the Leader (.card-blue) footer recipe exactly: one real
macbook screen at rest; a white sheet + 3 peach dots + dashed wires
reveal BENEATH on the .pj-scene Z-tilt hover. NO blueprint /
wireframe layers, NO cursor-pin (footer is static).
Space-gray frame values stay IDENTICAL to Leader's (SAFE's frame
matches Leader's). Brand = peach #f97316 / var(--gradient-peach) /
var(--peach-solid) — only the data-layer accents differ.
Ported verbatim from workout.css. */
/* Flex-center the scene + both layers (no .cascade-stage wrapper here,
so we center the .mac / .dat-slot directly inside their .pj-layer). */
.case-studies-row .card-peach .pj-scene { display: flex; align-items: center; justify-content: center; }
.case-studies-row .card-peach .pj-layer { display: flex; align-items: center; justify-content: center; }
/* Real macbook — 380×238 native (inner 1440×900), uniformly scaled
to fit the small footer card. */
.case-studies-row .card-peach .mac { position: relative; flex-shrink: 0; }
.case-studies-row .card-peach .mac[data-mac-size="sm"] { width: 380px; height: 238px; transform: scale(0.62); transform-origin: center center; }
.case-studies-row .card-peach .mac[data-mac-size="sm"] .macbook-frame {
transform: scale(calc(380 / 1440));
transform-origin: top left;
width: 1440px; height: 900px;
}
.case-studies-row .card-peach .macbook-frame {
position: absolute; top: 0; left: 0;
width: 1440px; height: 900px;
background: #1e293b;
border: 1px solid #0f172a;
border-radius: 30px;
overflow: hidden;
transform-origin: top left;
box-shadow:
0 8px 20px -4px rgba(15,23,42,0.20),
0 90px 150px -50px rgba(15,23,42,0.38),
0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .card-peach .macbook-bar {
position: absolute; top: 0; left: 0; right: 0; height: 52px;
background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .card-peach .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .card-peach .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .card-peach .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .card-peach .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .card-peach .macbook-screen {
position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .card-peach .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }
/* DATA layer (revealed beneath on tilt): white sheet + dashed wires +
3 peach dots — same footprint as the macbook, scaled to match. */
.case-studies-row .card-peach .dat-slot.safe-foot-slot {
position: relative; flex-shrink: 0;
width: 380px; height: 238px;
transform: scale(0.62); transform-origin: center center;
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .dat-foot {
position: absolute; inset: 0;
background: #fbfdff;
border: 1px dashed rgba(249,115,22,0.30);
border-radius: 10px;
box-shadow: 0 10px 24px -16px rgba(15,23,42,0.30);
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .dat-wires {
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .d-node {
position: absolute;
width: 9px; height: 9px; border-radius: 50%;
transform: translate(-50%, -50%);
}