/* ========================================================= TOKENS ========================================================= */ :root { --bg: #fdfdfb; --ink: #14141a; --ink-invert: #fff; /* text/icon color sitting on an ink-filled surface (primary btn, hovers) */ --muted: #6b6b76; --placeholder: #a8a8b3; --line: rgba(20, 20, 26, 0.09); --card: rgba(255, 255, 255, 0.6); --card-border: rgba(20, 20, 26, 0.08); --shadow-rgb: 20, 20, 26; /* used inside rgba() for drop shadows */ /* translucent white surfaces used for pills/inputs/dock at various strengths */ --surface: rgba(255, 255, 255, 0.5); --surface-strong: rgba(255, 255, 255, 0.55); --surface-input: rgba(255, 255, 255, 0.6); --surface-dock: rgba(255, 255, 255, 0.72); --surface-solid: #fff; /* fully opaque hover state (topbar cta, contact card, focused input) */ --violet: #7c3aed; --pink: #ec4899; --green: #10b981; --send-text: #06301f; --error-border: #e0796f; --error-text: #c2564a; --blob-violet: #b9a4f7; --blob-pink: #f8b4d9; --blob-green: #9be8c9; --blob-blue: #a9c7f7; --blob-coral: #fbc8a3; --radius: 18px; --radius-sm: 10px; --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --max-w: 780px; } /* ========================================================= DARK MODE Same layout, same behavior — only the palette changes. Toggled by JS setting data-theme="dark" on (see setupThemeToggle in script.js); persisted in localStorage. ========================================================= */ html[data-theme="dark"] { --bg: #0b0b10; --ink: #f1f1f5; --ink-invert: #0b0b10; --muted: #9b9ba8; --placeholder: #6b6b78; --line: rgba(255, 255, 255, 0.09); --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.1); --shadow-rgb: 0, 0, 0; --surface: rgba(255, 255, 255, 0.06); --surface-strong: rgba(255, 255, 255, 0.07); --surface-input: rgba(255, 255, 255, 0.06); --surface-dock: rgba(20, 20, 26, 0.72); --surface-solid: #1a1a22; --violet: #a78bfa; --pink: #f472b6; --green: #34d399; --send-text: #06301f; --error-border: #e0796f; --error-text: #ff8a7a; } /* Smooth crossfade when the theme flips. Many components (buttons, cards, pills, dock icons) declare their own faster `transition:` list for hover effects, and that list often includes the same background-color/color/border-color properties as the crossfade below — so it silently replaced the slow crossfade with the fast hover speed, making theme switches look instant on anything with a hover state. Fix: keep hover transitions exactly as they are, and only during the ~0.8s window right after a theme toggle, add `theme-transitioning` to (see setupThemeToggle in script.js). While that class is present, every element is forced onto the slow crossfade regardless of its own transition list; the class is removed right after, so hover speed elsewhere is completely unaffected. prefers-reduced-motion below still forces this to near-instant for anyone who wants that. */ *, *::before, *::after { transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), color 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1), fill 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.8s cubic-bezier(0.4, 0, 0.2, 1); } html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), color 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1), fill 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Applied to while the project-detail overlay is open, to stop the page behind it from scrolling; removed on close (see setupProjectDetail in script.js). */ html.pd-scroll-lock, html.pd-scroll-lock body { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--violet); color: var(--ink-invert); } a { color: inherit; text-decoration: none; } /* ========================================================= INK-IN-WATER PAINT BACKGROUND A single canvas painted with fading ink blots, blurred and multiply-blended against the white page so colors mix like pigment spreading through water. Idle = plain white. ========================================================= */ .paint-canvas { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; pointer-events: none; filter: blur(34px); mix-blend-mode: multiply; opacity: 0.9; will-change: filter; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* The WebGL fluid sim already computes its own final color against white in the shader, so it skips the blur/multiply stack the 2D fallback needs — that stack would just smear away the fine swirl detail that's the reason to use it. A light saturate/contrast boost here just makes the ink blooms a bit easier to notice against the near-white page — dark mode's own filter override below replaces this value entirely, so it's unaffected. */ .paint-canvas--gl { filter: saturate(1.4) contrast(1.08); mix-blend-mode: normal; opacity: 1; will-change: filter; transition: filter 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* The fluid sim's shader math composites its dye as "ink absorbed from white paper" (see script.js), so it always renders a white base with colored blooms. Inverting it in dark mode turns that white base into near-black and keeps the color blooms vivid — same simulation, same physics, just recolored for a dark page. The 2D fallback instead switches its blend mode, since its drops are painted with alpha directly rather than baked against a white base. */ html[data-theme="dark"] .paint-canvas--gl { filter: invert(1) hue-rotate(180deg); } html[data-theme="dark"] .paint-canvas:not(.paint-canvas--gl) { mix-blend-mode: screen; opacity: 0.7; } /* ========================================================= TOPBAR ========================================================= */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); backdrop-filter: blur(6px); } .topbar-actions { display: flex; align-items: center; } .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; } .brand-dot { color: var(--violet); } .topbar-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--surface-strong); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .topbar-cta:hover { transform: translateY(-1px); background: var(--surface-solid); border-color: var(--violet); } /* ========================================================= THEME TOGGLE ========================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 34px; padding: 0 14px; margin-left: 10px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--surface-strong); color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--violet); color: var(--violet); } .theme-toggle .label-dark { display: none; } html[data-theme="dark"] .theme-toggle .label-light { display: none; } html[data-theme="dark"] .theme-toggle .label-dark { display: inline; } /* ========================================================= LAYOUT / SECTIONS ========================================================= */ main { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(20px, 6vw, 32px); } .section { padding: 96px 0 64px; border-bottom: 1px solid var(--line); } .section:last-of-type { border-bottom: none; } .section-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--violet); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; } .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 32px; } /* ========================================================= HERO ========================================================= */ .hero { padding-top: 148px; border-bottom: 1px solid var(--line); } .eyebrow { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin: 0 0 20px; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 24px; } .ink-accent { color: var(--violet); } .hero-italic { font-style: italic; font-weight: 500; color: var(--pink); } .hero-sub { max-width: 560px; font-size: 1.05rem; color: var(--muted); margin: 0 0 36px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; } .btn { font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; padding: 13px 24px; border-radius: 999px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; border: 1px solid transparent; } .btn--primary { background: var(--ink); color: var(--ink-invert); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.22); } .btn--ghost { border-color: var(--card-border); background: var(--surface); color: var(--ink); } .btn--ghost:hover { transform: translateY(-2px); border-color: var(--violet); color: var(--violet); } .social-row { display: flex; gap: 12px; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--surface); color: var(--ink); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; } .social-icon:hover { transform: translateY(-2px); background: var(--ink); color: var(--ink-invert); } /* ========================================================= ABOUT ========================================================= */ .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; } .about-lead { font-size: 1.05rem; color: var(--ink); margin: 0; } .about-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 0.92rem; } .about-facts li { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .about-facts li span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================= PROJECTS ========================================================= */ .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .project-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--card); backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .project-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.1); border-color: var(--violet); } .project-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .project-card:active { transform: translateY(-1px); } .project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .project-card h3 { font-family: var(--font-display); font-size: 1.08rem; margin: 0; letter-spacing: -0.01em; } .project-card-link { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--card-border); color: var(--muted); transition: all 0.25s ease; } .project-card:hover .project-card-link { border-color: var(--violet); color: var(--violet); } .project-card p { margin: 0; font-size: 0.92rem; color: var(--muted); flex-grow: 1; } .project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .project-tags span { font-family: var(--font-mono); font-size: 0.68rem; padding: 4px 9px; border-radius: 999px; background: rgba(124, 58, 237, 0.08); color: var(--violet); } /* Status badge + Try Demo — shown on the card itself, before the detail window is ever opened. Reused verbatim inside the detail header so the badge language stays consistent in both places. */ .project-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .project-card-meta-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .project-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); } .project-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .project-status[data-status="open-source"] .project-status-dot { background: var(--green); } .project-status[data-status="in-development"] .project-status-dot { background: var(--pink); } .project-status[data-status="research"] .project-status-dot { background: var(--violet); } .project-demo-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.72rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--surface); color: var(--ink); transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .project-demo-btn:hover { transform: translateY(-1px); border-color: var(--violet); color: var(--violet); background: var(--surface-solid); } .project-demo-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } /* ========================================================= SKILLS ========================================================= */ .skills-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .skill-pill { font-family: var(--font-mono); font-size: 0.85rem; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--surface-strong); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .skill-pill:hover { transform: translateY(-2px) rotate(-1deg); background: var(--ink); color: var(--ink-invert); border-color: var(--ink); } /* ========================================================= CONTACT ========================================================= */ .contact-sub { color: var(--muted); margin: -16px 0 32px; max-width: 480px; } .contact-grid { display: grid; gap: 12px; } .contact-card { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .contact-card:hover { transform: translateX(4px); border-color: var(--violet); background: var(--surface-solid); } .contact-card-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .contact-card-value { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } /* ========================================================= MESSAGE FORM ========================================================= */ .message-form { margin-top: 18px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--card); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .field .required { color: var(--green); } .field input, .field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--surface-input); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 12px 14px; resize: vertical; transition: border-color 0.25s ease, background 0.25s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--placeholder); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--violet); background: var(--surface-solid); } .field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown) { border-color: var(--error-border); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .message-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .form-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } .btn--send { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: var(--send-text); } .btn--send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 185, 129, 0.35); } .btn--send:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .form-status { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; min-height: 1.2em; } .form-status[data-state="success"] { color: var(--green); } .form-status[data-state="error"] { color: var(--error-text); } /* ========================================================= FOOTER ========================================================= */ .footer { padding: 40px 0 160px; text-align: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); } /* ========================================================= DOCK NAV ========================================================= */ .dock { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; gap: 4px; padding: 8px; border-radius: 999px; background: var(--surface-dock); border: 1px solid var(--card-border); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.12); } .dock-item { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; color: var(--muted); transition: background 0.25s ease, color 0.25s ease; } .dock-item span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.3s ease; } .dock-item:hover span, .dock-item.is-active span { max-width: 80px; } .dock-item:hover, .dock-item.is-active { background: var(--ink); color: var(--ink-invert); } /* ========================================================= PROJECT DETAIL OVERLAY Custom case-study panel opened from a project card. Uses the same surfaces/blur/radius/font language as the rest of the site (see .message-form, .project-card) rather than a generic modal look. The WebGL fluid background keeps running underneath — this only layers translucent surfaces + blur on top of it. ========================================================= */ .pd-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); pointer-events: none; opacity: 0; transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .pd-overlay.is-open { pointer-events: auto; opacity: 1; } .pd-backdrop { position: absolute; inset: 0; background: rgba(var(--shadow-rgb), 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme="dark"] .pd-backdrop { background: rgba(0, 0, 0, 0.55); } /* Panel surface — same glass-card recipe used everywhere else on the site (project cards, skill pills): var(--card) + blur(10px). Matching it exactly (not a stronger/different blur) is what makes the window read as the same material as the rest of the page. */ .pd-panel { position: relative; width: min(94vw, 760px); max-height: min(86vh, 880px); border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--card); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 40px 90px rgba(var(--shadow-rgb), 0.28); overflow: hidden; opacity: 0; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease; } .pd-overlay.is-open .pd-panel { opacity: 1; } /* Light mode's --card tint (0.6 opacity white) was the main thing washing out the fluid behind the panel — dial it back further here, specifically for light mode. Dark mode keeps the blur it already had (its --card tint is only 0.05 opacity, so it wasn't the issue). */ html:not([data-theme="dark"]) .pd-panel { background: rgba(255, 255, 255, 0.4); } html[data-theme="dark"] .pd-panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Applied only while the open/close FLIP morph is actively animating the panel's transform (see script.js). backdrop-filter and a large box-shadow both have to be recomputed every frame on an element whose size is changing via scale() — that's the main cost behind a scale animation feeling laggy, especially layered over the WebGL fluid background. Dropping them just for the ~0.4s of motion and restoring them at rest keeps the same resting look at a fraction of the per-frame cost. */ .pd-panel--morphing { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; will-change: transform, opacity; } .pd-close { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--surface-strong); backdrop-filter: blur(10px); color: var(--muted); cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .pd-close:hover { transform: rotate(90deg); border-color: var(--violet); color: var(--violet); } .pd-close:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .pd-scroll { max-height: min(86vh, 880px); overflow-y: auto; overscroll-behavior: contain; padding: 52px clamp(24px, 5vw, 56px) 48px; -webkit-overflow-scrolling: touch; border-radius: inherit; scrollbar-width: thin; scrollbar-color: var(--card-border) transparent; } .pd-scroll::-webkit-scrollbar { width: 8px; } .pd-scroll::-webkit-scrollbar-track { background: transparent; } .pd-scroll::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 999px; } .pd-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); } .pd-header { margin-bottom: 8px; } .pd-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -0.02em; margin: 0 0 12px; padding-right: 44px; } .pd-desc { color: var(--ink); font-size: 1rem; max-width: 600px; margin: 0 0 18px; } .pd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .pd-tech { display: flex; flex-wrap: wrap; gap: 6px; } .pd-tech span { font-family: var(--font-mono); font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; background: rgba(124, 58, 237, 0.08); color: var(--violet); } .pd-section { padding: 30px 0; border-bottom: 1px solid var(--line); will-change: transform, opacity; } .pd-section:last-of-type { border-bottom: none; } .pd-eyebrow { font-family: var(--font-mono); font-size: 0.76rem; color: var(--violet); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; } .pd-body { font-size: 0.98rem; color: var(--ink); max-width: 620px; margin: 0; } .pd-body p + p { margin-top: 10px; } .pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 620px; } .pd-list li { position: relative; padding-left: 20px; font-size: 0.95rem; } .pd-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); } .pd-flow { display: flex; flex-direction: column; align-items: center; max-width: 420px; margin: 0 auto; } .pd-flow-step { width: 100%; text-align: center; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card); font-family: var(--font-mono); font-size: 0.82rem; } .pd-flow-arrow { color: var(--muted); font-size: 0.85rem; line-height: 1; padding: 6px 0; } .pd-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 32px; } .pd-actions .btn { display: inline-flex; align-items: center; gap: 7px; } /* Scroll-linked motion (see setupProjectDetailScrollMotion in script.js): opacity/translate are recalculated every frame from the live scroll position, so they're set with plain inline styles and deliberately have NO transition here — a transition on top of an already-continuous per-frame value fights it and reads as lag rather than smooth motion. */ /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } .project-grid { grid-template-columns: 1fr; } .dock-item span { display: none; } .dock { gap: 2px; } .topbar-cta span { display: none; } .hero { padding-top: 120px; } .footer { padding-bottom: 120px; } .pd-overlay { padding: 0; } .pd-panel { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border-left: none; border-right: none; } .pd-scroll { max-height: 100vh; padding: 44px 20px 40px; } .pd-title { padding-right: 40px; } } /* ========================================================= ACCESSIBILITY ========================================================= */ a:focus-visible, button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blob { transition: none !important; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .pd-panel { transform: none !important; } .pd-section { opacity: 1 !important; transform: none !important; } }