/* ============================================================ NEUMORPHIC PORTFOLIO — style.css Base color: #e0e5ec Shadow: #a3b1c6 / #ffffff Accent: #6c63ff (indigo-violet) Type: DM Sans (display + body) / DM Mono (utility) ============================================================ */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { --bg: #e0e5ec; --bg-alt: #d6dce8; --shadow-dk: #a3b1c6; --shadow-lt: #ffffff; --text-1: #2d3748; --text-2: #5a6887; --text-3: #8fa0ba; --accent: #6c63ff; --accent-2: #4f46e5; --edu: #38b2ac; --vol: #ed8936; --neu-outer: 6px 6px 12px var(--shadow-dk), -6px -6px 12px var(--shadow-lt); --neu-inner: inset 4px 4px 8px var(--shadow-dk), inset -4px -4px 8px var(--shadow-lt); --neu-flat: 3px 3px 6px var(--shadow-dk), -3px -3px 6px var(--shadow-lt); --neu-pressed: inset 2px 2px 5px var(--shadow-dk), inset -2px -2px 5px var(--shadow-lt); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', monospace; --grad-accent: linear-gradient(90deg, var(--accent), var(--accent-2)); --glow-color: rgba(108, 99, 255, 0.05); } /* ── DARK THEME (toggled via [data-theme="dark"] on ) ── */ [data-theme="dark"] { --bg: #22252b; --bg-alt: #1d2025; --shadow-dk: #16181d; --shadow-lt: #2e323a; --text-1: #e6e9f0; --text-2: #aab2c5; --text-3: #6b7689; --accent: #8b83ff; --accent-2: #a99dff; --edu: #4fd1c5; --vol: #f6ad55; --glow-color: rgba(139, 131, 255, 0.06); } /* ── RESET ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--bg); background-image: radial-gradient(ellipse 60% 50% at 8% 15%, var(--glow-color) 0%, transparent 70%); color: var(--text-1); line-height: 1.65; -webkit-font-smoothing: antialiased; /* deck is a fixed full-screen stage — lock page scroll */ height: 100vh; overflow: hidden; transition: background-color var(--transition), color var(--transition); } /* grain texture overlay — pointer-events: none so it never blocks clicks */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* ── NEU UTILITIES ────────────────────────────────────────── */ .neu-raised { box-shadow: var(--neu-outer); background: var(--bg); } .neu-inset { box-shadow: var(--neu-inner); background: var(--bg); } .neu-flat { box-shadow: var(--neu-flat); background: var(--bg); } /* press feedback — physical button depress on active */ .neu-raised:active, .neu-flat:active { box-shadow: var(--neu-pressed); } /* ── SCROLL PROGRESS BAR ──────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 200; will-change: transform; } /* ── NAV ─────────────────────────────────────────────────── */ .nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 900px; z-index: 100; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--neu-outer); transition: top var(--transition); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; } .nav-logo { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); } .nav-logo .dot { color: var(--accent); } .nav-links { display: flex; gap: 8px; } .nav-link { padding: 7px 16px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--text-2); transition: all var(--transition); } .nav-link:hover, .nav-link.active { color: var(--accent); box-shadow: var(--neu-inner); } /* ── MOBILE MENU ─────────────────────────────────────────── */ .mobile-menu { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 900px; background: var(--bg); box-shadow: var(--neu-outer); border-radius: var(--radius-lg); z-index: 99; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; pointer-events: none; } .mobile-menu.open { max-height: 400px; opacity: 1; pointer-events: auto; padding: 16px 0; } .mobile-menu ul { padding: 0 24px; } .mob-link { display: block; padding: 12px 0; font-size: 1rem; font-weight: 500; color: var(--text-2); border-bottom: 1px solid rgba(163,177,198,0.3); transition: color var(--transition); } .mob-link:last-child { border-bottom: none; } .mob-link:hover { color: var(--accent); } /* ── HERO ────────────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 20px 80px; } .hero-card { max-width: 620px; width: 100%; border-radius: var(--radius-xl); padding: 60px 52px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } /* hero entrance — card lifts in, children cascade */ @media (prefers-reduced-motion: no-preference) { .hero-card { opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .hero-card.loaded { opacity: 1; transform: translateY(0) scale(1); } .hero-card > * { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .hero-card.loaded > * { opacity: 1; transform: translateY(0); } .hero-card.loaded > *:nth-child(1) { transition-delay: 0.15s; } .hero-card.loaded > *:nth-child(2) { transition-delay: 0.25s; } .hero-card.loaded > *:nth-child(3) { transition-delay: 0.35s; } .hero-card.loaded > *:nth-child(4) { transition-delay: 0.45s; } .hero-card.loaded > *:nth-child(5) { transition-delay: 0.55s; } .hero-card.loaded > *:nth-child(6) { transition-delay: 0.65s; } } .hero-avatar { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media (prefers-reduced-motion: no-preference) { .hero-card.loaded .hero-avatar { animation: avatar-float 5s ease-in-out 1s infinite; } } @keyframes avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hero-name { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); } .hero-name .accent { background: var(--grad-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-title { font-size: 1.05rem; color: var(--accent); font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.02em; min-height: 1.6em; } .type-cursor { display: inline-block; margin-left: 2px; font-weight: 400; animation: cursor-blink 1s steps(1) infinite; } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .hero-tagline { font-size: 1rem; color: var(--text-2); max-width: 400px; line-height: 1.7; } .hero-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .chip { padding: 6px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--text-2); } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .btn-primary { padding: 13px 32px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; color: var(--accent); background-image: var(--grad-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all var(--transition); } .btn-primary:hover { box-shadow: var(--neu-inner); color: var(--accent-2); } .btn-ghost { padding: 13px 32px; border-radius: var(--radius-md); font-weight: 500; font-size: 0.95rem; color: var(--text-2); transition: all var(--transition); } .btn-ghost:hover { box-shadow: var(--neu-inner); color: var(--text-1); } /* ── SECTIONS ────────────────────────────────────────────── */ .section { padding: 100px 20px; } .section-alt { background: var(--bg-alt); } .container { max-width: 900px; margin: 0 auto; } .section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 56px; position: relative; display: inline-block; } .section-title .accent { color: var(--accent); } /* accent underline slides in when the title enters view */ .section-title::after { content: ''; position: absolute; left: 0; bottom: -14px; height: 3px; width: 56px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .section-title.visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .section-title::after { transform: scaleX(1); } } /* ── ABOUT ────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; } .about-bio { border-radius: var(--radius-lg); padding: 40px; } .about-bio p { color: var(--text-2); line-height: 1.8; margin-bottom: 16px; } .about-bio p:last-of-type { margin-bottom: 24px; } .about-links { display: flex; gap: 16px; } .icon-link { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: all var(--transition); } .icon-link svg { width: 20px; height: 20px; } .icon-link:hover { color: var(--accent); box-shadow: var(--neu-inner); } .skills-card { border-radius: var(--radius-lg); padding: 32px; } .skills-heading { font-size: 0.85rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; } .skill-tags { display: flex; flex-wrap: wrap; gap: 10px; } .skill-tag { padding: 7px 15px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; color: var(--text-2); font-family: var(--font-mono); transition: transform var(--transition), color var(--transition), box-shadow var(--transition); } .skill-tag:hover { transform: translateY(-2px); color: var(--accent); box-shadow: var(--neu-pressed); } /* cascade tags in when the skills card scrolls into view */ @media (prefers-reduced-motion: no-preference) { .skills-card .skill-tag { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease, color var(--transition), box-shadow var(--transition); } .skills-card.visible .skill-tag { opacity: 1; transform: translateY(0); } .skills-card.visible .skill-tag:nth-child(1) { transition-delay: 0.05s; } .skills-card.visible .skill-tag:nth-child(2) { transition-delay: 0.10s; } .skills-card.visible .skill-tag:nth-child(3) { transition-delay: 0.15s; } .skills-card.visible .skill-tag:nth-child(4) { transition-delay: 0.20s; } .skills-card.visible .skill-tag:nth-child(5) { transition-delay: 0.25s; } .skills-card.visible .skill-tag:nth-child(6) { transition-delay: 0.30s; } .skills-card.visible .skill-tag:nth-child(7) { transition-delay: 0.35s; } .skills-card.visible .skill-tag:nth-child(8) { transition-delay: 0.40s; } .skills-card.visible .skill-tag:nth-child(9) { transition-delay: 0.45s; } .skills-card.visible .skill-tag:nth-child(10) { transition-delay: 0.50s; } } /* ── TIMELINE ────────────────────────────────────────────── */ .timeline { position: relative; display: flex; flex-direction: column; gap: 0; } /* vertical rail */ .timeline::before { content: ''; position: absolute; left: 27px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(to bottom, var(--shadow-dk), transparent); border-radius: 2px; } .timeline-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; margin-bottom: 28px; opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .timeline-item.visible { opacity: 1; transform: translateY(0); } .timeline-marker { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; } .timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--grad-accent); box-shadow: 0 0 0 3px var(--bg), 0 0 10px rgba(108,99,255,0.4); position: relative; } .timeline-dot.edu-dot { background: var(--edu); box-shadow: 0 0 0 3px var(--bg), 0 0 10px rgba(56,178,172,0.4); } .timeline-dot.vol-dot { background: var(--vol); box-shadow: 0 0 0 3px var(--bg), 0 0 10px rgba(237,137,54,0.4); } /* sonar ripple — emanates from each dot */ @media (prefers-reduced-motion: no-preference) { .timeline-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: dot-ripple 2.8s ease-out infinite; } .timeline-dot.edu-dot::after { background: var(--edu); } .timeline-dot.vol-dot::after { background: var(--vol); } } @keyframes dot-ripple { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } } .timeline-content { border-radius: var(--radius-lg); padding: 28px 32px; flex: 1; } .timeline-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .timeline-role { font-size: 1.05rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; } .timeline-org { font-size: 0.9rem; font-weight: 500; color: var(--accent); font-family: var(--font-mono); } .timeline-date { padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-family: var(--font-mono); color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .timeline-bullets { padding-left: 0; margin-bottom: 16px; } .timeline-bullets li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 0.92rem; line-height: 1.7; margin-bottom: 8px; } .timeline-bullets li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); font-size: 0.75rem; top: 3px; } .timeline-tags { display: flex; gap: 8px; flex-wrap: wrap; } .mini-tag { padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-family: var(--font-mono); font-weight: 500; color: var(--accent); background: rgba(108,99,255,0.08); box-shadow: inset 1px 1px 3px rgba(163,177,198,0.5), inset -1px -1px 3px rgba(255,255,255,0.7); } /* ── AWARDS GRID ─────────────────────────────────────────── */ .awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .award-card { border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform var(--transition), box-shadow var(--transition); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow var(--transition); } .award-card.visible { opacity: 1; transform: translateY(0); } .award-card:hover { transform: translateY(-3px); box-shadow: 8px 8px 18px var(--shadow-dk), -8px -8px 18px var(--shadow-lt); } .award-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--text-1); } .award-icon svg { fill: currentColor; width: 32px; height: 32px; } .award-year { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); letter-spacing: 0.05em; } .award-title { font-size: 0.98rem; font-weight: 600; color: var(--text-1); margin: 2px 0; line-height: 1.4; } .award-org { font-size: 0.82rem; font-weight: 500; color: var(--accent); font-family: var(--font-mono); margin-bottom: 4px; } .award-desc { font-size: 0.86rem; color: var(--text-2); line-height: 1.65; } /* ── FOOTER ──────────────────────────────────────────────── */ .footer { padding: 40px 20px; text-align: center; } .footer-inner { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-copy { font-size: 0.85rem; color: var(--text-3); font-family: var(--font-mono); } .footer-link { font-size: 0.85rem; color: var(--text-2); font-weight: 500; transition: color var(--transition); } .footer-link:hover { color: var(--accent); } /* ── SCROLL ANIMATION ────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } [data-animate].visible { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-animate], .timeline-item, .award-card, .hero-card, .hero-card > *, .skills-card .skill-tag { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 860px) { .awards-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .nav-links { display: none; } .hamburger { display: flex; } .hero-card { padding: 44px 28px; } .awards-grid { grid-template-columns: 1fr; } .timeline::before { left: 20px; } .timeline-item { grid-template-columns: 44px 1fr; gap: 12px; } .timeline-marker { width: 44px; height: 44px; } .timeline-content { padding: 20px 20px; } .timeline-header { flex-direction: column; gap: 8px; } .footer-inner { flex-direction: column; text-align: center; padding: 24px; } } @media (max-width: 420px) { .hero-ctas { flex-direction: column; } .btn-primary, .btn-ghost { width: 100%; text-align: center; } .hero-chips { flex-direction: column; align-items: center; } } /* ════════════════════════════════════════════════════════════ SWIPEABLE CARD DECK ════════════════════════════════════════════════════════════ */ /* ── NAV actions (theme toggle + optional hamburger) ───────── */ .nav-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 40px; height: 40px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text-2); background: var(--bg); transition: color var(--transition), box-shadow var(--transition); } .theme-toggle:hover { color: var(--accent); box-shadow: var(--neu-inner); } /* ── NAV sliding title (faint prev · bold current · faint next) ── */ .nav-inner { position: relative; } .nav-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 14px; max-width: 70%; overflow: hidden; white-space: nowrap; pointer-events: none; /* re-enabled on the prev/next buttons */ } .nt-prev, .nt-next { border: none; background: none; cursor: pointer; pointer-events: auto; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--text-3); opacity: 0.55; padding: 0; transition: color var(--transition), opacity var(--transition); } .nt-prev:hover, .nt-next:hover { color: var(--accent); opacity: 1; } .nt-prev:empty, .nt-next:empty { visibility: hidden; } .nt-cur { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); } /* slide/fade the title in on each section change */ .nav-title.animate .nt-cur { animation: title-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nav-title.animate .nt-prev { animation: side-in-l 0.45s ease; } .nav-title.animate .nt-next { animation: side-in-r 0.45s ease; } @keyframes title-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes side-in-l { from { opacity: 0; transform: translateX(-6px); } to { opacity: 0.55; transform: translateX(0); } } @keyframes side-in-r { from { opacity: 0; transform: translateX(6px); } to { opacity: 0.55; transform: translateX(0); } } /* ── DECK / STAGE ──────────────────────────────────────────── */ .deck { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; /* clear the floating nav (top) and dots/hint (bottom) */ padding: 104px 20px 96px; } .deck-stage { position: relative; /* height is capped to the space left between nav and dots so the card never slides under the nav bar (fixes the overlap) */ width: min(92vw, 640px); height: min(640px, calc(100dvh - 210px)); perspective: 1600px; transform-style: preserve-3d; outline: none; /* we own horizontal gestures; vertical is handled in JS so the detail card can scroll while covers navigate */ touch-action: none; } /* ── CARD FRAME ────────────────────────────────────────────── */ /* desktop: the card body is NOT clickable — only the count pill, ↓/↑ cues, links and badges are. Pin the surface to the default arrow so the empty card never reads as "clickable, but nothing happens". */ .deck-card, .card-cover, .cover-inner, .card-body, .card-scroll { cursor: default; } .deck-card { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--radius-xl); overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; /* one consistent speed for both axes: 10% slower than the previous slowest (0.85s) -> 0.94s. JS removes this while dragging via .dragging */ transition: transform var(--card-dur, 0.94s) var(--card-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--op-dur, 0.66s) ease; } .deck-card.dragging { transition: none; } /* vertical (cover <-> detail) moves use the SAME timing as horizontal now */ .deck-stage.v-move { --card-dur: 0.94s; --op-dur: 0.66s; --card-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* in-card vertical scroll region */ .card-body { height: 100%; display: flex; flex-direction: column; } .card-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 44px 40px 52px; outline: none; scrollbar-width: thin; scrollbar-color: var(--shadow-dk) transparent; } .card-scroll::-webkit-scrollbar { width: 8px; } .card-scroll::-webkit-scrollbar-thumb { background: var(--shadow-dk); border-radius: 8px; } /* per-card heading */ .card-title { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 32px; } .card-title .accent { color: var(--accent); } /* ↓ / ↑ cues — clickable pills that navigate between stacked cards. Shown only on the front card (toggled via .has-more / .has-prev). */ .card-cue { position: absolute; left: 50%; z-index: 30; border: none; cursor: pointer; padding: 5px 15px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); background: var(--bg); box-shadow: var(--neu-flat); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, color var(--transition); } .card-cue:hover { color: var(--accent); } .card-cue:active { box-shadow: var(--neu-pressed); } .card-cue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card-cue--down { bottom: 14px; transform: translateX(-50%) translateY(6px); } .card-cue--up { top: 14px; transform: translateX(-50%) translateY(-6px); } .deck-card.has-more .card-cue--down { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); animation: cue-bob-down 1.8s ease-in-out infinite; } .deck-card.has-prev .card-cue--up { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); animation: cue-bob-up 1.8s ease-in-out infinite; } @keyframes cue-bob-down { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } } @keyframes cue-bob-up { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .deck-card.has-more .card-cue--down, .deck-card.has-prev .card-cue--up { animation: none; } } /* ── COVER cards (fixed, centered, never scroll) ───────────── */ .is-cover { overflow: hidden; } .card-cover { height: 100%; display: flex; align-items: center; justify-content: center; /* extra bottom pad reserves the "↓" cue band so content (e.g. the hero CTAs) never sits under the cue on short screens (iPhone SE) */ padding: 40px 38px 58px; } .cover-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; width: 100%; max-width: 480px; } .cover-title { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); line-height: 1.15; } .cover-title .accent { background: var(--grad-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cover-count { font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent); padding: 6px 18px; border-radius: 999px; box-shadow: var(--neu-flat); cursor: pointer; transition: all var(--transition); } /* resting = raised accent pill; hover presses IN like the hero CTA buttons */ .cover-count:hover { box-shadow: var(--neu-inner); color: var(--accent-2); } .cover-count:active { box-shadow: var(--neu-pressed); } .cover-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cover-hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); margin-top: 6px; } /* HERO cover (restored landing card) */ .hero-cover .cover-inner { gap: 18px; } .hero-cover .hero-avatar { width: clamp(120px, 22vh, 168px); height: clamp(120px, 22vh, 168px); } .hero-cover .hero-name { font-size: clamp(1.9rem, 5vw, 2.6rem); } .hero-cover .hero-title { min-height: 1.6em; } .hero-cover .hero-ctas { margin-top: 10px; } /* SKILLS cover (single fixed card) */ .skills-cover .skill-tags { justify-content: center; margin-top: 8px; } /* ABOUT detail (scrollable card below the hero) */ .about-bio-block p { color: var(--text-2); line-height: 1.8; margin-bottom: 14px; } .about-bio-block { margin-bottom: 22px; } .deck-card .about-links { justify-content: flex-start; } /* DETAIL cards keep the ↓/↑ cues out of the scroll flow */ .is-scroll .card-scroll { padding-top: 56px; padding-bottom: 56px; } /* awards fit the fixed card width */ .deck-card .awards-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } /* timeline rail tighter inside a card */ .deck-card .timeline-item { margin-bottom: 22px; } /* ── PROJECT STATUS DOT (live / in-progress) ───────────────── */ .timeline-content.has-status { position: relative; } .project-status { position: absolute; top: 16px; right: 16px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); } .project-status--live { background: #22c55e; } .project-status--wip { background: #eab308; } .project-status--nda {background: #847ffc} .project-status::after { content: ''; position: absolute; inset: 0; border-radius: 50%; } .project-status--live::after { background: #22c55e; } .project-status--wip::after { background: #eab308; } .project-status--nda::after { background: #847ffc } @media (prefers-reduced-motion: no-preference) { .project-status::after { animation: status-pulse 2.2s ease-out infinite; } } @keyframes status-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ── ACCESSIBILITY callout (About card) ────────────────────── */ .about-a11y { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--radius-md); margin-bottom: 22px; } .a11y-icon { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; } .a11y-text { font-size: 0.9rem; color: var(--text-2); line-height: 1.65; margin: 0; } /* ── RESUME POINTER (hero top-right) ─────────────────────────── REVERT: delete this whole block + the heroCover append in js/registry.js. PDF lives at assets/resume.pdf. */ .hero-resume { position: absolute; top: 16px; right: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--text-2); transition: color var(--transition), box-shadow var(--transition), transform var(--transition); } .hero-resume:hover { color: var(--accent); transform: translateY(-2px); } .hero-resume:active { box-shadow: var(--neu-pressed); } .hero-resume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hero-resume-doc { font-size: 0.95rem; } @media (prefers-reduced-motion: no-preference) { .hero-resume { animation: resume-pulse 2.6s ease-in-out infinite; } } @keyframes resume-pulse { 0%, 100% { box-shadow: var(--neu-flat); } 50% { box-shadow: var(--neu-outer); } } @media (max-width: 420px) { .hero-resume-label { display: none; } .hero-resume { padding: 8px; } } /* ── GALLERY ───────────────────────────────────────────────── */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .gallery-item { display: block; width: 100%; text-align: left; border: none; cursor: pointer; padding: 10px; border-radius: var(--radius-md); background: var(--bg); transition: transform var(--transition), box-shadow var(--transition); } .gallery-item:hover { transform: translateY(-3px); } .gallery-item:active { box-shadow: var(--neu-pressed); } .gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gallery-figure { margin: 0; } .gallery-img, .gallery-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; box-shadow: var(--neu-inner); } .gallery-placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--text-3); background: var(--bg-alt); } .gallery-caption { margin-top: 10px; font-size: 0.8rem; color: var(--text-2); font-family: var(--font-mono); line-height: 1.4; } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } /* gallery: category tabs + per-tile photo count */ .gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .gallery-tab { border: none; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-md); background: var(--bg); color: var(--text-2); font-family: var(--font-mono); font-size: 0.8rem; transition: color var(--transition), box-shadow var(--transition); } .gallery-tab.active { color: var(--accent); box-shadow: var(--neu-pressed); } .gallery-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gallery-panel[hidden] { display: none; } .gallery-figure { position: relative; } .gallery-count { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--neu-outer); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-2); } .gallery-empty { color: var(--text-3); font-family: var(--font-mono); font-size: 0.85rem; } /* org sub-heading inside a gallery panel (Volunteering → org → events) */ .gallery-block-title { margin: 22px 0 12px; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; } .gallery-block-title:first-child { margin-top: 4px; } /* ▶ overlay on a tile whose event includes a video */ .gallery-video-badge { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-outer); font-size: 0.75rem; color: var(--accent); } /* ── PHOTO BADGE (item-level carousel trigger) ─────────────── */ .photo-badge { margin-top: 12px; border: none; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-md); background: var(--bg); color: var(--text-2); font-family: var(--font-mono); font-size: 0.75rem; transition: transform var(--transition), box-shadow var(--transition), color var(--transition); } .photo-badge:hover { transform: translateY(-2px); color: var(--accent); } .photo-badge:active { box-shadow: var(--neu-pressed); } .photo-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── CAROUSEL LIGHTBOX ─────────────────────────────────────── */ body.lightbox-open { overflow: hidden; } .lightbox-overlay { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); } .lightbox-overlay.open { display: flex; } .lightbox-dialog { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 920px); max-height: 90vh; padding: 18px; border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--neu-outer); } .lightbox-figure { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; touch-action: pan-y; min-height: 80px; } .lightbox-img, .lightbox-video { max-width: 100%; max-height: 70vh; border-radius: var(--radius-sm); object-fit: contain; box-shadow: var(--neu-inner); } .lightbox-img.fade-in { animation: lightbox-fade 0.25s ease; } .lightbox-video { width: min(80vw, 820px); background: #000; animation: lightbox-fade 0.25s ease; } .lightbox-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border: 3px solid var(--bg-alt); border-top-color: var(--accent); border-radius: 50%; animation: lb-spin 0.7s linear infinite; pointer-events: none; z-index: 1; } .lightbox-spinner[hidden] { display: none; } @keyframes lb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .lightbox-img[hidden], .lightbox-video[hidden] { display: none; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .lightbox-caption { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); text-align: center; min-height: 1em; } .lightbox-close, .lightbox-nav { border: none; cursor: pointer; border-radius: 50%; background: var(--bg); color: var(--text-1); display: flex; align-items: center; justify-content: center; transition: transform var(--transition), box-shadow var(--transition), color var(--transition); } .lightbox-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.1rem; z-index: 1; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; } .lightbox-prev { left: -22px; } .lightbox-next { right: -22px; } /* single-image carousel: JS sets .hidden, but display:flex above would override the UA [hidden] rule — force it off here */ .lightbox-nav[hidden] { display: none; } .lightbox-close:hover, .lightbox-nav:hover { color: var(--accent); } .lightbox-close:active, .lightbox-nav:active { box-shadow: var(--neu-pressed); } .lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lightbox-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .lightbox-dot { width: 9px; height: 9px; border: none; border-radius: 50%; cursor: pointer; background: var(--bg); box-shadow: var(--neu-inner); transition: background var(--transition); } .lightbox-dot.active { background: var(--accent); } .lightbox-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 560px) { .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } .lightbox-nav { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .lightbox-img, .lightbox-video { animation: none; } .lightbox-spinner { animation: none; font-size: 0; } .lightbox-spinner::after { content: "Loading\2026"; font-size: 0.8rem; color: var(--text-2); } } /* ── SKIP LINK (keyboard a11y) ─────────────────────────────── */ .skip-link { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -160%); z-index: 300; padding: 10px 20px; border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--neu-outer); color: var(--accent); font-weight: 600; font-size: 0.85rem; transition: transform 0.2s ease; } .skip-link:focus { transform: translate(-50%, 0); outline: 2px solid var(--accent); } /* award / cert clickable titles */ .award-link { color: inherit; transition: color var(--transition); } .award-link:hover { color: var(--accent); text-decoration: underline; } /* ── KEYBOARD FOCUS RINGS (a11y) ───────────────────────────── */ .deck-stage:focus-visible, .deck-dot:focus-visible, .deck-arrow:focus-visible, .nt-prev:focus-visible, .nt-next:focus-visible, .theme-toggle:focus-visible, .icon-link:focus-visible, .timeline-org:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── PROGRESS DOTS ─────────────────────────────────────────── */ .deck-dots { position: fixed; left: 50%; bottom: 50px; transform: translateX(-50%); display: flex; gap: 12px; z-index: 90; } .deck-dot { width: 11px; height: 11px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: var(--bg); box-shadow: var(--neu-flat); transition: all var(--transition); } .deck-dot:hover { box-shadow: var(--neu-inner); } .deck-dot.active { width: 30px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--neu-pressed); } /* ── SWIPE HINT ────────────────────────────────────────────── */ .swipe-hint { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-3); font-family: var(--font-mono); z-index: 85; opacity: 0.9; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .swipe-hint.hidden { opacity: 0; transform: translateX(-50%) translateY(8px); } .hint-arrow { font-size: 1.3rem; color: var(--accent); animation: hint-nudge 1.8s ease-in-out infinite; } .hint-arrow:last-child { animation-delay: 0.9s; } @keyframes hint-nudge { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 1; } } .hint-keys { display: none; } /* desktop-only, swapped in below */ @media (hover: hover) and (pointer: fine) { .hint-touch { display: none; } .hint-keys { display: inline; } } /* ── LEFT / RIGHT ARROWS (persistent swipe hint + click control) ── */ .deck-arrow { position: fixed; top: 50%; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--bg); box-shadow: var(--neu-outer); color: var(--text-2); font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 88; display: flex; align-items: center; justify-content: center; transition: color var(--transition), box-shadow var(--transition); } .deck-arrow:hover { color: var(--accent); } .deck-arrow:active { box-shadow: var(--neu-pressed); } /* sit just outside the 640px card on wide screens, hug the edge on small */ .deck-arrow--left { left: max(12px, calc(50% - 372px)); } .deck-arrow--right { right: max(12px, calc(50% - 372px)); } /* subtle nudge to read as "swipe this way" */ @media (prefers-reduced-motion: no-preference) { .deck-arrow--left { animation: arrow-nudge-l 2.4s ease-in-out infinite; } .deck-arrow--right { animation: arrow-nudge-r 2.4s ease-in-out infinite; } } @keyframes arrow-nudge-l { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-4px); } } @keyframes arrow-nudge-r { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(4px); } } /* ── FOOTER (slim, fixed bottom-right) ─────────────────────── */ .footer { position: fixed; right: 18px; bottom: 14px; z-index: 80; padding: 0; } .footer-copy { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); opacity: 0.7; } /* ── REDUCED MOTION — crossfade only, no 3D ────────────────── */ .deck-stage.reduce-motion .deck-card { transition: opacity 0.3s ease; } /* ── RESPONSIVE — near-fullscreen card on mobile ───────────── */ @media (max-width: 640px) { .deck { padding: 92px 12px 84px; } .deck-stage { width: 94vw; height: min(640px, calc(100dvh - 184px)); } .card-scroll { padding: 32px 24px 48px; } .card-cover { padding: 28px 22px 52px; } .swipe-hint { bottom: 66px; } /* the sliding title prev/next labels crowd a small bar — keep current only */ .nav-title { max-width: 56%; gap: 10px; } .nt-prev, .nt-next { display: none; } /* on mobile, navigate via swipe + dots — hide the side arrows */ .deck-arrow { display: none; } } @media (max-width: 420px) { .deck-stage { height: min(640px, calc(100dvh - 176px)); } } /* short viewports (e.g. iPhone SE) — tighten the hero so it fits above the cue band without clipping */ @media (max-height: 720px) { .hero-cover .cover-inner { gap: 12px; } .hero-cover .hero-avatar { width: clamp(92px, 17vh, 130px); height: clamp(92px, 17vh, 130px); } .hero-cover .hero-tagline { font-size: 0.95rem; } .hero-cover .hero-ctas { margin-top: 4px; } }