/* ============================================================================= styles.css — Single stylesheet for the Nick Knapp portfolio ============================================================================= Scope conventions (applied via classes on ): .page-index landing page .page-cs any case-study page .palette-cyan cyan-forward holographic palette (index, IC) .palette-pink pink-forward holographic palette (SmileMD) Selectors that are unique to a single page (e.g. .slab on the landing page, .empathy-map on SmileMD) are left unscoped — the page-specific markup is enough isolation. Scoping is only applied where a selector appears on multiple pages with different values, or where palette-driven accents need to swap. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Base tokens + typography reset --------------------------------------------------------------------------- */ :root { --bg-0: #05060d; --bg-1: #0a0d1a; /* Ink ramp — contrast-tuned so body copy clears WCAG AA on the dark bg. */ --ink-0: #f8f9ff; --ink-1: #e8ebff; --ink-2: #b4b8d5; /* Accents — swapped together as a palette via body class. */ --accent-cyan: #4ee8ff; --accent-purple: #9b6bff; --accent-pink: #ff6bd6; --accent-blue: #3d7bff; /* Chase-adjacent lead, tuned for dark bg contrast */ /* Default holographic gradient is cyan-forward (landing + IC). */ --holo: linear-gradient(120deg, #4ee8ff 0%, #9b6bff 45%, #ff6bd6 100%); --holo-warm: linear-gradient(120deg, #ff6bd6 0%, #9b6bff 100%); /* Glass surfaces used throughout. */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink-0); font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ----------------------------------------------------------------------------- 2. Palette variants --------------------------------------------------------------------------- */ /* Cyan-forward ambient wash (default). */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 800px at 15% 10%, rgba(78, 232, 255, 0.10), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(255, 107, 214, 0.10), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(155, 107, 255, 0.08), transparent 70%); pointer-events: none; z-index: 0; } /* Pink-forward palette for SmileMD. */ body.palette-pink { --holo: linear-gradient(120deg, #ff6bd6 0%, #9b6bff 50%, #4ee8ff 100%); } body.palette-pink::before { background: radial-gradient(1200px 800px at 15% 10%, rgba(255, 107, 214, 0.12), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(78, 232, 255, 0.10), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(155, 107, 255, 0.08), transparent 70%); } /* Blue-forward palette for Chase Locator. Blue → cyan → violet sweep keeps pink reserved for SmileMD. */ body.palette-blue { --holo: linear-gradient(120deg, #3d7bff 0%, #4ee8ff 50%, #9b6bff 100%); } body.palette-blue::before { background: radial-gradient(1200px 800px at 15% 10%, rgba(61, 123, 255, 0.14), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(78, 232, 255, 0.10), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(155, 107, 255, 0.08), transparent 70%); } /* ----------------------------------------------------------------------------- 3. Three.js canvas + stacking --------------------------------------------------------------------------- */ #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .layer { position: relative; z-index: 2; } /* ----------------------------------------------------------------------------- 4. Top navigation (shared shell, per-page tuning) --------------------------------------------------------------------------- */ .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.25rem 0; background: linear-gradient( to bottom, rgba(5, 6, 13, 0.78), rgba(5, 6, 13, 0) ); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.page-cs .nav-wrap { padding: 1.1rem 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; } .brand { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-1); display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } body.page-cs .brand { font-size: 0.78rem; letter-spacing: 0.22em; } .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--holo); box-shadow: 0 0 12px rgba(78, 232, 255, 0.8); animation: pulse 2.2s ease-in-out infinite; } body.palette-pink .brand .dot { box-shadow: 0 0 12px rgba(255, 107, 214, 0.8); } body.palette-blue .brand .dot { box-shadow: 0 0 12px rgba(61, 123, 255, 0.85); } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } /* Landing-page only: top-right nav links. */ .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { color: var(--ink-1); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: color 0.25s ease; } .nav-links a:hover { color: var(--ink-0); } /* Active page indicator — used on case-study pages to mark the "Work" link as the active section, replacing the breadcrumb that used to live here. Holographic underline echoes the brand mark's chromatic accent so the cue feels native to the design language. */ .nav-links a[aria-current="page"] { color: var(--ink-0); position: relative; } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--holo); opacity: 0.85; } /* Case-study only: breadcrumb in the top bar. */ .breadcrumb-strip { display: flex; align-items: center; gap: 0.6rem; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); } .breadcrumb-strip a { color: var(--ink-1); text-decoration: none; } .breadcrumb-strip a:hover { color: var(--ink-0); } .breadcrumb-strip .sep { color: var(--ink-2); opacity: 0.55; } /* ----------------------------------------------------------------------------- 5. Section rail (case-study right-side nav) --------------------------------------------------------------------------- */ .section-rail { position: fixed; top: 50%; right: 1.75rem; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 1rem; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; /* Soft glass container around the rail. */ padding: 1.1rem 1.25rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .section-rail a { color: var(--ink-2); text-decoration: none; display: flex; align-items: center; gap: 0.75rem; transition: color 0.25s ease; } .section-rail a::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.4; transition: width 0.25s ease, opacity 0.25s ease; } .section-rail a:hover, .section-rail a.active { color: var(--ink-0); } .section-rail a.active::before { width: 40px; opacity: 1; background: var(--holo); } @media (max-width: 1100px) { .section-rail { display: none; } } /* ----------------------------------------------------------------------------- 6. Mark / highlight reset (kill Bootstrap's yellow default) --------------------------------------------------------------------------- */ mark, .mark { background-color: transparent; padding: 0; color: inherit; } /* ----------------------------------------------------------------------------- 7. Primary CTA pill (shared across all pages) --------------------------------------------------------------------------- */ .cta { position: relative; display: inline-flex; align-items: center; gap: 0.9rem; padding: 1rem 2rem 1rem 2.25rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; color: var(--ink-0); text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease; cursor: pointer; } .cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--holo); opacity: 0; z-index: -1; transition: opacity 0.35s ease; } .cta::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.65; pointer-events: none; } .cta:hover { transform: translateY(-2px); color: #05060d; } .cta:hover::before { opacity: 1; } .cta .arrow { display: inline-block; width: 28px; height: 10px; position: relative; transition: transform 0.3s ease; } .cta .arrow::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: currentColor; transform: translateY(-50%); } .cta .arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); } .cta:hover .arrow { transform: translateX(5px); } /* ----------------------------------------------------------------------------- 8. Footer bar (shared) --------------------------------------------------------------------------- */ .footer-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 2.5rem; border-top: 1px solid var(--glass-border); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); flex-wrap: wrap; gap: 1rem; } body.page-cs .footer-bar { margin-top: 3.5rem; } /* ============================================================================= LANDING PAGE (body.page-index) ============================================================================= */ /* --- Hero --- */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 8rem 1.5rem; text-align: center; position: relative; perspective: 1400px; } .hero > .container { position: relative; z-index: 2; } .hero-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; color: var(--ink-2); text-transform: uppercase; margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; } .hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--ink-2), transparent); } .hero-title { font-weight: 500; font-size: clamp(3rem, 9vw, 8.5rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 1.5rem; transform-style: preserve-3d; } .hero-title .holo { background: var(--holo); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: holoShift 9s ease-in-out infinite; display: inline-block; } @keyframes holoShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-sub { font-size: clamp(1.1rem, 2vw, 1.45rem); max-width: 720px; margin: 0 auto 2.75rem; color: var(--ink-1); font-weight: 400; line-height: 1.55; } .hero-sub strong { color: var(--ink-0); font-weight: 500; } .hero-sub .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-meta { margin-top: 4rem; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .hero-meta .item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .hero-meta .item .val { font-size: 1.6rem; font-family: "Space Grotesk", sans-serif; letter-spacing: 0; color: var(--ink-0); font-weight: 500; } /* --- Scroll cue --- */ .scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-1); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; z-index: 5; pointer-events: none; } .scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--ink-2)); position: relative; overflow: hidden; } .scroll-cue .line::after { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: var(--holo); animation: scrollDown 2s ease-in-out infinite; } @keyframes scrollDown { 0% { top: -20px; } 100% { top: 40px; } } /* --- About section (replaces former Philosophy section) --- Two-column at desktop: portrait (sticky) on the left, bio body on the right. Stacks at <900px with portrait shrunk and aligned beside the name plate so the section opens with a face, not a wall of text. */ .about { min-height: 100vh; display: flex; align-items: center; padding: 6rem 1.5rem; position: relative; } .about-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } /* Portrait column */ .about-portrait { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 6rem; } .portrait-frame { aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(78, 232, 255, 0.12), rgba(155, 107, 255, 0.10)), var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); } .portrait-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--holo); opacity: 0.7; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .portrait-id { display: flex; flex-direction: column; gap: 0.45rem; } .portrait-name { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-0); } .portrait-role { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } /* Body column */ .about-body { max-width: 720px; } .about-tag { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.75rem; } .about-eyebrow { font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-0); margin: 0 0 2.25rem; } .about-eyebrow .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .about-prose { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.06rem; line-height: 1.65; color: var(--ink-1); } .about-prose p { margin: 0; } .about-prose strong { color: var(--ink-0); font-weight: 500; } .about-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.5rem; } .about-cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.4rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink-0); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .about-cta:hover { border-color: rgba(78, 232, 255, 0.45); background: rgba(78, 232, 255, 0.06); transform: translateY(-1px); } .about-cta .arrow { font-size: 1rem; line-height: 1; } @media (max-width: 899px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-portrait { position: static; flex-direction: row; align-items: flex-end; gap: 1.25rem; } .portrait-frame { width: 132px; flex: 0 0 auto; } .portrait-id { padding-bottom: 0.4rem; } } /* ============================================================================= Published / Book section (index.html) ============================================================================= A spinnable 3D book cover paired with a short blurb + Amazon CTA. Sits between About and Contact, mirroring About's grid in reverse (body LEFT, visual RIGHT) so the page reads in an alternating ABAB rhythm. The book itself is a CSS-only 3D model — six faces (front, back, spine, top, bottom, fore-edge) sharing one cover image positioned by background-position on each face. The drag-to-rotate interaction is wired in index.html with listeners scoped to the scene (not document) so it can't steal pointer events from the rest of the page. */ .book-section { min-height: 80vh; display: flex; align-items: center; padding: 6rem 1.5rem; position: relative; } .book-grid { display: grid; /* Mirror of .about-grid (reversed): body on the LEFT starts at the container's left padding edge — same x-position as Hero, Work intro, About body, and Contact. The book sits in a natural-width column on the RIGHT, hugging container-right the way About's portrait hugs container-left. */ grid-template-columns: 1fr auto; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } /* Body column (left) */ .book-body { /* Match .about-body so prose width is consistent across the page. */ max-width: 720px; } .book-tag { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.75rem; } .book-eyebrow { font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-0); margin: 0 0 1.5rem; } .book-eyebrow .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .book-subtitle { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1.75rem; } .book-prose { font-size: 1.06rem; line-height: 1.65; color: var(--ink-1); margin: 0 0 2.25rem; max-width: 48ch; } .book-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 0 0 2.25rem; padding: 1rem 1.25rem; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); } .book-meta-item { display: flex; flex-direction: column; gap: 0.2rem; } .book-meta-key { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-2); } .book-meta-val { font-size: 0.95rem; color: var(--ink-0); font-weight: 500; } .book-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; } .book-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.6rem; border-radius: 999px; border: 1px solid rgba(78, 232, 255, 0.5); background: rgba(78, 232, 255, 0.08); color: var(--ink-0); font-family: "JetBrains Mono", monospace; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .book-cta:hover { border-color: rgba(78, 232, 255, 0.85); background: rgba(78, 232, 255, 0.14); transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(78, 232, 255, 0.45); } .book-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .book-cta .arrow { font-size: 1rem; line-height: 1; } .book-cta-quiet { border-color: var(--glass-border); background: var(--glass-bg); } .book-cta-quiet:hover { border-color: rgba(78, 232, 255, 0.45); background: rgba(78, 232, 255, 0.06); } /* Stage column (right) — perspective container for the 3D book */ .book-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; position: relative; } .book-scene { /* Tunable dimensions — match book.html source values. */ --book-width: 320px; --book-height: 480px; --book-depth: 36px; --cover-image: url('full-cover.jpg'); --page-color: #efe9d9; width: var(--book-width); height: var(--book-height); perspective: 1800px; cursor: grab; display: flex; align-items: center; justify-content: center; /* Soft floor shadow under the book — pseudo-element so it doesn't interfere with the 3D context. */ position: relative; } .book-scene:active { cursor: grabbing; } .book-scene::after { content: ""; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); width: 78%; height: 24px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 70%); filter: blur(6px); opacity: 0.7; pointer-events: none; } body.theme-light .book-scene::after { background: radial-gradient(ellipse at center, rgba(20, 28, 55, 0.28), transparent 70%); opacity: 0.55; } .book-3d { width: var(--book-width); height: var(--book-height); position: relative; transform-style: preserve-3d; /* Initial pose — slightly turned so all three "spine + cover + top" faces read at first glance. JS overrides this with lerped rotation per drag. */ transform: rotateY(-25deg) rotateX(10deg); transition: transform 0.1s ease-out; } .book-face { position: absolute; background-color: #111; background-image: var(--cover-image); background-size: auto 100%; background-repeat: no-repeat; image-rendering: auto; } /* Subtle highlight overlay on each face for fake lighting depth. */ .book-face::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent 40%, rgba(0, 0, 0, 0.10)); pointer-events: none; } /* Front cover — right portion of the source image. */ .book-face-front { width: var(--book-width); height: var(--book-height); background-position: right center; transform: rotateY(0deg) translateZ(calc(var(--book-depth) / 2)); border-radius: 2px 4px 4px 2px; box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.3); } /* Back cover — left portion of the source image. */ .book-face-back { width: var(--book-width); height: var(--book-height); background-position: left center; transform: rotateY(180deg) translateZ(calc(var(--book-depth) / 2)); border-radius: 4px 2px 2px 4px; } /* Spine — center of the source image. */ .book-face-spine { width: var(--book-depth); height: var(--book-height); background-position: center center; left: calc(50% - var(--book-depth) / 2); transform: rotateY(-90deg) translateZ(calc(var(--book-width) / 2)); } /* Page edges — paper colored, not cover image. */ .book-face-top, .book-face-bottom, .book-face-edge { background-image: none; background-color: var(--page-color); } .book-face-top, .book-face-bottom { width: var(--book-width); height: var(--book-depth); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 3px 100%; top: calc(50% - var(--book-depth) / 2); } .book-face-top { transform: rotateX(90deg) translateZ(calc(var(--book-height) / 2)); } .book-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--book-height) / 2)); } .book-face-edge { width: var(--book-depth); height: var(--book-height); background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px); background-size: 100% 3px; left: calc(50% - var(--book-depth) / 2); transform: rotateY(90deg) translateZ(calc(var(--book-width) / 2)); } .book-hint { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-2); opacity: 0.6; margin-top: 1.5rem; pointer-events: none; user-select: none; } /* Mobile — stack body above book, shrink the book. */ @media (max-width: 899px) { .book-grid { grid-template-columns: 1fr; gap: 2.5rem; justify-items: start; } .book-body { max-width: 100%; } .book-stage { align-self: center; margin: 0 auto; } .book-scene { --book-width: 240px; --book-height: 360px; --book-depth: 30px; } } /* Reduced motion — drop the lerped jitter transition and hold a clean 3-quarter pose. JS still won't drive rotation, so it stays static. */ @media (prefers-reduced-motion: reduce) { .book-3d { transition: none; transform: rotateY(-22deg) rotateX(8deg); } } /* ============================================================================= Resume page (resume.html) ============================================================================= Document-first layout. No 3D background — the page is meant to read like a designed CV. Two-column grid (label gutter on the left, content on the right) collapses to a single column on mobile. Year ranges use the holographic gradient as the only chromatic accent so the page stays typographic. Includes print styles so File → Print produces a clean single-color document if someone prefers that to the bundled PDF. */ .page-resume { background: var(--bg-0); } .page-resume::before { /* Quieter ambient wash than the landing page so the document reads first. */ opacity: 0.55; } .resume-page { padding-bottom: 4rem; } /* Hero */ .resume-hero { padding: 8rem 1.5rem 3rem; } .resume-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .resume-hero-text { min-width: 0; /* prevent text from pushing avatar */ } .resume-hero-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; position: relative; flex: 0 0 auto; background: linear-gradient(135deg, rgba(78, 232, 255, 0.18), rgba(155, 107, 255, 0.14)), var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.5); } .resume-hero-avatar::before { /* Holographic ring echo of the portrait frame on the home page. */ content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; background: var(--holo); opacity: 0.45; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .resume-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .resume-tag { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.5rem; } .resume-name { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0 0 0.6rem; color: var(--ink-0); } .resume-name .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .resume-position { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-1); margin: 0 0 1.75rem; } .resume-contact { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.92rem; } .resume-contact a { color: var(--ink-1); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.25s ease; } .resume-contact a span { border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 1px; transition: border-color 0.25s ease; } .resume-contact a:hover { color: var(--accent-cyan); } .resume-contact a:hover span { border-color: var(--accent-cyan); } .resume-contact .ic { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; transition: opacity 0.25s ease; } .resume-contact a:hover .ic { opacity: 1; } .resume-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .resume-cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.4rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink-0); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .resume-cta:hover { border-color: rgba(78, 232, 255, 0.45); background: rgba(78, 232, 255, 0.06); transform: translateY(-1px); } .resume-cta.primary { border-color: rgba(78, 232, 255, 0.45); background: rgba(78, 232, 255, 0.08); } .resume-cta.primary:hover { background: rgba(78, 232, 255, 0.14); } .resume-cta .arrow { font-size: 1rem; line-height: 1; } /* Sections */ .resume-section { padding: 2.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); } .resume-section-quiet { padding-top: 1.5rem; padding-bottom: 1.5rem; } .resume-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem; align-items: start; } .resume-section-label { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); position: sticky; top: 6rem; } .resume-section-body { max-width: 760px; } .resume-lede { font-size: 1.15rem; line-height: 1.65; color: var(--ink-1); margin: 0; } .resume-lede strong { color: var(--ink-0); font-weight: 500; } /* Role entries (used for Experience + Education) */ .resume-role + .resume-role { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(255,255,255,0.05); } .resume-role-meta { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 0.5rem; } .resume-years { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; } .resume-years .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .resume-loc { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .resume-title { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; margin: 0 0 0.35rem; color: var(--ink-0); } .resume-title-note { font-size: 0.78rem; font-family: "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; margin-left: 0.4rem; } .resume-org { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.9rem; } /* Bullets read as considered prose, not a tight CV list — typography matched to .resume-lede so each contribution sits with the same weight and rhythm as the summary paragraph. The hairline dash marker stays so the eye still has a hook to scan, just quieter and pushed further into the gutter. */ .resume-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; color: var(--ink-1); font-size: 1.15rem; line-height: 1.65; } .resume-bullets li { position: relative; padding-left: 1.5rem; } .resume-bullets li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 10px; height: 1px; background: var(--ink-2); opacity: 0.6; } .resume-bullets strong { color: var(--ink-0); font-weight: 500; } /* Selected work — list of links back to the case studies. */ .resume-works { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .resume-work { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); text-decoration: none; color: var(--ink-0); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .resume-work:hover { border-color: rgba(78, 232, 255, 0.35); background: rgba(78, 232, 255, 0.05); transform: translateX(2px); } .resume-work-title { display: block; font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; margin-bottom: 0.15rem; } .resume-work-sub { display: block; font-size: 0.85rem; color: var(--ink-2); font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; grid-column: 1; } .resume-work-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 1.1rem; color: var(--ink-2); transition: color 0.25s ease, transform 0.25s ease; } .resume-work:hover .resume-work-arrow { color: var(--accent-cyan); transform: translateX(2px); } /* Capabilities tag cloud */ .resume-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; } .resume-tags span { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink-1); font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.10em; text-transform: uppercase; } .resume-quiet { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.10em; color: var(--ink-2); } /* Footer */ .resume-footer { padding: 3rem 1.5rem 2rem; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 1.5rem; } .resume-footer-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.10em; color: var(--ink-2); } .resume-footer-name { color: var(--ink-0); text-transform: uppercase; letter-spacing: 0.18em; } .resume-footer-sep { opacity: 0.4; } .resume-footer a { color: var(--ink-1); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 1px; } .resume-footer a:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); } /* Mobile collapse */ @media (max-width: 899px) { .resume-hero { padding: 6rem 1.25rem 2rem; } .resume-section { padding: 2rem 1.25rem; } .resume-grid { grid-template-columns: 1fr; gap: 1rem; } .resume-section-label { position: static; } .resume-role + .resume-role { margin-top: 1.75rem; padding-top: 1.75rem; } /* Avatar stacks above the name on small screens, slightly smaller. */ .resume-hero-grid { grid-template-columns: 1fr; gap: 1.25rem; } .resume-hero-avatar { width: 88px; height: 88px; order: -1; } } /* Print styles — File → Print yields a clean single-color document. Sections marked with .no-print (Selected Work, Capabilities) and the LinkedIn item in the contact strip are dropped so the print is the focused chronological CV that recruiters expect to forward. */ @media print { body { background: #fff !important; color: #111 !important; } body::before, #bg-canvas { display: none !important; } .nav-wrap, .resume-actions, .resume-footer, .theme-toggle, .no-print { display: none !important; } .resume-page { padding: 0; } .resume-hero { padding: 0 0 1.25rem; } .resume-section { padding: 1rem 0; border-color: #ddd; } .resume-name, .resume-title, .resume-bullets strong, .resume-lede strong, .resume-section-label, .resume-tag, .resume-org, .resume-loc, .resume-years, .resume-name .holo, .resume-years .holo { color: #111 !important; -webkit-text-fill-color: #111 !important; background: none !important; } .resume-bullets, .resume-lede, .resume-contact a { color: #222 !important; } .resume-tags span, .resume-work { border-color: #ccc !important; background: transparent !important; color: #111 !important; } a { color: #111 !important; text-decoration: underline; border: none !important; } } /* --- Contact: heading + social chips --- */ .contact { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 1.5rem 3rem; position: relative; } .contact-tag { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.5rem; } .contact h2 { font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; margin: 0 0 2rem; } .contact h2 .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact-sub { font-size: 1.2rem; color: var(--ink-1); max-width: 620px; font-weight: 400; margin-bottom: 3rem; } .contact-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 5rem; } .contact-link { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.75rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; color: var(--ink-0); text-decoration: none; font-size: 0.95rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .contact-link:hover { transform: translateY(-3px); border-color: rgba(78, 232, 255, 0.4); background: rgba(78, 232, 255, 0.06); color: var(--ink-0); } .contact-link .icon { width: 18px; height: 18px; color: var(--accent-cyan); } .contact-link .label { color: var(--ink-1); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-bottom: 0.2rem; } /* --- Contact form --- */ .contact-form-wrap { margin: 0 0 5rem; padding: 2.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } .contact-form-wrap::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.35; pointer-events: none; } .form-tag { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-1); margin-bottom: 1.75rem; display: block; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; } .form-grid .full { grid-column: 1 / -1; } .field { position: relative; display: flex; flex-direction: column; } .field label { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-1); margin-bottom: 0.55rem; } .field label .req { color: var(--accent-cyan); margin-left: 0.25rem; } .field input, .field textarea { width: 100%; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 0.9rem 1rem; color: var(--ink-0); font-family: "Space Grotesk", sans-serif; font-size: 1rem; line-height: 1.45; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 0.85; } .field input:focus, .field textarea:focus { outline: none; border-color: rgba(78, 232, 255, 0.55); background: rgba(78, 232, 255, 0.04); box-shadow: 0 0 0 3px rgba(78, 232, 255, 0.08); } .field textarea { min-height: 140px; } .field.invalid input, .field.invalid textarea { border-color: rgba(255, 107, 214, 0.6); } .field .error { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--accent-pink); margin-top: 0.45rem; min-height: 1em; } .form-actions { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .form-note { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-1); } .form-submit { border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-0); padding: 1rem 2rem; border-radius: 999px; cursor: pointer; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.85rem; transition: transform 0.3s ease, color 0.3s ease; } .form-submit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--holo); opacity: 0; z-index: -1; transition: opacity 0.35s ease; } .form-submit::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.65; pointer-events: none; } .form-submit:hover { transform: translateY(-2px); color: #05060d; } .form-submit:hover::before { opacity: 1; } .form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .form-status { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.1em; display: none; } .form-status.success { display: block; background: rgba(78, 232, 255, 0.06); border: 1px solid rgba(78, 232, 255, 0.4); color: var(--ink-0); } .form-status.error { display: block; background: rgba(255, 107, 214, 0.06); border: 1px solid rgba(255, 107, 214, 0.45); color: var(--ink-0); } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .contact-form-wrap { padding: 1.75rem; } } /* --- Pinned horizontal work rail --- */ .work-section { position: relative; padding-top: 6rem; } .work-intro { padding: 0 1.5rem 2.5rem; } .work-tag { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.25rem; } .work-headline { font-size: clamp(2.25rem, 5.5vw, 4.75rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1; margin: 0 0 1rem; max-width: 900px; } .work-headline em { font-style: normal; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .work-sub { color: var(--ink-1); font-weight: 400; font-size: 1.1rem; max-width: 620px; margin: 0 0 0.5rem; } .rail-section { height: 100vh; overflow: hidden; position: relative; perspective: 1800px; } .rail-track { display: flex; align-items: center; height: 100%; /* Side padding centers the first and last slabs in the viewport so the horizontal sweep reads dramatically: at scroll start, slab #1 is dead center; at scroll end, slab #3 is dead center. The slab itself is min(560px, 72vw) wide, so half-width = min(280px, 36vw). Bottom padding reserves a stripe for the progress bar below the cards. */ padding: 0 calc(50vw - min(280px, 36vw)) 7rem; gap: 4vw; will-change: transform; transform-style: preserve-3d; } .slab { flex: 0 0 min(560px, 72vw); aspect-ratio: 4 / 5; /* Cap height so the slab never bleeds into the progress-bar stripe on shorter viewports (laptops at ~768px tall). max-height wins over aspect-ratio when necessary — width shrinks to maintain 4:5. */ max-height: calc(100vh - 10rem); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2rem 2.25rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transform-style: preserve-3d; will-change: transform; transition: border-color 0.35s ease, background 0.35s ease; /* Make absolutely sure the slab stays on top of the progress bar for hit-testing — the progress stripe is visually below, but we want no ambiguity on transformed-preserve-3d hit paths. */ z-index: 2; pointer-events: auto; } .slab::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .slab:hover::before { opacity: 0.8; } .slab:hover { background: rgba(255, 255, 255, 0.06); } .slab-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .slab-number { font-family: "JetBrains Mono", monospace; font-size: 1.1rem; letter-spacing: 0.15em; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; } .slab-meta { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-2); text-align: right; line-height: 1.6; } .slab-visual { flex: 1; border-radius: 16px; background: radial-gradient(420px 220px at 25% 25%, rgba(78, 232, 255, 0.14), transparent 60%), radial-gradient(420px 220px at 75% 75%, rgba(255, 107, 214, 0.11), transparent 60%), #0b0f1e; border: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .slab-visual svg { width: 100%; height: 100%; } .slab-accent-a { --slab-accent: #4ee8ff; } .slab-accent-b { --slab-accent: #3d7bff; } /* Chase Locator — was purple, now blue */ .slab-accent-c { --slab-accent: #ff6bd6; } .slab-visual::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--slab-accent, var(--accent-cyan)); box-shadow: 0 0 16px var(--slab-accent, var(--accent-cyan)); opacity: 0.7; } /* Award/recognition badge — sits above the slab title. Reusable across slabs. */ .slab-award { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.35rem 0.7rem 0.35rem 0.55rem; margin: 0 0 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--ink-1); font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; isolation: isolate; } /* Holo gradient hairline border via mask trick. */ .slab-award::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.85; pointer-events: none; z-index: -1; } .slab-award svg { width: 13px; height: 13px; color: var(--accent-cyan, #4ee8ff); flex: 0 0 auto; } .slab-award-text { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 500; } .slab-title { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.35rem; color: var(--ink-0); } .slab-role { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slab-accent, var(--accent-cyan)); margin-bottom: 0.9rem; } .slab-outcome { color: var(--ink-1); font-size: 0.98rem; line-height: 1.5; font-weight: 400; margin: 0 0 1.5rem; } .slab-cta { margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-0); display: inline-flex; align-items: center; gap: 0.7rem; } .slab-cta .arrow { display: inline-block; width: 24px; height: 8px; position: relative; transition: transform 0.3s ease; } .slab-cta .arrow::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: currentColor; transform: translateY(-50%); } .slab-cta .arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); } .slab:hover .slab-cta .arrow { transform: translateX(5px); } .rail-progress { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; z-index: 3; } .rail-progress .bar { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; position: relative; overflow: hidden; } .rail-progress .bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--holo); transition: width 0.1s linear; } /* Mobile: abandon horizontal pinning — stack vertically. */ @media (max-width: 899px) { .rail-section { height: auto; overflow: visible; } .rail-track { flex-direction: column; gap: 1.5rem; padding: 0 1.5rem 2rem; transform: none !important; } .slab { flex: 0 0 auto; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: auto; min-height: 480px; transform: none !important; } .rail-progress { display: none; } } /* Utility: 3D tilt marker */ .tilt-3d { transform-style: preserve-3d; will-change: transform; } /* ============================================================================= CASE-STUDY PAGES (body.page-cs) ============================================================================= */ /* --- Hero --- */ .cs-hero { min-height: 100vh; display: flex; align-items: center; padding: 9rem 1.5rem 4rem; position: relative; } /* Split hero — text left, visual right (used on SmileMD overview). */ .cs-hero-split .cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: start; } .cs-hero-split .cs-title { font-size: clamp(2.25rem, 5.5vw, 4.75rem); } .cs-hero-split .meta-strip { /* In the split layout the left column is narrower — let the strip wrap. */ max-width: 100% !important; grid-template-columns: repeat(3, 1fr) !important; row-gap: 1.5rem; } .cs-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; padding: 1rem; } .cs-hero-visual::before { /* ambient glow behind the phone */ content: ""; position: absolute; inset: 8% 8%; background: radial-gradient(circle at 50% 50%, rgba(255, 107, 214, 0.22), transparent 65%), radial-gradient(circle at 30% 80%, rgba(78, 232, 255, 0.12), transparent 60%); filter: blur(40px); z-index: 0; pointer-events: none; } .cs-hero-visual picture { position: relative; z-index: 1; display: block; } .cs-hero-visual img { display: block; width: 100%; max-width: 326px; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 16px rgba(255, 107, 214, 0.18)); animation: cs-hero-float 8s ease-in-out infinite; } @keyframes cs-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .cs-hero-visual img { animation: none; } } /* Light-mode shadow tone */ body.theme-light .cs-hero-visual::before { background: radial-gradient(circle at 50% 50%, rgba(199, 35, 147, 0.18), transparent 65%), radial-gradient(circle at 30% 80%, rgba(20, 165, 200, 0.10), transparent 60%); } body.theme-light .cs-hero-visual img { filter: drop-shadow(0 24px 40px rgba(40, 25, 60, 0.20)) drop-shadow(0 6px 14px rgba(199, 35, 147, 0.10)); } /* Stack on tablet/mobile — visual moves below text. */ @media (max-width: 900px) { .cs-hero-split .cs-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .cs-hero-split .meta-strip { grid-template-columns: repeat(2, 1fr) !important; } .cs-hero-visual img { max-width: 320px; } } @media (max-width: 480px) { .cs-hero-split .meta-strip { grid-template-columns: 1fr !important; } } /* ---------------------------------------------------------------------- Chase hero device comp — MacBook + iPhone overlap, blue palette glow. Lives inside .cs-hero-visual but overrides the SmileMD-default phone image rules (max-width / float animation / pink shadow). ---------------------------------------------------------------------- */ /* Blue palette glow behind the device comp. */ body.palette-blue .cs-hero-visual::before { background: radial-gradient(circle at 50% 50%, rgba(61, 123, 255, 0.22), transparent 65%), radial-gradient(circle at 70% 80%, rgba(78, 232, 255, 0.16), transparent 60%); } body.theme-light.palette-blue .cs-hero-visual::before { background: radial-gradient(circle at 50% 50%, rgba(35, 90, 220, 0.14), transparent 65%), radial-gradient(circle at 70% 80%, rgba(20, 165, 200, 0.10), transparent 60%); } /* Chase hero stacks the device comp + recognition card vertically. The default .cs-hero-visual is a centered flex row (one phone) — Chase carries two children and needs a column. */ body.palette-blue .cs-hero-visual { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.25rem; } body.palette-blue .cs-hero-visual .cs-recognition { max-width: none; margin: 0; } /* Layout container for the two devices. */ .cs-device-comp { position: relative; width: 100%; min-height: 460px; padding: 1rem 0; /* Override the SmileMD default img rules — devices have their own sizing. */ } .cs-device-comp img { max-width: none; filter: none; animation: none; } /* Common device props. */ .cs-device-comp .device { position: absolute; margin: 0; border-radius: 14px; background: #0b0f1e; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(61, 123, 255, 0.15); } .cs-device-comp .device img { display: block; width: 100%; height: 100%; object-fit: cover; } /* MacBook — back layer, anchored top-left, ~85% width. */ .cs-device-comp .device-mac { top: 4%; left: 0; width: 88%; aspect-ratio: 16 / 10.5; /* 10 screen + 0.5 base */ background: transparent; box-shadow: none; border-radius: 0; } .device-mac-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #0b0f1e; border: 8px solid #1a1d2e; border-radius: 14px 14px 4px 4px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(61, 123, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .device-mac-screen img { width: 100%; height: 100%; object-fit: cover; } /* Notch */ .device-mac-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22%; height: 6px; background: #1a1d2e; border-radius: 0 0 6px 6px; z-index: 2; } /* Hinge / base — thin trapezoid below the screen. */ .device-mac-base { position: relative; width: 108%; margin: 0 -4%; height: 10px; background: linear-gradient(180deg, #1a1d2e 0%, #0b0f1e 100%); border-radius: 0 0 12px 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); } .device-mac-base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14%; height: 4px; background: #05060d; border-radius: 0 0 4px 4px; } /* iPhone — front layer, overlaps lower-right of MacBook. */ .cs-device-comp .device-iphone { bottom: 0; right: 0; width: 30%; aspect-ratio: 9 / 19.5; background: #1a1d2e; border: 5px solid #1a1d2e; border-radius: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 10px 22px rgba(78, 232, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; z-index: 2; } .cs-device-comp .device-iphone img { border-radius: 12px; } /*.device-iphone-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 32%; height: 16px; background: #05060d; border-radius: 999px; z-index: 3; } */ /* Placeholder treatment when image is missing — shows a labeled tile so the layout reads correctly even before screenshots are dropped in. */ .cs-device-comp .device-mac-screen.no-img, .cs-device-comp .device-iphone.no-img { background: repeating-linear-gradient(45deg, rgba(78, 232, 255, 0.06) 0 12px, rgba(78, 232, 255, 0.02) 12px 24px), #0b0f1e; } .cs-device-comp .device-mac-screen.no-img img, .cs-device-comp .device-iphone.no-img img { display: none; } .cs-device-comp .device-mac-screen.no-img::after { content: "MacBook screenshot · 1600 × 1000"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(78, 232, 255, 0.55); text-align: center; padding: 1rem; } .cs-device-comp .device-iphone.no-img::after { content: "iPhone · 1170 × 2532"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(78, 232, 255, 0.55); text-align: center; padding: 0.5rem; } /* Subtle float — sync to the SmileMD pattern but on the comp container. */ .cs-device-comp .device-mac { animation: cs-mac-float 9s ease-in-out infinite; } .cs-device-comp .device-iphone { animation: cs-phone-float 9s ease-in-out infinite; animation-delay: -3s; } @keyframes cs-mac-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes cs-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .cs-device-comp .device-mac, .cs-device-comp .device-iphone { animation: none; } } /* Light-mode shadow softening for the device comp. */ body.theme-light .cs-device-comp .device-mac-screen, body.theme-light .cs-device-comp .device-iphone { box-shadow: 0 24px 40px rgba(40, 25, 60, 0.20), 0 6px 14px rgba(35, 90, 220, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } /* Mobile: shrink the comp's min-height + iPhone overlap. */ @media (max-width: 900px) { .cs-device-comp { min-height: 380px; max-width: 540px; margin: 0 auto; } .cs-device-comp .device-iphone { width: 32%; } } @media (max-width: 480px) { .cs-device-comp { min-height: 300px; } } .cs-category { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.75rem; display: inline-flex; align-items: center; gap: 0.75rem; } .cs-category::before { content: ""; width: 40px; height: 1px; background: var(--holo); } .cs-title { font-size: clamp(2.5rem, 7.5vw, 6.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 1.5rem; max-width: 1100px; } .cs-title .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); max-width: 740px; color: var(--ink-1); font-weight: 400; line-height: 1.55; margin: 0 0 3rem; } /* Industry recognition card — sits between lede and meta strip on case studies. */ .cs-recognition { position: relative; display: flex; align-items: center; gap: 1rem; max-width: 720px; margin: 0 0 1.75rem; padding: 0.95rem 1.15rem; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } /* Holographic accent line on the leading edge. */ .cs-recognition::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--holo, linear-gradient(180deg, #4ee8ff, #9b6bff, #ff6bd6)); opacity: 0.85; } .cs-recognition-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(78, 232, 255, 0.08); border: 1px solid rgba(78, 232, 255, 0.32); color: #4ee8ff; } .cs-recognition-icon svg { width: 22px; height: 22px; } .cs-recognition-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .cs-recognition-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mid); opacity: 0.85; } .cs-recognition-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .cs-recognition-title .holo { background: var(--holo, linear-gradient(90deg, #4ee8ff, #9b6bff, #ff6bd6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cs-recognition-sub { font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; line-height: 1.45; color: var(--ink-mid); } @media (max-width: 640px) { .cs-recognition { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem 1.1rem; } .cs-recognition::before { inset: 0 0 auto 0; width: auto; height: 3px; background: var(--holo, linear-gradient(90deg, #4ee8ff, #9b6bff, #ff6bd6)); } } /* Overview meta strip — number of columns varies per page. */ .meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem 1.75rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 920px; } /* SmileMD hero carries 5 meta items → wider + 5 columns. */ body.palette-pink .meta-strip { grid-template-columns: repeat(5, 1fr); max-width: 1080px; } /* Chase hero also carries 5 meta items. */ body.palette-blue .meta-strip { grid-template-columns: repeat(5, 1fr); max-width: 1080px; } .meta-item .label { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; } .meta-item .val { font-size: 1rem; color: var(--ink-0); font-weight: 500; line-height: 1.35; } @media (max-width: 900px) { .meta-strip, body.palette-pink .meta-strip, body.palette-blue .meta-strip { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------------- Innovation Campus hero mockup — single composite PNG that already shows desktop + tablet + phone in one frame, so we don't build per-device chrome the way Chase does. Lives inside .cs-hero-visual but overrides the SmileMD phone-sized defaults (max-width 326px, pink shadow). Cyan palette glow behind it. ---------------------------------------------------------------------- */ /* Cyan palette glow behind the mockup. */ body.palette-cyan .cs-hero-visual::before { background: radial-gradient(circle at 50% 50%, rgba(78, 232, 255, 0.22), transparent 65%), radial-gradient(circle at 70% 80%, rgba(155, 107, 255, 0.16), transparent 60%); } body.theme-light.palette-cyan .cs-hero-visual::before { background: radial-gradient(circle at 50% 50%, rgba(20, 165, 200, 0.14), transparent 65%), radial-gradient(circle at 70% 80%, rgba(109, 40, 217, 0.10), transparent 60%); } /* IC hero stacks the mockup + caption vertically. */ body.palette-cyan .cs-hero-visual { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem; } /* The mockup itself — wide, no phone-sized cap, soft glow shadow. Specificity bumped via .cs-hero-visual ancestor so it beats the shared `.cs-hero-visual img` SmileMD defaults. */ .cs-hero-visual .cs-hero-mockup { position: relative; width: 100%; z-index: 1; } .cs-hero-visual .cs-hero-mockup img { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; border-radius: 10px; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 16px rgba(78, 232, 255, 0.20)); animation: cs-hero-float 8s ease-in-out infinite; } body.theme-light .cs-hero-visual .cs-hero-mockup img { filter: drop-shadow(0 24px 40px rgba(40, 25, 60, 0.20)) drop-shadow(0 6px 14px rgba(20, 165, 200, 0.10)); } /* Quiet caption strip under the mockup — names the surfaces shown. */ .cs-hero-mockup-caption { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.65rem 1.4rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); } .cs-hero-mockup-caption li { display: inline-flex; align-items: center; gap: 0.45rem; } .cs-hero-mockup-caption .dot { width: 5px; height: 5px; border-radius: 50%; background: #4ee8ff; display: inline-block; box-shadow: 0 0 6px rgba(78, 232, 255, 0.55); } body.theme-light .cs-hero-mockup-caption .dot { background: #0e7490; box-shadow: 0 0 6px rgba(20, 165, 200, 0.35); } @media (max-width: 900px) { .cs-hero-visual .cs-hero-mockup img { max-width: 480px; } } /* --- Shared section scaffolding --- */ .cs-section { padding: 8rem 1.5rem; position: relative; } .cs-section-num { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; } .cs-section-num .badge { display: inline-block; padding: 0.25rem 0.6rem; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); font-size: 0.7rem; color: var(--ink-1); } .cs-section h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 2rem; max-width: 900px; } .cs-section h2 em { font-style: normal; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-p { font-size: 1.1rem; color: var(--ink-1); font-weight: 400; max-width: 740px; margin: 0 0 1.2rem; } /* --- Metric cards (Problem / Impact) --- */ .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; } .metric { padding: 1.75rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } .metric::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--holo); opacity: 0.55; } .metric .big { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.75rem; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .metric .cap { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.55rem; } .metric .desc { color: var(--ink-1); font-size: 0.95rem; } @media (max-width: 820px) { .metric-grid { grid-template-columns: 1fr; } } /* --- Research methods grid (capped at 3 cols) --- */ .methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } @media (max-width: 900px) { .methods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .methods { grid-template-columns: 1fr; } } .method { padding: 1.5rem; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } /* Method accents swap per palette. */ .method:hover { transform: translateY(-3px); border-color: rgba(78, 232, 255, 0.3); background: rgba(78, 232, 255, 0.04); } body.palette-pink .method:hover { border-color: rgba(255, 107, 214, 0.35); background: rgba(255, 107, 214, 0.04); } body.palette-blue .method:hover { border-color: rgba(61, 123, 255, 0.38); background: rgba(61, 123, 255, 0.05); } .method .ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgba(78, 232, 255, 0.18), rgba(155, 107, 255, 0.18)); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } body.palette-pink .method .ic { background: linear-gradient(135deg, rgba(255, 107, 214, 0.20), rgba(155, 107, 255, 0.20)); color: var(--accent-pink); } body.palette-blue .method .ic { background: linear-gradient(135deg, rgba(61, 123, 255, 0.22), rgba(78, 232, 255, 0.18)); color: var(--accent-blue); } .method h4 { font-size: 1.05rem; font-weight: 500; margin: 0 0 0.35rem; color: var(--ink-0); } .method p { margin: 0; font-size: 0.92rem; color: var(--ink-1); font-weight: 400; } /* Larger, themed illustration header used on SmileMD method tiles. */ .method-art { width: 100%; height: 110px; border-radius: 12px; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 107, 214, 0.10), rgba(155, 107, 255, 0.06) 60%, transparent 90%), rgba(255, 107, 214, 0.025); border: 1px solid rgba(255, 107, 214, 0.14); margin-bottom: 1.1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.35s ease, border-color 0.35s ease; } .method:hover .method-art { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 107, 214, 0.16), rgba(155, 107, 255, 0.10) 60%, transparent 90%), rgba(255, 107, 214, 0.04); border-color: rgba(255, 107, 214, 0.28); } .method-art svg { width: 100%; height: 100%; display: block; } /* Light-mode tokens for method-art */ body.theme-light .method-art { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(199, 35, 147, 0.10), rgba(120, 70, 200, 0.06) 60%, transparent 90%), rgba(199, 35, 147, 0.02); border-color: rgba(199, 35, 147, 0.18); } body.theme-light .method:hover .method-art { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(199, 35, 147, 0.16), rgba(120, 70, 200, 0.10) 60%, transparent 90%), rgba(199, 35, 147, 0.04); border-color: rgba(199, 35, 147, 0.32); } /* Chase blue palette overrides for .method-art (research methods). */ body.palette-blue .method-art { /* Theme-swappable ink for SVG labels + placeholder lines. */ --m-ink-strong: rgba(244, 245, 255, 0.85); --m-ink-mid: rgba(244, 245, 255, 0.55); --m-ink-faint: rgba(244, 245, 255, 0.32); --m-ink-trace: rgba(244, 245, 255, 0.15); background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(61, 123, 255, 0.12), rgba(78, 232, 255, 0.06) 60%, transparent 90%), rgba(61, 123, 255, 0.025); border-color: rgba(61, 123, 255, 0.18); } body.palette-blue .method:hover .method-art { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(61, 123, 255, 0.18), rgba(78, 232, 255, 0.10) 60%, transparent 90%), rgba(61, 123, 255, 0.04); border-color: rgba(61, 123, 255, 0.34); } body.theme-light.palette-blue .method-art { /* Inverted ink for light theme — dark slate on near-white. */ --m-ink-strong: rgba(20, 28, 55, 0.88); --m-ink-mid: rgba(20, 28, 55, 0.65); --m-ink-faint: rgba(20, 28, 55, 0.42); --m-ink-trace: rgba(20, 28, 55, 0.20); background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(35, 90, 220, 0.10), rgba(20, 165, 200, 0.06) 60%, transparent 90%), rgba(35, 90, 220, 0.025); border-color: rgba(35, 90, 220, 0.18); } body.theme-light.palette-blue .method:hover .method-art { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(35, 90, 220, 0.16), rgba(20, 165, 200, 0.10) 60%, transparent 90%), rgba(35, 90, 220, 0.04); border-color: rgba(35, 90, 220, 0.34); } /* --- Pull quote (case-study shared) --- */ .pullquote { margin: 4rem 0 0; padding: 2.5rem; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; position: relative; overflow: hidden; } .pullquote::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.4; pointer-events: none; } .pullquote blockquote { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-0); } .pullquote cite { display: block; margin-top: 1.5rem; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); } /* --- End / "next case" card --- */ .cs-end { padding: 7rem 1.5rem 3rem; border-top: 1px solid var(--glass-border); margin-top: 4rem; } .cs-end h3 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 1rem; } .cs-end h3 .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-end p { color: var(--ink-1); font-weight: 400; max-width: 620px; margin: 0 0 2.5rem; } /* ============================================================================= IC-ONLY COMPONENTS (Innovation Campus case study) ============================================================================= */ /* --- Insights list --- */ .insights { margin-top: 3.5rem; display: grid; gap: 1rem; max-width: 900px; } .insight { display: grid; grid-template-columns: 60px 1fr; gap: 1.25rem; padding: 1.25rem 1.5rem; border-left: 1px solid rgba(78, 232, 255, 0.4); background: linear-gradient(90deg, rgba(78, 232, 255, 0.05), transparent 60%); border-radius: 0 14px 14px 0; } .insight .idx { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--accent-cyan); padding-top: 0.1rem; } .insight h5 { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 500; } .insight p { margin: 0; color: var(--ink-1); font-weight: 400; } /* --- Process horizontal scroll --- */ .process-wrap { margin-top: 3.5rem; position: relative; } .process-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 85vw); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 0.25rem 2rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(155, 107, 255, 0.4) transparent; } .process-track::-webkit-scrollbar { height: 6px; } .process-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4ee8ff, #9b6bff, #ff6bd6); border-radius: 10px; } .process-card { scroll-snap-align: start; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.25rem; display: flex; flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.35s ease, border-color 0.35s ease; } .process-card:hover { transform: translateY(-4px); border-color: rgba(155, 107, 255, 0.45); } .process-card .phase { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.75rem; } .process-card h4 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 500; } .process-card p { margin: 0 0 1rem; color: var(--ink-1); font-weight: 400; font-size: 0.95rem; } .process-viz { height: 220px; border-radius: 14px; background: radial-gradient(400px 200px at 20% 20%, rgba(78, 232, 255, 0.12), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(255, 107, 214, 0.10), transparent 60%), #0c1022; border: 1px solid var(--glass-border); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .process-hint { margin-top: 0.75rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 0.5rem; align-items: center; } .process-hint .arrow-ic { display: inline-block; width: 18px; height: 8px; position: relative; } .process-hint .arrow-ic::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: currentColor; transform: translateY(-50%); } .process-hint .arrow-ic::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); } /* ============================================================================= SMILEMD-ONLY COMPONENTS ============================================================================= */ /* --- User-need quote grid --- */ .needs-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .need { padding: 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .need:hover { transform: translateY(-3px); border-color: rgba(255, 107, 214, 0.4); background: rgba(255, 107, 214, 0.04); } .need::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--holo); } .need .mark { font-family: "Space Grotesk", serif; font-size: 2rem; line-height: 1; color: var(--accent-pink); opacity: 0.55; margin-bottom: 0.25rem; } .need .quote { color: var(--ink-0); font-weight: 400; font-size: 0.98rem; line-height: 1.45; } .need .who { margin-top: 0.85rem; font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); } @media (max-width: 1000px) { .needs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .needs-grid { grid-template-columns: 1fr; } } /* --- Empathy map (2x2 quadrant) --- */ .empathy-map { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .empathy-cell { padding: 2rem 2rem 1.75rem; border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); position: relative; min-height: 220px; } .empathy-cell:nth-child(2), .empathy-cell:nth-child(4) { border-right: none; } .empathy-cell:nth-child(3), .empathy-cell:nth-child(4) { border-bottom: none; } .empathy-cell .em-title { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-pink); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.6rem; } .empathy-cell .em-title::before { content: ""; width: 18px; height: 1px; background: var(--holo); } .empathy-cell ul { margin: 0; padding: 0; list-style: none; } .empathy-cell li { padding-left: 1.1rem; margin-bottom: 0.6rem; position: relative; color: var(--ink-1); font-weight: 400; font-size: 0.95rem; line-height: 1.4; } .empathy-cell li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--ink-2); opacity: 0.7; } .em-axis-x, .em-axis-y { position: absolute; background: var(--holo); opacity: 0.45; pointer-events: none; } .em-axis-x { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); } .em-axis-y { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); } @media (max-width: 800px) { .empathy-map { grid-template-columns: 1fr; grid-template-rows: auto; } .empathy-cell { border-right: none; border-bottom: 1px solid var(--glass-border); } .empathy-cell:last-child { border-bottom: none; } .em-axis-x, .em-axis-y { display: none; } } /* --- Process phases (3-column grid) --- */ .phase-grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .phase { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; position: relative; overflow: hidden; } .phase::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--holo); } .phase .phase-num { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.6rem; } .phase h4 { font-size: 1.35rem; font-weight: 500; margin: 0 0 0.3rem; letter-spacing: -0.01em; color: var(--ink-0); } .phase .phase-sub { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-pink); margin-bottom: 1.1rem; } .phase .phase-viz { height: 210px; border-radius: 12px; background: radial-gradient(400px 200px at 20% 20%, rgba(255, 107, 214, 0.14), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(78, 232, 255, 0.10), transparent 60%), #0b0f1e; border: 1px solid var(--glass-border); margin-bottom: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .phase .phase-viz-wireframes img { max-height: 195px; width: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); } .phase ul { margin: 0; padding: 0; list-style: none; } .phase li { padding-left: 1.1rem; margin-bottom: 0.5rem; position: relative; color: var(--ink-1); font-size: 0.92rem; font-weight: 400; } .phase li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background: var(--holo); } @media (max-width: 900px) { .phase-grid { grid-template-columns: 1fr; } } /* --- Impact cards (2-col grid) --- */ .impact-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .impact-card { padding: 2rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } .impact-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.3; pointer-events: none; } .impact-card h4 { font-size: 1.25rem; font-weight: 500; margin: 0 0 0.7rem; color: var(--ink-0); } .impact-card .impact-tag { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-pink); margin-bottom: 1rem; } .impact-card .impact-metric { display: flex; align-items: baseline; gap: 0.85rem; margin: 0 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--glass-border); } .impact-card .impact-metric .num { font-family: "Space Grotesk", sans-serif; font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } .impact-card .impact-metric .lbl { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); flex: 1; line-height: 1.45; } /* Multi-metric stack — used when a card needs more than one number */ .impact-card .impact-metric-stack { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--glass-border); } .impact-card .impact-mini { display: flex; align-items: baseline; gap: 0.75rem; } .impact-card .impact-mini .num { font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; flex: 0 0 auto; min-width: 4.2rem; } .impact-card .impact-mini .lbl { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); line-height: 1.5; flex: 1; } .impact-card p { margin: 0; color: var(--ink-1); font-weight: 400; font-size: 1rem; line-height: 1.55; } @media (max-width: 800px) { .impact-grid { grid-template-columns: 1fr; } } /* --- SmileMD final-designs gallery (real screens) --- */ .cs-screens { position: relative; padding: 4rem 1.5rem 6rem; /* overflow stays visible — the inner .cs-screens-wall already clips the parallax phones to the gallery box. Toggling overflow on this section would break position:sticky on .cs-screens-text. */ } .cs-screens .container { position: relative; } .cs-screens-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.75rem; } .cs-screens-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.75rem; max-width: 760px; } .cs-screens-title .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-screens-lede { color: var(--ink-1); max-width: 640px; margin: 0 0 3rem; font-weight: 400; } /* Two-column layout — sticky copy on the left, parallax wall on the right */ .cs-screens-split { display: grid; grid-template-columns: 1fr 1.7fr; gap: 4rem; align-items: start; margin-bottom: 4rem; } .cs-screens-split .cs-screens-text { position: sticky; top: 6rem; align-self: start; } .cs-screens-split .cs-screens-text .cs-screens-title, .cs-screens-split .cs-screens-text .cs-screens-lede { max-width: none; } .cs-screens-split .cs-screens-text .cs-screens-lede { margin-bottom: 0; } .cs-screens-split .cs-screens-visual { min-width: 0; /* allow grid child to shrink */ } .cs-screens-split .cs-screens-wall { margin: 0; max-width: none; height: 640px; } @media (max-width: 1080px) { .cs-screens-split { grid-template-columns: 1fr; gap: 2rem; } .cs-screens-split .cs-screens-text { position: static; } .cs-screens-split .cs-screens-text .cs-screens-lede { margin-bottom: 1.5rem; } .cs-screens-split .cs-screens-wall { height: 580px; } } /* Hero showcase — wall of phones with parallax columns */ .cs-screens-wall { position: relative; margin: 0 auto 4rem; max-width: 1240px; height: 580px; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 107, 214, 0.10) 0%, rgba(155, 107, 255, 0.05) 40%, transparent 75%); } .cs-screens-wall::before { /* ambient color noise behind the phones */ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 25%, rgba(255, 107, 214, 0.18), transparent 45%), radial-gradient(circle at 82% 75%, rgba(78, 232, 255, 0.12), transparent 50%), radial-gradient(circle at 50% 50%, rgba(155, 107, 255, 0.08), transparent 60%); pointer-events: none; z-index: 0; } .wall-mask { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; padding: 0 1rem; /* fade the top + bottom so phones emerge / disappear */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%); } .wall-col { position: relative; overflow: visible; /* Each column starts offset so the parallax has room to drift in either direction. */ will-change: transform; } .wall-col[data-dir="down"] { align-self: start; } .wall-col[data-dir="up"] { align-self: end; } .wall-track { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; } .wall-phone { --hover-scale: 2.5; /* dial up to 3 / 3.5 / 4 if you want it even more dramatic */ width: 100%; max-width: 200px; flex-shrink: 0; transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease; position: relative; z-index: 1; } .wall-phone.tilt-l { transform: rotate(-5deg); } .wall-phone.tilt-r { transform: rotate(5deg); } .wall-phone img, .wall-phone picture { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 10px rgba(255, 107, 214, 0.10)); transition: filter 0.45s ease; } /* Hover-to-zoom — pointer devices only */ @media (hover: hover) and (pointer: fine) { .wall-phone { cursor: zoom-in; } .wall-phone:hover { transform: scale(var(--hover-scale)) rotate(0deg); z-index: 50; } .wall-phone:hover img { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7)) drop-shadow(0 10px 22px rgba(255, 107, 214, 0.30)); } /* Release the gallery's clip + edge mask while a phone is being inspected, so the scaled phone isn't cut off. The section itself stays overflow:visible permanently to avoid breaking position:sticky on .cs-screens-text. */ .cs-screens-wall:has(.wall-phone:hover) { overflow: visible; } .cs-screens-wall:has(.wall-phone:hover) .wall-mask { -webkit-mask-image: none; mask-image: none; } } /* Slight stagger so neighboring phones don't share a baseline */ .wall-col:nth-child(2) .wall-track, .wall-col:nth-child(4) .wall-track { padding-top: 4rem; } .wall-col:nth-child(3) .wall-track { padding-top: 2rem; } /* Mobile: keep all 5 columns visible, shrink phones to fit, break wall out to ~98vw so it spans the full screen, and disable parallax (handled in JS). Hover-zoom is already gated to (hover: hover) so it's off here. */ @media (max-width: 820px) { .cs-screens-wall { width: 98vw; max-width: none; position: relative; left: 50%; transform: translateX(-50%); height: auto; padding: 1rem 0; margin-bottom: 3rem; border-radius: 16px; } .wall-mask { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; padding: 0 0.5rem; -webkit-mask-image: none; mask-image: none; } .wall-col { transform: none !important; align-self: center; } .wall-col .wall-track { padding-top: 0 !important; } .wall-track { gap: 0.5rem; } .wall-phone { max-width: 100%; } .wall-phone.tilt-l { transform: rotate(-2deg); } .wall-phone.tilt-r { transform: rotate(2deg); } } @media (max-width: 480px) { .wall-mask { grid-template-columns: repeat(5, 1fr); gap: 0.25rem; padding: 0 0.25rem; } .wall-track { gap: 0.3rem; } } /* Phone gallery grid */ .cs-screens-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; align-items: end; } .screen-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.5rem 0.25rem 0; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .screen-card:hover { transform: translateY(-6px); } .screen-frame { position: relative; width: 100%; display: flex; justify-content: center; } .screen-frame::before { /* soft holographic ground glow */ content: ""; position: absolute; bottom: -6px; left: 12%; right: 12%; height: 28px; background: var(--holo); filter: blur(22px); opacity: 0.35; border-radius: 50%; z-index: 0; transition: opacity 0.4s ease; } .screen-card:hover .screen-frame::before { opacity: 0.6; } .screen-frame img { position: relative; z-index: 1; width: 100%; height: auto; max-width: 220px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 10px rgba(255, 107, 214, 0.10)); transition: filter 0.4s ease; } .screen-card:hover .screen-frame img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 6px 14px rgba(255, 107, 214, 0.22)); } .screen-cap { margin-top: 1.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); } .screen-name { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-0); font-weight: 500; } /* Inline single-screen treatment for embedding inside a section */ .screen-inline { position: relative; display: flex; justify-content: center; margin: 2rem 0 0; } .screen-inline::before { content: ""; position: absolute; bottom: 0; left: 25%; right: 25%; height: 32px; background: var(--holo); filter: blur(28px); opacity: 0.4; border-radius: 50%; z-index: 0; } .screen-inline img { position: relative; z-index: 1; width: 100%; height: auto; max-width: 320px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); } /* Responsive collapse */ @media (max-width: 980px) { .cs-screens-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; } .cs-screens-grid .screen-card:nth-child(n+4) { grid-column: span 1; } } @media (max-width: 640px) { .cs-screens-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0.75rem; } .cs-screens-hero { padding: 1rem 0.5rem; } } /* Light-mode tweaks for screens (less heavy shadow on light bg) */ body.theme-light .cs-screens-wall { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(199, 35, 147, 0.08) 0%, rgba(120, 70, 200, 0.04) 40%, transparent 75%); } body.theme-light .cs-screens-wall::before { background: radial-gradient(circle at 18% 25%, rgba(199, 35, 147, 0.12), transparent 45%), radial-gradient(circle at 82% 75%, rgba(20, 165, 200, 0.08), transparent 50%), radial-gradient(circle at 50% 50%, rgba(120, 70, 200, 0.05), transparent 60%); } body.theme-light .wall-phone img { filter: drop-shadow(0 14px 22px rgba(40, 25, 60, 0.18)) drop-shadow(0 4px 8px rgba(199, 35, 147, 0.08)); } body.theme-light .screen-frame::before { opacity: 0.25; } body.theme-light .screen-card:hover .screen-frame::before { opacity: 0.45; } body.theme-light .screen-frame img, body.theme-light .screen-inline img { filter: drop-shadow(0 16px 26px rgba(40, 25, 60, 0.18)) drop-shadow(0 4px 8px rgba(199, 35, 147, 0.08)); } /* ============================================================================= Responsive + accessibility ============================================================================= */ /* Landing page mobile: collapse nav + tighten hero. */ @media (max-width: 768px) { body.page-index .nav-links, body.page-cs .nav-links { display: none; } body.page-index .hero-meta { gap: 1.5rem; } body.page-index .hero-meta .item .val { font-size: 1.25rem; } body.page-index .hero { padding-top: 6rem; } } /* Respect reduced motion preference across all pages. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } /* ============================================================================= Light theme — applied via body.theme-light ============================================================================= Toggling the class swaps the core palette tokens (--bg-*, --ink-*, --accent-*, --holo, --glass-*) so most components recolor automatically. A handful of components hard-code white-tinted surfaces (slabs, form inputs, etc.) — those get explicit overrides below. ============================================================================= */ /* Smooth global transition when toggling between themes. */ html, body { transition: background-color 0.45s ease, color 0.45s ease; } .nav-wrap, .cta, .field input, .field textarea, .form-submit, .slab, .slab-visual, .method, .empathy-map, .empathy-cell, .phase .phase-viz, .rail-progress .bar { transition-property: background-color, background, border-color, color, box-shadow; transition-duration: 0.45s; transition-timing-function: ease; } body.theme-light { /* Base surfaces */ --bg-0: #f6f4ee; --bg-1: #ecead8; /* Ink ramp inverted — deep slate stack */ --ink-0: #0a0d1a; --ink-1: #1c2034; --ink-2: #4d5170; /* Accents: same hue family, deeper + more saturated to read on white */ --accent-cyan: #0e7490; --accent-purple: #6d28d9; --accent-pink: #be185d; --accent-blue: #1e40af; /* Holographic gradient: deeper stops, still rainbow-coherent */ --holo: linear-gradient(120deg, #0e7490 0%, #6d28d9 45%, #be185d 100%); --holo-warm: linear-gradient(120deg, #be185d 0%, #6d28d9 100%); /* Glass surfaces flip from white-on-dark to ink-on-light */ --glass-bg: rgba(10, 13, 26, 0.04); --glass-border: rgba(10, 13, 26, 0.10); } /* Per-page palette tweaks in light mode. */ body.theme-light.palette-pink { --holo: linear-gradient(120deg, #be185d 0%, #6d28d9 50%, #0e7490 100%); } body.theme-light.palette-blue { --holo: linear-gradient(120deg, #1e40af 0%, #0e7490 50%, #6d28d9 100%); } /* Radial ambient wash on body::before — re-tinted for the light bg. Lower alpha because dark accents on light bg saturate faster. */ body.theme-light::before { background: radial-gradient(1200px 800px at 15% 10%, rgba(14, 116, 144, 0.10), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(190, 24, 93, 0.08), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(109, 40, 217, 0.07), transparent 70%); } body.theme-light.palette-pink::before { background: radial-gradient(1200px 800px at 15% 10%, rgba(190, 24, 93, 0.11), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(14, 116, 144, 0.08), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(109, 40, 217, 0.07), transparent 70%); } body.theme-light.palette-blue::before { background: radial-gradient(1200px 800px at 15% 10%, rgba(30, 64, 175, 0.11), transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(14, 116, 144, 0.08), transparent 60%), radial-gradient(900px 600px at 50% 50%, rgba(109, 40, 217, 0.07), transparent 70%); } /* Top nav backdrop — flip the dark gradient to a light wash. */ body.theme-light .nav-wrap { background: linear-gradient( to bottom, rgba(246, 244, 238, 0.85), rgba(246, 244, 238, 0) ); } /* Primary CTA pill on landing page. */ body.theme-light .cta { border-color: rgba(10, 13, 26, 0.18); } body.theme-light .cta:hover { color: #f6f4ee; } /* Contact form fields. */ body.theme-light .field input, body.theme-light .field textarea { background: rgba(10, 13, 26, 0.03); border-color: rgba(10, 13, 26, 0.10); } body.theme-light .field input:focus, body.theme-light .field textarea:focus { border-color: rgba(14, 116, 144, 0.55); background: rgba(14, 116, 144, 0.05); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.10); } body.theme-light .form-submit { border-color: rgba(10, 13, 26, 0.18); } /* Work rail slabs. */ body.theme-light .slab:hover { background: rgba(10, 13, 26, 0.04); } body.theme-light .slab-visual { background: radial-gradient(420px 220px at 25% 25%, rgba(14, 116, 144, 0.10), transparent 60%), radial-gradient(420px 220px at 75% 75%, rgba(190, 24, 93, 0.07), transparent 60%), #fafaf2; border-color: rgba(10, 13, 26, 0.06); } body.theme-light .rail-progress .bar { background: rgba(10, 13, 26, 0.10); } /* SVG illustration recolor — re-tint hardcoded "ink" + "glass" fills so inline SVG art reads on the cream light-mode surface across the whole site (slab cards on the landing page, phase-viz on the case studies, process-viz on the IC case study). The SVGs hardcode light-on-dark colors as `fill`/`stroke` attributes (rgba(244,245,255,...) for ink, rgba(255,255,255,0.0X) for glass panels, plus a couple of hex literals). On the dark theme those vanish into the dark background correctly; on the light theme they vanish into the cream background incorrectly. CSS `fill`/`stroke` properties beat inline presentation attributes, so attribute selectors give us a no-touch theme map for the SVG markup. Each pair flips a light tier to its mirrored dark tier; alphas are tuned so the SVGs read with similar contrast in both themes. `:is(...)` lets one rule cover every illustration container without exploding the selector list. Smooth transitions on fill/stroke aren't in the global transition block above (they'd thrash on every shape), so we set them locally on illustration descendants only. */ body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.9)"] { fill: rgba(10, 13, 26, 0.86); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.85)"] { fill: rgba(10, 13, 26, 0.85); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.8)"] { fill: rgba(10, 13, 26, 0.82); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.75)"] { fill: rgba(10, 13, 26, 0.78); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.7)"] { fill: rgba(10, 13, 26, 0.72); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.6)"] { fill: rgba(10, 13, 26, 0.62); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.55)"] { fill: rgba(10, 13, 26, 0.58); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.5)"] { fill: rgba(10, 13, 26, 0.55); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.45)"] { fill: rgba(10, 13, 26, 0.48); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.4)"] { fill: rgba(10, 13, 26, 0.45); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.35)"] { fill: rgba(10, 13, 26, 0.40); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.3)"] { fill: rgba(10, 13, 26, 0.36); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.25)"] { fill: rgba(10, 13, 26, 0.32); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.2)"] { fill: rgba(10, 13, 26, 0.28); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.18)"] { fill: rgba(10, 13, 26, 0.24); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.10)"] { fill: rgba(10, 13, 26, 0.18); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.1)"] { fill: rgba(10, 13, 26, 0.18); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(244,245,255,0.08)"] { fill: rgba(10, 13, 26, 0.14); } /* Stroke variants */ body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [stroke="rgba(244,245,255,0.1)"] { stroke: rgba(10, 13, 26, 0.18); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [stroke="rgba(244,245,255,0.45)"] { stroke: rgba(10, 13, 26, 0.40); } /* White-tinted glass panels */ body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(255,255,255,0.06)"] { fill: rgba(10, 13, 26, 0.04); } body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="rgba(255,255,255,0.03)"] { fill: rgba(10, 13, 26, 0.025); } /* Hex literal that escaped the rgba pattern (smilemd "Patient · 047") */ body.theme-light :is(.slab-visual, .phase-viz, .process-viz) svg [fill="#f4f5ff"] { fill: #1c2034; } :is(.slab-visual, .phase-viz, .process-viz) svg text, :is(.slab-visual, .phase-viz, .process-viz) svg rect, :is(.slab-visual, .phase-viz, .process-viz) svg circle, :is(.slab-visual, .phase-viz, .process-viz) svg path, :is(.slab-visual, .phase-viz, .process-viz) svg polyline, :is(.slab-visual, .phase-viz, .process-viz) svg g { transition: fill 0.45s ease, stroke 0.45s ease; } /* Case-study method tiles + empathy map quadrants. */ body.theme-light .method { background: rgba(10, 13, 26, 0.025); } body.theme-light .method:hover { border-color: rgba(14, 116, 144, 0.30); background: rgba(14, 116, 144, 0.05); } body.theme-light.palette-pink .method:hover { border-color: rgba(190, 24, 93, 0.32); background: rgba(190, 24, 93, 0.05); } body.theme-light .empathy-map { background: rgba(10, 13, 26, 0.02); } body.theme-light .phase .phase-viz { background: radial-gradient(400px 200px at 20% 20%, rgba(190, 24, 93, 0.10), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(14, 116, 144, 0.08), transparent 60%), #fafaf2; } /* About section — portrait frame and CTAs re-tuned for the cream surface so the glass panel and hover states read with the deeper accent palette instead of the dark-mode cyan glow. */ body.theme-light .portrait-frame { background: linear-gradient(135deg, rgba(14, 116, 144, 0.07), rgba(190, 24, 93, 0.05)), rgba(10, 13, 26, 0.025); border-color: rgba(10, 13, 26, 0.10); box-shadow: 0 24px 48px -28px rgba(10, 13, 26, 0.25); } body.theme-light .about-cta { border-color: rgba(10, 13, 26, 0.18); } body.theme-light .about-cta:hover { border-color: rgba(14, 116, 144, 0.45); background: rgba(14, 116, 144, 0.06); } body.theme-light.palette-pink .about-cta:hover { border-color: rgba(190, 24, 93, 0.45); background: rgba(190, 24, 93, 0.06); } /* Resume page — re-tune section rules, contact underlines, work cards, and capability chips for the cream surface. */ body.theme-light .resume-section, body.theme-light .resume-footer { border-top-color: rgba(10, 13, 26, 0.08); } body.theme-light .resume-role + .resume-role { border-top-color: rgba(10, 13, 26, 0.06); } body.theme-light .resume-contact a span { border-bottom-color: rgba(10, 13, 26, 0.20); } body.theme-light .resume-footer a { border-bottom-color: rgba(10, 13, 26, 0.20); } body.theme-light .resume-contact a:hover, body.theme-light .resume-footer a:hover { color: #0e7490; } body.theme-light .resume-contact a:hover span, body.theme-light .resume-footer a:hover { border-color: #0e7490; } body.theme-light .resume-cta { border-color: rgba(10, 13, 26, 0.18); } body.theme-light .resume-cta:hover { border-color: rgba(14, 116, 144, 0.45); background: rgba(14, 116, 144, 0.06); } body.theme-light .resume-cta.primary { border-color: rgba(14, 116, 144, 0.45); background: rgba(14, 116, 144, 0.08); } body.theme-light .resume-cta.primary:hover { background: rgba(14, 116, 144, 0.14); } body.theme-light .resume-work { border-color: rgba(10, 13, 26, 0.10); background: rgba(10, 13, 26, 0.025); } body.theme-light .resume-work:hover { border-color: rgba(14, 116, 144, 0.30); background: rgba(14, 116, 144, 0.05); } body.theme-light .resume-work:hover .resume-work-arrow { color: #0e7490; } body.theme-light .resume-tags span { border-color: rgba(10, 13, 26, 0.12); background: rgba(10, 13, 26, 0.02); } body.theme-light .resume-bullets li::before { background: rgba(10, 13, 26, 0.40); } /* ============================================================================= Theme toggle (sun/moon pill in the nav) ============================================================================= */ .theme-toggle { position: relative; width: 56px; height: 28px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); cursor: pointer; padding: 0; margin-left: 1.5rem; flex-shrink: 0; transition: background 0.4s ease, border-color 0.4s ease; /* Reset the default button focus styling so we can match the holo aesthetic */ outline: none; } .theme-toggle:hover { border-color: var(--accent-cyan); } .theme-toggle:focus-visible { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(78, 232, 255, 0.18); } body.theme-light .theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18); } .theme-toggle .thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--holo); display: flex; align-items: center; justify-content: center; color: var(--bg-0); transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1), background 0.4s ease; } body.theme-light .theme-toggle .thumb { transform: translateX(28px); } .theme-toggle .thumb svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } body.theme-light .theme-toggle .icon-sun { display: block; } body.theme-light .theme-toggle .icon-moon { display: none; } /* On mobile, where nav-links collapse, keep the toggle visible. */ @media (max-width: 720px) { .theme-toggle { margin-left: auto; } } /* Wrapper for case-study nav: holds breadcrumb + toggle on the right side. */ .nav-right { display: flex; align-items: center; } /* ============================================================================= Back-to-top button ============================================================================= Floats at the bottom-right of every page. Hidden until the visitor has scrolled meaningfully down (≈600px), then fades in. Click smooth-scrolls to the top, with `prefers-reduced-motion` respected by the init script. Hidden in print and from screen-readers when not visible. */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink-1); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 50; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, border-color 0.25s ease, background 0.25s ease, color 0.25s ease; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s, border-color 0.25s ease, background 0.25s ease, color 0.25s ease; } .back-to-top:hover { border-color: rgba(78, 232, 255, 0.45); background: rgba(78, 232, 255, 0.10); color: var(--ink-0); transform: translateY(-2px); } .back-to-top:focus-visible { outline: none; border-color: rgba(78, 232, 255, 0.7); box-shadow: 0 0 0 3px rgba(78, 232, 255, 0.18); } .back-to-top svg { width: 18px; height: 18px; display: block; } /* Light-mode treatment — re-tune to deeper accent on cream surface. */ body.theme-light .back-to-top { border-color: rgba(10, 13, 26, 0.18); background: rgba(255, 255, 255, 0.65); color: rgba(10, 13, 26, 0.78); box-shadow: 0 10px 24px -14px rgba(10, 13, 26, 0.25); } body.theme-light .back-to-top:hover { border-color: rgba(14, 116, 144, 0.45); background: rgba(14, 116, 144, 0.08); color: rgba(10, 13, 26, 1); } body.theme-light.palette-pink .back-to-top:hover { border-color: rgba(190, 24, 93, 0.45); background: rgba(190, 24, 93, 0.08); } body.theme-light .back-to-top:focus-visible { border-color: rgba(14, 116, 144, 0.7); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18); } @media print { .back-to-top { display: none !important; } }