/* ═══════════════════════════════════════════════════════════ Emily Blackwell — Portfolio Design System Master Stylesheet ─────────────────────────────────────────────────────────── Grid: 4px base unit → --space-* tokens Type: rem throughout (base 16px browser default) ─────────────────────────────────────────────────────────── Sections: 1. Tokens (Custom Properties) 2. Reset & Base 3. Texture Overlay 4. Animations & Reveal 5. Custom Cursor 6. Progress Bar 7. Navigation 8. Layout — Homepage 9. Layout — Page (case study shell) 10. Hero — Homepage 11. Hero — Case Study 12. Buttons 13. Meta Strip 14. Section Structure 15. Prose 16. Callouts 17. Blockquote 18. Content List 19. Image Blocks & Grids 20. Persona Cards 21. Decision Cards 22. Phase Cards 23. Process Steps (timeline) 24. Principles Table 25. Status Pills 26. Color System Block 27. Two-Theme Split 28. Work Grid (homepage) 29. About Section (homepage) 30. Process Strip (homepage) 31. CTA Section (homepage) 32. Metrics Row 33. Feedback Cards 34. Reflection Grid 35. Closing Callout 36. Footer (homepage) 37. Footer Navigation (case studies) 38. Responsive Breakpoints ═══════════════════════════════════════════════════════════ Font import (add to every ): ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 1. TOKENS ═══════════════════════════════════════════════════════════ */ :root { /* ── 4px spacing scale ───────────────────────────────── * All spacing tokens are multiples of 4px expressed in rem. * Base: 1rem = 16px (browser default, never override). * * --space-1 = 4px = 0.25rem * --space-2 = 8px = 0.5rem * --space-3 = 12px = 0.75rem * --space-4 = 16px = 1rem * --space-5 = 20px = 1.25rem * --space-6 = 24px = 1.5rem * --space-7 = 28px = 1.75rem * --space-8 = 32px = 2rem * --space-10 = 40px = 2.5rem * --space-12 = 48px = 3rem * --space-14 = 56px = 3.5rem * --space-16 = 64px = 4rem * --space-18 = 72px = 4.5rem * --space-20 = 80px = 5rem * --space-24 = 96px = 6rem * --space-30 = 120px = 7.5rem * --space-35 = 140px = 8.75rem * ────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-18: 4.5rem; --space-20: 5rem; --space-24: 6rem; --space-30: 7.5rem; --space-35: 8.75rem; /* ── Border radius ── */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-full: 999px; /* ── Backgrounds ── */ --bg-base: #1a1a24; --bg-surface: #22222f; --bg-raised: #2a2a3a; /* ── Purple scale ── */ --purple-deep: #3d2f6e; --purple-mid: #5b3fa0; --purple-light: #a487d8; --purple-muted: #4a3880; --purple-tag: #b89de8; --purple-tag-bg: rgba(91,63,160,0.18); /* ── Text ── */ --text-primary: #f0ece4; --text-secondary: #c4bfb4; --text-tertiary: #9e9891; /* ── Borders ── */ --border-subtle: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14); /* ── Semantic status ── */ --status-warn-bg: rgba(220,170,60,0.12); --status-warn-text: #deb96a; --status-warn-border: rgba(220,170,60,0.25); --status-ok-bg: rgba(80,180,120,0.12); --status-ok-text: #76c99a; --status-ok-border: rgba(80,180,120,0.25); --status-info-bg: rgba(164,135,216,0.15); --status-info-text: #b89de8; --status-info-border: rgba(164,135,216,0.25); /* ── Destructive ── */ --destructive-bg: rgba(180,60,60,0.15); --destructive-text: #e8908a; --destructive-border: rgba(180,60,60,0.3); /* ── Typography ── */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; /* ── Easing ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ═══════════════════════════════════════════════════════════ 2. RESET & BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Do NOT set a custom font-size here — keep browser default (16px) so all rem values compute correctly. */ } body { background: var(--bg-base); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.9375rem; /* 15px */ line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; border-radius: var(--radius-sm); } .hero-img-wrap img { border-radius: 0; } /* ═══════════════════════════════════════════════════════════ 3. TEXTURE OVERLAY ═══════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.014) 0, rgba(255,255,255,0.014) 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, rgba(255,255,255,0.014) 0, rgba(255,255,255,0.014) 1px, transparent 0, transparent 50%); background-size: 1.25rem 1.25rem; /* 20px */ pointer-events: none; z-index: 0; } /* ═══════════════════════════════════════════════════════════ 4. ANIMATIONS & REVEAL ═══════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(1.625rem); } /* 26px */ to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { transform: scaleX(0); } to { transform: scaleX(1); } } 50% { transform: translateY(-0.5rem); } /* 8px */ } /* Scroll-triggered reveal — add .visible via JS IntersectionObserver */ .reveal { opacity: 1; transform: none; } .reveal.visible { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════ 5. CUSTOM CURSOR (homepage) ═══════════════════════════════════════════════════════════ */ /* 18px */ /* 52px */ /* ═══════════════════════════════════════════════════════════ 5. CUSTOM CURSOR ═══════════════════════════════════════════════════════════ */ /* SVG dot cursor: small purple filled circle */ body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23a487d8'/%3E%3C/svg%3E") 6 6, auto; } /* Pointer cursor: slightly larger ring for interactive elements */ a, button, [role="button"], .work-list-card, label, select, input[type="submit"], input[type="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23a487d8' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23a487d8'/%3E%3C/svg%3E") 12 12, pointer; } @media (pointer: coarse) { body, a, button, [role="button"], .work-list-card { cursor: auto; } } /* ═══════════════════════════════════════════════════════════ 6. PROGRESS BAR (case studies) ═══════════════════════════════════════════════════════════ */ .progress-bar { position: fixed; top: 3.375rem; /* 54px — matches .nav-sticky height */ left: 0; height: 2px; background: linear-gradient(90deg, var(--purple-mid), var(--purple-light)); z-index: 200; width: 0%; box-shadow: 0 0 0.5rem rgba(164,135,216,0.5); transition: width 0.08s linear; } /* ═══════════════════════════════════════════════════════════ 7. NAVIGATION ═══════════════════════════════════════════════════════════ */ /* Homepage nav — fixed, dark-tinted */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-12); /* 0 48px */ height: 3.75rem; /* 60px */ background: rgba(26,26,36,0.85); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); border-bottom: 1px solid var(--border-subtle); animation: fadeIn 0.6s var(--ease-out) both; } /* Case study nav — sticky, purple-tinted */ .nav.nav-sticky { position: sticky; background: rgba(61,47,110,0.95); backdrop-filter: blur(0.875rem); -webkit-backdrop-filter: blur(0.875rem); height: 3.375rem; /* 54px */ padding: 0 var(--space-10); /* 0 40px */ animation: none; } .nav-logo { font-family: var(--font-display); font-size: 1.0625rem; /* 17px */ font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .nav-logo span { font-weight: 400; font-style: italic; color: var(--purple-light); } /* Back link (case studies) */ .nav-back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.875rem; /* 14px */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); opacity: 0.75; transition: opacity 0.2s; } .nav-back:hover { opacity: 1; } .nav-back svg { flex-shrink: 0; } /* Homepage nav links */ .nav-links { display: flex; align-items: center; gap: var(--space-8); /* 32px */ list-style: none; } .nav-links a { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); transition: color 0.2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -0.1875rem; left: 0; /* -3px */ width: 0; height: 1px; background: var(--purple-light); transition: width 0.25s var(--ease-out); } .nav-links a:hover { color: var(--text-primary); } .nav-links a:hover::after { width: 100%; } /* Case study jump links */ .nav-jump { display: flex; gap: var(--space-6); /* 24px */ list-style: none; } .nav-jump a { font-family: var(--font-mono); font-size: 0.875rem; /* 14px */ letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-tertiary); transition: color 0.2s; } .nav-jump a:hover { color: var(--purple-tag); } /* "Say hello" pill CTA */ .nav-cta { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); border: 1px solid var(--border-strong); padding: var(--space-2) 1.125rem; /* 8px 18px */ border-radius: var(--radius-full); transition: border-color 0.2s, background 0.2s, color 0.2s; } .nav-cta:hover { border-color: var(--purple-light); background: var(--purple-tag-bg); color: var(--purple-tag); } /* ═══════════════════════════════════════════════════════════ 8. LAYOUT — HOMEPAGE ═══════════════════════════════════════════════════════════ */ .site-section { position: relative; z-index: 1; max-width: 68.75rem; /* 1100px */ margin: 0 auto; padding: var(--space-24) var(--space-12); /* 96px 48px */ } .section-eyebrow { display: flex; align-items: center; gap: var(--space-4); /* 16px */ margin-bottom: var(--space-12); } .section-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); letter-spacing: 0.1em; } .section-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); } .section-rule { flex: 1; height: 1px; background: var(--border-subtle); } /* ═══════════════════════════════════════════════════════════ 9. LAYOUT — PAGE SHELL (case studies) ═══════════════════════════════════════════════════════════ */ .page { position: relative; z-index: 1; max-width: 46.25rem; /* 740px */ margin: 0 auto; padding: 0 var(--space-7) var(--space-35); /* 0 28px 140px */ } /* ═══════════════════════════════════════════════════════════ 10. HERO — HOMEPAGE ═══════════════════════════════════════════════════════════ */ .hero-home { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding: var(--space-18) var(--space-12) var(--space-12); /* 72px 48px 48px */ max-width: 68.75rem; margin: 0 auto; } .hero-home::before { content: ''; position: absolute; top: 10%; left: -10%; width: 37.5rem; height: 37.5rem; /* 600px */ background: radial-gradient(circle, rgba(91,63,160,0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero-home .hero-content { position: relative; z-index: 1; } .hero-home .hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); /* 12px (snapped from 14px) */ margin-bottom: var(--space-8); animation: fadeUp 0.8s 0.1s var(--ease-out) both; } .hero-role { font-family: var(--font-mono); font-size: 0.875rem; /* 14px */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); } .hero-home .hero-title { font-family: var(--font-display); font-size: clamp(3.25rem, 8vw, 5.5rem); /* 52px → 88px */ font-weight: 900; color: var(--text-primary); line-height: 1.0; letter-spacing: -0.03em; margin-bottom: var(--space-3); /* 12px */ animation: fadeUp 0.85s 0.2s var(--ease-out) both; } .hero-home .hero-title em { font-style: italic; font-weight: 400; color: var(--text-secondary); } .hero-home .hero-subtitle { font-size: 1.125rem; /* 18px */ font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-12); animation: fadeUp 0.85s 0.3s var(--ease-out) both; } .hero-actions { display: flex; align-items: center; gap: var(--space-4); /* 16px */ animation: fadeUp 0.85s 0.4s var(--ease-out) both; } /* ═══════════════════════════════════════════════════════════ 11. HERO — CASE STUDY ═══════════════════════════════════════════════════════════ */ .hero { padding: 4.75rem 0 3.25rem; /* 76px 52px */ } .hero-eyebrow { display: none; } .hero-home .hero-eyebrow { display: flex; } .hero-title { font-family: var(--font-display); font-size: clamp(2.125rem, 5.5vw, 3.5rem); /* 34px → 56px */ font-weight: 900; color: var(--text-primary); line-height: 1.05; letter-spacing: -0.028em; margin-bottom: var(--space-5); /* 20px */ } .hero-sub { font-size: 1.0625rem; /* 17px */ font-weight: 300; color: var(--text-secondary); line-height: 1.75; margin-bottom: 2.75rem; /* 44px */ } .hero-img-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); margin-bottom: 3.25rem; /* 52px */ } /* ═══════════════════════════════════════════════════════════ 12. BUTTONS ═══════════════════════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); background: var(--purple-mid); padding: 0.625rem 1.375rem; /* 10px 22px */ border-radius: var(--radius-full); border: none; cursor: pointer; box-shadow: 0 0.125rem 1rem rgba(91,63,160,0.4); transition: background 0.2s, box-shadow 0.2s, transform 0.25s var(--ease-spring); } .btn-primary:hover { background: var(--purple-light); box-shadow: 0 0.25rem 1.75rem rgba(91,63,160,0.55); transform: translateY(-0.125rem); } .btn-outline, .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border-subtle); padding: 0.625rem 1.375rem; /* 10px 22px */ border-radius: var(--radius-full); background: transparent; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease-spring); } .btn-outline:hover, .btn-ghost:hover { border-color: var(--purple-light); color: var(--purple-light); transform: translateY(-0.125rem); } .btn-destructive { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--destructive-text); background: var(--destructive-bg); border: 1px solid var(--destructive-border); padding: 0.625rem 1.375rem; /* 10px 22px */ border-radius: var(--radius-full); cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .btn-destructive:hover { opacity: 0.85; transform: translateY(-0.0625rem); } /* ═══════════════════════════════════════════════════════════ 13. META STRIP ═══════════════════════════════════════════════════════════ */ .meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-12); } .meta-cell { background: var(--bg-surface); padding: var(--space-4) var(--space-4) var(--space-4); /* 16px (snapped from 18/18/16) */ } .meta-label { font-family: var(--font-mono); font-size: 0.875rem; /* 14px */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .meta-value { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } .meta-value strong { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-1); /* 4px (snapped from 3px) */ } /* ═══════════════════════════════════════════════════════════ 14. SECTION STRUCTURE (case studies) ═══════════════════════════════════════════════════════════ */ .section { margin-bottom: var(--space-20); /* 80px */ } .section-header { display: flex; align-items: center; gap: var(--space-3); /* 12px (snapped from 14px) */ margin-bottom: var(--space-8); /* 32px (snapped from 30px) */ padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); } .section-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); letter-spacing: 0.1em; flex-shrink: 0; } .section-title { font-family: var(--font-display); font-size: 1.625rem; /* 26px */ font-weight: 700; color: var(--text-primary); line-height: 1.2; } .divider { border: none; border-top: 1px solid var(--border-subtle); margin: 3.25rem 0; /* 52px */ } .sub-heading { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--text-primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.875rem; /* 14px */ } /* ═══════════════════════════════════════════════════════════ 15. PROSE ═══════════════════════════════════════════════════════════ */ .prose p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.125rem; /* 18px */ } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--text-primary); font-weight: 500; } /* ═══════════════════════════════════════════════════════════ 16. CALLOUTS ═══════════════════════════════════════════════════════════ */ .problem-callout { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-left: 3px solid var(--purple-mid); border-radius: var(--radius-md); padding: var(--space-7) var(--space-7) var(--space-6); /* 28px 28px 24px */ margin: var(--space-7) 0; } .problem-callout-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-3); } .problem-callout p { font-family: var(--font-display); font-size: 1.25rem; /* 20px */ font-weight: 400; color: var(--text-primary); line-height: 1.45; font-style: italic; } .concept-callout { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-left: 3px solid var(--purple-mid); border-radius: var(--radius-md); padding: var(--space-7) var(--space-7) 1.625rem; /* 28px 28px 26px */ margin: var(--space-7) 0; display: flex; gap: var(--space-5); align-items: flex-start; } .concept-icon { font-size: 1.75rem; /* 28px */ flex-shrink: 0; line-height: 1; margin-top: 0.125rem; } .concept-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .concept-body p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.75; } .concept-body p + p { margin-top: var(--space-2); } .closing-callout { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.25rem var(--space-8); /* 36px 32px */ margin: var(--space-8) 0; text-align: center; } .closing-callout p { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; font-style: italic; color: var(--text-primary); line-height: 1.5; max-width: 32.5rem; /* 520px */ margin: 0 auto; } /* ═══════════════════════════════════════════════════════════ 17. BLOCKQUOTE ═══════════════════════════════════════════════════════════ */ .quote { border-left: 3px solid var(--purple-muted); padding: 0.125rem 1.375rem; /* 2px 22px */ margin: var(--space-6) 0; } .quote p { font-size: 0.9375rem; font-weight: 700; font-style: normal; color: var(--text-primary); line-height: 1.75; margin-bottom: var(--space-2); } .quote p em, .quote p i { font-style: normal; font-weight: 700; } .quote cite { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-tertiary); font-style: normal; letter-spacing: 0.04em; } /* ═══════════════════════════════════════════════════════════ 18. CONTENT LIST ═══════════════════════════════════════════════════════════ */ .content-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); /* 8px (snapped from 10px) */ margin: var(--space-4) 0; } .content-list li { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; display: flex; gap: var(--space-3); align-items: flex-start; } .content-list li::before { content: '—'; color: var(--purple-light); flex-shrink: 0; font-family: var(--font-mono); font-size: 0.875rem; margin-top: 0.125rem; } .content-list li strong { color: var(--text-primary); font-weight: 500; display: block; margin-bottom: var(--space-1); } /* ═══════════════════════════════════════════════════════════ 19. IMAGE BLOCKS & GRIDS ═══════════════════════════════════════════════════════════ */ .image-block { margin: var(--space-7) 0; } .image-block img { width: 100%; border: 1px solid var(--border-subtle); } .image-caption { font-size: 0.875rem; color: var(--text-tertiary); font-style: italic; line-height: 1.55; margin-top: var(--space-2); /* 8px (snapped from 10px) */ padding: 0 var(--space-1); } /* 2-column */ .image-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); /* 8px (snapped from 10px) */ margin: var(--space-7) 0; } .image-grid-2 img { width: 100%; border: 1px solid var(--border-subtle); } /* 4-column */ .image-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-7) 0; } .image-grid-4 img { width: 100%; border: 1px solid var(--border-subtle); } /* Image placeholder */ .image-placeholder { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); height: 15rem; /* 240px */ display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════ 20. PERSONA CARDS ═══════════════════════════════════════════════════════════ */ .personas-grid, .persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin: var(--space-7) 0; } .persona-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--purple-muted); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .persona-thumb { width: 2.75rem; /* 44px */ height: 2.75rem; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-subtle); background: var(--bg-raised); } .persona-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .persona-avatar { width: 2.5rem; /* 40px */ height: 2.5rem; border-radius: 50%; background: var(--purple-deep); border: 1px solid var(--purple-muted); flex-shrink: 0; } .persona-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .persona-needs { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); /* 4px (snapped from 5px) */ } .persona-needs li { font-size: 0.875rem; color: var(--text-secondary); display: flex; gap: var(--space-2); /* 8px (snapped from 7px) */ line-height: 1.45; } .persona-needs li::before { content: '·'; color: var(--purple-light); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ 21. DECISION CARDS ═══════════════════════════════════════════════════════════ */ .decisions { display: flex; flex-direction: column; gap: var(--space-8); margin: var(--space-6) 0; } .decision-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .decision-head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 1.375rem var(--space-3); /* 16px→snapped 22px 12px→snapped */ border-bottom: 1px solid var(--border-subtle); } .decision-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); letter-spacing: 0.1em; flex-shrink: 0; } .decision-title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } .decision-body { display: grid; grid-template-columns: 1fr 1fr; } .decision-col { padding: var(--space-3) 1.375rem var(--space-4); /* 12px 22px 16px */ font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; } .decision-col:first-child { border-right: 1px solid var(--border-subtle); } .decision-sublabel { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-1); /* 4px (snapped from 6px) */ } .decision-img { padding: 0 1.375rem var(--space-5); /* 0 22px 20px */ } .decision-img img { border: 1px solid var(--border-subtle); } /* ═══════════════════════════════════════════════════════════ 22. PHASE CARDS ═══════════════════════════════════════════════════════════ */ .phases { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-6) 0; } .phase-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.375rem var(--space-5); /* 22px 20px */ } .phase-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .phase-title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-3); } .phase-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.4375rem; /* 7px — kept as-is, visually intentional */ } .phase-card ul li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; display: flex; gap: var(--space-2); } .phase-card ul li::before { content: '·'; color: var(--purple-light); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ 23. PROCESS STEPS (timeline) ═══════════════════════════════════════════════════════════ */ .process-steps-timeline { display: flex; flex-direction: column; gap: 0; margin: var(--space-6) 0; } .process-step { display: grid; grid-template-columns: 3.25rem 1fr; /* 52px */ gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-subtle); } .process-step:last-child { border-bottom: none; } .process-step-left { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 0.1875rem; } .process-step-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); flex-shrink: 0; } .process-step-line { width: 1px; flex: 1; background: var(--border-subtle); margin-top: var(--space-2); } .process-step:last-child .process-step-line { display: none; } .process-step-title { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); padding-top: 0.125rem; } .process-step-body { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; } .process-step-body p { margin-bottom: var(--space-3); } .process-step-body p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════ 24. PRINCIPLES TABLE ═══════════════════════════════════════════════════════════ */ .principles { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-6) 0; } .principle-row { background: var(--bg-surface); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; border-bottom: 1px solid var(--border-subtle); transition: background 0.2s; } .principle-row:last-child { border-bottom: none; } .principle-row:hover { background: var(--bg-raised); } .principle-title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); min-width: 13.75rem; /* 220px */ flex-shrink: 0; } .principle-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════ 25. STATUS PILLS (invitation lifecycle) ═══════════════════════════════════════════════════════════ */ .status-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-6) 0; } .status-row { display: flex; align-items: center; gap: var(--space-3); /* 12px (snapped from 14px) */ padding: 0.8125rem var(--space-5); /* 13px 20px */ background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); } .status-row:last-child { border-bottom: none; } .status-pill { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.09em; padding: 0.1875rem 0.6875rem; /* 3px 11px */ border-radius: var(--radius-full); flex-shrink: 0; min-width: 7.5rem; /* 120px */ text-align: center; } .status-pill.invite-needed { background: var(--status-info-bg); color: var(--status-info-text); border: 1px solid var(--status-info-border); } .status-pill.pending { background: var(--status-warn-bg); color: var(--status-warn-text); border: 1px solid var(--status-warn-border); } .status-pill.registered { background: var(--status-ok-bg); color: var(--status-ok-text); border: 1px solid var(--status-ok-border); } .status-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════ 26. COLOR SYSTEM BLOCK (fieldhouse case study) ═══════════════════════════════════════════════════════════ */ .color-system { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-6) 0; } .color-system-head { padding: var(--space-4) 1.375rem; /* 16px→snapped 22px */ border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .color-system-title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } .color-system-badge { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--status-ok-text); background: var(--status-ok-bg); border: 1px solid var(--status-ok-border); padding: 0.1875rem var(--space-2); /* 3px 8px */ border-radius: var(--radius-full); } .color-swatches { padding: var(--space-5) 1.375rem; /* 20px 22px */ display: flex; gap: var(--space-2); flex-wrap: wrap; } .swatch-group { display: flex; flex-direction: column; gap: var(--space-1); } .swatch-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.08em; color: var(--text-tertiary); text-align: center; } .swatch-row { display: flex; gap: var(--space-1); } .swatch { width: 1.75rem; /* 28px */ height: 1.75rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .color-system-note { padding: 0.875rem 1.375rem; /* 14px 22px */ border-top: 1px solid var(--border-subtle); font-size: 0.875rem; color: var(--text-tertiary); font-style: italic; line-height: 1.55; } /* ═══════════════════════════════════════════════════════════ 27. TWO-THEME SPLIT (fieldhouse case study) ═══════════════════════════════════════════════════════════ */ .theme-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-6) 0; } .theme-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.375rem var(--space-5); /* 22px 20px */ } .theme-card-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .theme-card-name { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); } .theme-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; } /* ═══════════════════════════════════════════════════════════ 29. ABOUT SECTION (homepage) ═══════════════════════════════════════════════════════════ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); /* 64px */ align-items: start; } .about-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.625rem); /* 28px → 42px */ font-weight: 700; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: var(--space-6); } .about-title em { font-style: italic; font-weight: 400; color: var(--purple-light); } .about-body { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-4); } .skills-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .skill-row { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem var(--space-5); /* 14px 20px */ background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); transition: background 0.2s; } .skill-row:last-child { border-bottom: none; } .skill-row:hover { background: var(--bg-raised); } .skill-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } .skill-tags { display: flex; gap: var(--space-1); /* 4px (snapped from 6px) */ } .skill-tag { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.08em; color: var(--text-tertiary); background: var(--bg-raised); border: 1px solid var(--border-subtle); padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); } /* ═══════════════════════════════════════════════════════════ 30. PROCESS STRIP (homepage) ═══════════════════════════════════════════════════════════ */ .process-strip { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 1; } .process-inner { max-width: 68.75rem; margin: 0 auto; padding: var(--space-18) var(--space-12); /* 72px 48px */ } .process-title { font-family: var(--font-display); font-size: clamp(1.625rem, 3vw, 2.25rem); /* 26px → 36px */ font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-12); max-width: 30rem; /* 480px */ } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .process-grid-step { background: var(--bg-base); padding: var(--space-7) var(--space-6); /* 28px 24px */ } .process-grid-step .step-num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); letter-spacing: 0.1em; margin-bottom: var(--space-4); } .process-grid-step .step-title { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ } .process-grid-step .step-desc { font-size: 0.875rem; color: var(--text-tertiary); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════ 31. CTA SECTION (homepage) ═══════════════════════════════════════════════════════════ */ .cta-section { text-align: center; position: relative; z-index: 1; padding: var(--space-30) var(--space-12); /* 120px 48px */ max-width: 68.75rem; margin: 0 auto; } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 31.25rem; height: 18.75rem; /* 500px 300px */ background: radial-gradient(ellipse, rgba(91,63,160,0.1) 0%, transparent 70%); pointer-events: none; z-index: 0; } .cta-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-5); position: relative; z-index: 1; } .cta-title { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); /* 36px → 60px */ font-weight: 900; color: var(--text-primary); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--space-5); position: relative; z-index: 1; } .cta-title em { font-style: italic; font-weight: 400; color: var(--text-tertiary); } .cta-sub { font-size: 1rem; /* 16px */ font-weight: 300; color: var(--text-secondary); line-height: 1.7; max-width: 27.5rem; /* 440px */ margin: 0 auto var(--space-10); position: relative; z-index: 1; } .cta-actions { display: flex; justify-content: center; gap: 0.875rem; /* 14px */ position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════ 32. METRICS ROW ═══════════════════════════════════════════════════════════ */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); /* 8px (snapped from 10px) */ margin: var(--space-7) 0; } .metric-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6) 1.125rem; /* 24px 18px */ text-align: center; } .metric-value { font-family: var(--font-display); font-size: 2rem; /* 32px */ font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: var(--space-2); } .metric-label { font-size: 0.875rem; color: var(--text-tertiary); line-height: 1.45; } /* ═══════════════════════════════════════════════════════════ 33. FEEDBACK CARDS ═══════════════════════════════════════════════════════════ */ .feedback-list { display: flex; flex-direction: column; gap: var(--space-2); /* 8px (snapped from 10px) */ margin: var(--space-6) 0; } .feedback-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5) 1.375rem; /* 20px 22px */ } .feedback-card.critical { border-left: 3px solid rgba(220,170,60,0.5); } .feedback-text { font-size: 0.875rem; color: var(--text-primary); line-height: 1.75; margin-bottom: var(--space-2); /* 8px (snapped from 10px) */ font-style: italic; } .feedback-text::before { content: '\201C'; } .feedback-text::after { content: '\201D'; } .feedback-attr { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.07em; color: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════ 34. REFLECTION GRID ═══════════════════════════════════════════════════════════ */ .reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); /* 8px (snapped from 10px) */ margin: var(--space-6) 0; } .reflection-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); /* 20px */ } .reflection-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: var(--space-3); } .reflection-card ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .reflection-card ul li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; display: flex; gap: var(--space-2); } .reflection-card ul li::before { content: '·'; color: var(--purple-light); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ 35. CLOSING CALLOUT (see § 16) ═══════════════════════════════════════════════════════════ */ /* Defined above alongside other callout variants. */ /* ═══════════════════════════════════════════════════════════ 36. FOOTER (homepage) ═══════════════════════════════════════════════════════════ */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-subtle); padding: var(--space-7) var(--space-12); /* 28px 48px */ display: flex; align-items: center; justify-content: space-between; max-width: 68.75rem; margin: 0 auto; } .footer-name { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); font-style: italic; } .footer-copy { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; color: var(--text-tertiary); } .footer-links { display: flex; gap: var(--space-6); list-style: none; } .footer-links a { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); transition: color 0.2s; } .footer-links a:hover { color: var(--purple-light); } /* ═══════════════════════════════════════════════════════════ 37. FOOTER NAVIGATION (case studies) ═══════════════════════════════════════════════════════════ */ .footer-nav { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); margin-top: var(--space-20); } /* ═══════════════════════════════════════════════════════════ 38. RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════════════ */ @media (max-width: 56.25rem) { /* 900px */ .about-grid { grid-template-columns: 1fr; gap: var(--space-10); } .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 48rem) { /* 768px */ .nav { padding: 0 var(--space-6); } .nav-links { display: none; } .nav.nav-sticky { padding: 0 var(--space-6); } .hero-home { padding: 6.25rem var(--space-6) 3.75rem; } /* 100px 24px 60px */ .site-section { padding: var(--space-16) var(--space-6); } .process-inner { padding: var(--space-14) var(--space-6); } .cta-section { padding: var(--space-20) var(--space-6); } .site-footer { flex-direction: column; gap: var(--space-4); text-align: center; padding: var(--space-7) var(--space-6); } } @media (max-width: 40rem) { /* 640px */ .nav-jump { display: none; } .page { padding: 0 var(--space-5) var(--space-20); } .meta-strip { grid-template-columns: 1fr 1fr; } .image-grid-2 { grid-template-columns: 1fr; } .image-grid-4 { grid-template-columns: 1fr 1fr; } .personas-grid, .persona-grid { grid-template-columns: 1fr; } .theme-split { grid-template-columns: 1fr; } .reflection-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr 1fr; } .decision-body { grid-template-columns: 1fr; } .decision-col:first-child { border-right: none; border-bottom: 1px solid var(--border-subtle); } .process-step { grid-template-columns: 2rem 1fr; gap: 0.875rem; } /* 32px 14px */ .principle-title { min-width: unset; } .principle-row { flex-direction: column; gap: var(--space-1); } .concept-callout { flex-direction: column; gap: var(--space-3); } .footer-nav { flex-direction: column; gap: var(--space-3); } } /* ═══════════════════════════════════════════════════════════ 39. RESUME LIST (about section, homepage) ═══════════════════════════════════════════════════════════ */ .resume-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .resume-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0.875rem var(--space-5); /* 14px 20px */ background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); transition: background 0.2s; } .resume-row:last-child { border-bottom: none; } .resume-row:hover { background: var(--bg-raised); } .resume-left { display: flex; flex-direction: column; gap: 0.1875rem; /* 3px */ min-width: 0; } .resume-role { font-size: 1rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resume-company { font-family: var(--font-mono); font-size: 0.875rem; /* 14px */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-light); } .resume-dates { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.06em; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; } @media (max-width: 40rem) { .resume-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); } .resume-dates { color: var(--text-tertiary); } .resume-role { white-space: normal; } } /* ── Page-specific overrides ── */ .work-page-hero { position: relative; z-index: 1; max-width: 68.75rem; margin: 0 auto; padding: var(--space-18) var(--space-12) var(--space-10); } .work-page-hero::before { content: ''; position: absolute; top: 0; right: -5%; width: 28rem; height: 28rem; background: radial-gradient(circle, rgba(91,63,160,0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } .work-page-eyebrow { display: none; } .work-page-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: var(--text-primary); line-height: 1.0; letter-spacing: -0.03em; margin-bottom: var(--space-5); animation: fadeUp 0.85s 0.2s var(--ease-out) both; position: relative; z-index: 1; } .work-page-title em { font-style: italic; font-weight: 400; color: var(--text-secondary); } .work-page-sub { font-size: 1.0625rem; font-weight: 300; color: var(--text-secondary); line-height: 1.7; animation: fadeUp 0.85s 0.3s var(--ease-out) both; position: relative; z-index: 1; } /* ── Filter bar ── */ .filter-bar { position: relative; z-index: 1; max-width: 68.75rem; margin: 0 auto; padding: 0 var(--space-12) var(--space-6); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; animation: fadeUp 0.85s 0.4s var(--ease-out) both; } .filter-btn { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); background: transparent; border: 1px solid var(--border-subtle); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .filter-btn:hover, .filter-btn.active { color: var(--purple-tag); background: var(--purple-tag-bg); border-color: rgba(184,157,232,0.3); } /* ── Work list ── */ .work-list-section { position: relative; z-index: 1; max-width: 68.75rem; margin: 0 auto; padding: 0 var(--space-12) var(--space-24); } /* ── Category label ── */ /* ── Work list cards (horizontal) ── */ .work-list { display: flex; flex-direction: column; gap: 4rem; } .site-section .work-list { margin-top: var(--space-10); } .work-list-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; transition: border-color 0.3s, transform 0.35s var(--ease-spring), box-shadow 0.3s; } .work-list-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(0,0,0,0.4); } .work-list-thumb { background: var(--bg-raised); height: 20rem; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; position: relative; overflow: hidden; flex-shrink: 0; } .work-list-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Shimmer on hover */ .work-list-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(164,135,216,0.07) 60%, transparent 70%); transform: translateX(-100%); transition: transform 0.55s var(--ease-out); } .work-list-card:hover .work-list-thumb::after { transform: translateX(100%); } .work-list-body { padding: var(--space-7) var(--space-8); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-3); border-top: 1px solid var(--border-subtle); } .work-list-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; letter-spacing: -0.02em; } .work-list-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; } .work-list-cta { display: none; } .work-list-meta { text-align: right; } .work-list-role { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: var(--space-1); } .work-list-year { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-tertiary); } .work-list-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-light); transition: gap 0.2s var(--ease-spring); margin-top: var(--space-2); } .work-list-card:hover .work-list-arrow { gap: var(--space-3); } /* ── Unavailable state ── */ /* ── Back to homepage strip ── */ .back-strip { position: relative; z-index: 1; max-width: 68.75rem; margin: 0 auto; padding: 0 var(--space-12) var(--space-20); display: flex; align-items: center; justify-content: space-between; } .back-strip-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .back-strip-text em { font-style: italic; font-weight: 400; color: var(--purple-light); } /* ── Responsive ── */ @media (max-width: 56.25rem) { .work-list-thumb { height: 16rem; } } @media (max-width: 48rem) { .work-page-hero { padding: 6rem var(--space-6) var(--space-12); } .filter-bar { padding: 0 var(--space-6) var(--space-8); } .work-list-section { padding: 0 var(--space-6) var(--space-16); } .back-strip { padding: 0 var(--space-6) var(--space-16); flex-direction: column; gap: var(--space-4); align-items: flex-start; } } @media (max-width: 40rem) { .work-list-thumb { height: 14rem; } .work-list-body { padding: var(--space-5) var(--space-5); } } /* ═══════════════════════════════════════════════════════════ CASE STUDY — STATUS PILLS (team-builder) ═══════════════════════════════════════════════════════════ */ .status-pill.pending { background: rgba(220,170,60,0.12); color: #deb96a; border: 1px solid rgba(220,170,60,0.25); } .status-pill.registered { background: rgba(80,180,120,0.12); color: #76c99a; border: 1px solid rgba(80,180,120,0.25); } /* ═══════════════════════════════════════════════════════════ CASE STUDY — FIELDHOUSE CONCEPT BLOCK ═══════════════════════════════════════════════════════════ */ .process-steps { display: flex; flex-direction: column; gap: 0; margin: 1.5rem 0; } /* ═══════════════════════════════════════════════════════════ CASE STUDY — CONTEXT CALLOUT (tournaments) ═══════════════════════════════════════════════════════════ */ .context-callout { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-left: 3px solid var(--purple-mid); border-radius: 0.75rem; padding: 1.75rem; margin: 1.75rem 0; display: flex; gap: 1.25rem; align-items: flex-start; } .context-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; margin-top: 0.125rem; } .context-callout-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 0.5rem; } .context-callout-body p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.75; } .context-callout-body p + p { margin-top: 0.5rem; } /* ═══════════════════════════════════════════════════════════ CASE STUDY — INSIGHT STRIP (tournaments) ═══════════════════════════════════════════════════════════ */ .insight-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 0.75rem; overflow: hidden; margin: 1.75rem 0; } .insight-cell { background: var(--bg-surface); padding: 1.25rem 1.25rem 1rem; } .insight-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 0.375rem; } .insight-label { font-size: 0.875rem; color: var(--text-tertiary); line-height: 1.4; } /* ═══════════════════════════════════════════════════════════ CASE STUDY — PERSONA ROLE ═══════════════════════════════════════════════════════════ */ .persona-role { font-family: var(--font-mono); font-size: 0.875rem; color: var(--purple-light); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.875rem; }