/* ============================================================ DESIGN TOKENS Palette: deep space navy base, three accents drawn from the three "worlds" the site talks about — teal = precision / systems (Odoo, software) violet = play / interactivity (games) amber = machinery / industry (manufacturing, ERP floor work) Type: Sora for display type, IBM Plex Sans for body/UI text. ============================================================ */ :root { --bg: #07060f; --bg-alt: #0c0a1a; --surface: #14122a; --surface-2: #1c1938; --border: #322c58; --text: #f5f3ff; --text-muted: #aca8d4; --text-dim: #746fa0; /* brighter, more saturated accent trio */ --teal: #00f5c4; --violet: #c64bff; --amber: #ff9d2e; --pink: #ff4fd8; --blue: #4f9dff; --teal-soft: rgba(0, 245, 196, 0.14); --violet-soft: rgba(198, 75, 255, 0.14); --amber-soft: rgba(255, 157, 46, 0.14); --pink-soft: rgba(255, 79, 216, 0.14); --glow-teal: 0 0 32px rgba(0, 245, 196, 0.45); --glow-violet: 0 0 32px rgba(198, 75, 255, 0.45); --glow-amber: 0 0 32px rgba(255, 157, 46, 0.45); --glow-pink: 0 0 32px rgba(255, 79, 216, 0.4); --font-display: "Sora", sans-serif; --font-body: "IBM Plex Sans", sans-serif; --maxw: 1180px; --pad: clamp(24px, 5vw, 64px); --grid-line: rgba(255, 255, 255, 0.03); --nav-bg: rgba(9, 10, 17, 0.7); --btn-ink: #07060f; --select-ink: #06110d; color-scheme: dark; } /* ============================================================ LIGHT THEME Toggled by setting data-theme="light" on (see the inline script in , which reads the choice before first paint so there's no flash of the wrong theme). Every component in this file reads color through the custom properties above, so this single block re-themes the entire site — nothing below this point needs to know which theme is active. ============================================================ */ html[data-theme="light"] { --bg: #f5f4fb; --bg-alt: #ecebf7; --surface: #ffffff; --surface-2: #f3f1fb; --border: #ddd9f0; --text: #17152e; --text-muted: #4b466e; --text-dim: #837fa6; --teal: #00967d; --violet: #8a2be6; --amber: #c2660a; --pink: #c31aa0; --blue: #1f66d6; --teal-soft: rgba(0, 150, 125, 0.10); --violet-soft: rgba(138, 43, 230, 0.09); --amber-soft: rgba(194, 102, 10, 0.10); --pink-soft: rgba(195, 26, 160, 0.09); --glow-teal: 0 0 26px rgba(0, 150, 125, 0.25); --glow-violet: 0 0 26px rgba(138, 43, 230, 0.22); --glow-amber: 0 0 26px rgba(194, 102, 10, 0.22); --glow-pink: 0 0 26px rgba(195, 26, 160, 0.2); --grid-line: rgba(23, 21, 46, 0.05); --nav-bg: rgba(245, 244, 251, 0.78); --btn-ink: #fbfaff; --select-ink: #ffffff; color-scheme: light; } html[data-theme="light"] .bg-grid { opacity: 0.7; } html[data-theme="light"] .hero-canvas-label, html[data-theme="light"] .scroll-cue { border-color: var(--border); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } ::selection { background: var(--teal); color: var(--select-ink); } /* ---------- global keyframes ---------- */ @keyframes float-y { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-22px) translateX(10px); } } @keyframes float-y-slow { 0%, 100% { transform: translateY(0) translateX(0) scale(1); } 50% { transform: translateY(18px) translateX(-14px) scale(1.05); } } @keyframes aurora-drift { 0% { transform: translate(-5%, -5%) rotate(0deg) scale(1); } 33% { transform: translate(5%, 8%) rotate(8deg) scale(1.1); } 66% { transform: translate(-8%, 4%) rotate(-6deg) scale(0.95); } 100% { transform: translate(-5%, -5%) rotate(0deg) scale(1); } } @keyframes gradient-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0px rgba(0, 245, 196, 0.0); } 50% { box-shadow: 0 0 22px rgba(0, 245, 196, 0.55); } } @keyframes pop-in { 0% { opacity: 0; transform: translateY(24px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes blink-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes bounce-cue { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(0); } } /* scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 200; background: linear-gradient(90deg, var(--teal), var(--violet), var(--pink), var(--amber)); background-size: 300% 100%; animation: gradient-pan 6s linear infinite; box-shadow: 0 0 12px rgba(198, 75, 255, 0.6); transition: width 0.1s ease-out; } /* cursor spotlight glow that follows the pointer */ .cursor-glow { position: fixed; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(198, 75, 255, 0.14), rgba(0, 245, 196, 0.06) 45%, transparent 70%); transform: translate(-50%, -50%); will-change: transform; transition: opacity 0.4s ease; } /* subtle background texture: faint grid + drifting aurora blobs, fixed */ .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); transition: opacity 0.4s ease; background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 35%, transparent 90%); } .bg-grid::before, .bg-grid::after, .bg-grid .blob { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; animation: aurora-drift 22s ease-in-out infinite; } .bg-grid::before { width: 46vw; height: 46vw; top: -10%; left: -8%; background: radial-gradient(circle, var(--teal), transparent 70%); } .bg-grid::after { width: 42vw; height: 42vw; top: 30%; right: -10%; background: radial-gradient(circle, var(--violet), transparent 70%); animation-delay: -7s; animation-duration: 26s; } .bg-grid .blob { width: 38vw; height: 38vw; bottom: -12%; left: 20%; background: radial-gradient(circle, var(--amber), transparent 70%); animation-delay: -14s; animation-duration: 30s; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease; } .nav.scrolled { border-bottom-color: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; } .logo-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--violet)); box-shadow: 0 0 14px var(--teal); animation: pulse-glow 2.4s ease-in-out infinite; } .nav-links { display: flex; gap: clamp(16px, 2vw, 32px); font-size: 0.92rem; color: var(--text-muted); } .nav-links a { position: relative; padding-bottom: 3px; transition: color 0.2s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--violet)); transition: width 0.25s ease; border-radius: 2px; } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; } @media (max-width: 760px) { .nav-links { position: fixed; top: 60px; right: 0; left: 0; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-direction: column; padding: 20px var(--pad) 28px; gap: 16px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all 0.25s ease; } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-toggle { display: block; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 90px; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 60px); align-items: center; width: 100%; position: relative; z-index: 2; } .hero-eyebrow { color: var(--teal); font-size: 0.88rem; font-weight: 600; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0, 245, 196, 0.35); background: var(--teal-soft); box-shadow: 0 0 24px rgba(0, 245, 196, 0.18); opacity: 0; animation: pop-in 0.7s ease 0.05s forwards; } .hero-eyebrow .dotping { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse-glow 1.6s ease-in-out infinite; } .hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.05; color: var(--text); opacity: 0; animation: pop-in 0.8s ease 0.18s forwards; } .hero h1 .grad { background: linear-gradient(100deg, var(--teal) 0%, var(--violet) 30%, var(--pink) 55%, var(--amber) 80%, var(--teal) 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-pan 7s linear infinite; display: inline-block; } .hero-intro { margin-top: 26px; max-width: 52ch; color: var(--text-muted); font-size: 1.05rem; opacity: 0; animation: pop-in 0.8s ease 0.32s forwards; } .hero-cta { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: pop-in 0.8s ease 0.46s forwards; } .btn { position: relative; overflow: hidden; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; padding: 13px 26px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%); background-size: 250% 100%; background-position: -100% 0; transition: none; pointer-events: none; } .btn:hover::before { animation: shimmer 1s ease forwards; } .btn:hover { transform: translateY(-3px); } .btn-primary { background: linear-gradient(100deg, var(--teal), var(--violet)); color: var(--btn-ink); } .btn-primary:hover { box-shadow: var(--glow-violet); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--teal); box-shadow: var(--glow-teal); } .hero-canvas-wrap { position: relative; height: clamp(280px, 42vw, 480px); } .hero-canvas-wrap::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(198, 75, 255, 0.25), rgba(0, 245, 196, 0.12) 45%, transparent 72%); filter: blur(30px); animation: float-y-slow 8s ease-in-out infinite; z-index: 0; } #hero-canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 26px rgba(0, 245, 196, 0.3)); } .hero-canvas-label { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; z-index: 1; } .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 22px; height: 34px; border: 1.5px solid var(--border); border-radius: 12px; z-index: 2; animation: float-y 2.6s ease-in-out infinite; } .scroll-cue::before { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--teal); box-shadow: 0 0 6px var(--teal); animation: bounce-cue 1.8s ease-in-out infinite; } @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-canvas-wrap { order: -1; height: 260px; } } /* ---------- section scaffolding ---------- */ section { position: relative; z-index: 1; padding: clamp(80px, 10vw, 140px) 0; } .section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); } .section-kicker { color: var(--violet); font-size: 0.82rem; font-weight: 700; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(198, 75, 255, 0.35); background: var(--violet-soft); } .section-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); } .section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } .section-head p { margin-top: 16px; color: var(--text-muted); font-size: 1.02rem; max-width: 56ch; } .reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: translateY(0) scale(1); } /* ---------- about ---------- */ .about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); } .about-figure { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 28px; background: linear-gradient(160deg, var(--surface), var(--bg-alt)); height: fit-content; overflow: hidden; transition: box-shadow 0.4s ease, border-color 0.4s ease; } .about-figure::before { content: ""; position: absolute; top: -40%; left: -20%; width: 60%; height: 140%; background: radial-gradient(circle, rgba(0, 245, 196, 0.16), transparent 70%); animation: float-y-slow 7s ease-in-out infinite; pointer-events: none; } .about-figure:hover { border-color: var(--teal); box-shadow: var(--glow-teal); } .about-figure .stat { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .about-figure .stat:last-child { border-bottom: none; } .about-figure .stat span:first-child { color: var(--text-muted); } .about-copy p { color: var(--text-muted); margin-bottom: 20px; max-width: 62ch; } .about-copy p:last-child { margin-bottom: 0; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } } /* ---------- timeline ---------- */ .journey-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(24px, 4vw, 56px); align-items: start; } .journey-canvas-wrap { position: sticky; top: 110px; height: 460px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(circle at 50% 28%, var(--teal-soft), transparent 65%), linear-gradient(160deg, var(--surface), var(--bg-alt)); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .journey-canvas-wrap:hover { border-color: var(--violet); box-shadow: var(--glow-violet); } #journey-canvas { width: 100%; height: 100%; display: block; } @media (max-width: 960px) { .journey-grid { grid-template-columns: 1fr; } .journey-canvas-wrap { display: none; } } .timeline { position: relative; padding-left: 32px; } .timeline::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--border); } .timeline::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, var(--teal), var(--violet), var(--amber)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 10px rgba(0, 245, 196, 0.5); } .timeline.in::after { transform: scaleY(1); } .timeline-item { position: relative; padding-bottom: 48px; opacity: 0; transform: translateX(-14px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--d, 0s); } .timeline-item.in { opacity: 1; transform: translateX(0); } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -37.5px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--dot-color, var(--teal)); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--dot-color, var(--teal)); } .timeline-item .year { font-size: 0.85rem; color: var(--dot-color, var(--teal)); font-weight: 700; margin-bottom: 6px; display: block; } .timeline-item h3 { font-size: 1.25rem; margin-bottom: 6px; } .timeline-item .era { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 10px; display: block; } .timeline-item p.body { color: var(--text-muted); max-width: 56ch; } /* ---------- skills ---------- */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 45px; } .skill-card { position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; background: var(--surface); overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease; } .skill-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--card-accent, var(--teal)), transparent); opacity: 0.9; } .skill-card:hover { border-color: var(--card-accent, var(--teal)); transform: translateY(-6px); box-shadow: 0 14px 32px -12px var(--card-accent, var(--teal)); } .skill-card canvas { width: 56px; height: 56px; display: block; margin-bottom: 16px; filter: drop-shadow(0 0 10px var(--card-accent, var(--teal))); animation: float-y 5s ease-in-out infinite; } .skill-card h3 { font-size: 1.05rem; margin-bottom: 8px; } .skill-card .blurb { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 0.78rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); transition: border-color 0.2s ease, color 0.2s ease; } .skill-card:hover .tag { border-color: var(--card-accent, var(--teal)); color: var(--text); } /* ---------- services ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .service-card { position: relative; background: var(--surface); padding: 32px 28px; overflow: hidden; transition: background 0.3s ease; } .service-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, var(--svc-color, var(--teal)) 0%, transparent 60%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .service-card:hover::before { opacity: 0.12; } .service-card:hover { background: var(--surface-2); } .service-card h3 { font-size: 1.1rem; margin-bottom: 10px; position: relative; } .service-card p { color: var(--text-muted); font-size: 0.93rem; margin-bottom: 18px; position: relative; } .service-card .tag-row { position: relative; } /* ---------- projects ---------- */ .filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .filter-btn { font-family: var(--font-body); font-size: 0.85rem; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover { color: var(--text); border-color: var(--teal); box-shadow: 0 0 16px rgba(0, 245, 196, 0.25); } .filter-btn.active { background: linear-gradient(100deg, var(--teal), var(--violet)); color: var(--btn-ink); border-color: transparent; box-shadow: var(--glow-violet); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .project-card { position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 30px; transform-style: preserve-3d; transition: transform 0.15s ease, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; overflow: hidden; } .project-card::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 20%, var(--cat-color, var(--teal)) 0%, transparent 45%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .project-card:hover::after { opacity: 0.08; } .project-card:hover { border-color: var(--cat-color, var(--text-dim)); box-shadow: 0 18px 40px -18px var(--cat-color, transparent); } .project-cat { font-size: 0.78rem; font-weight: 700; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--cat-color, var(--teal)); } .project-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-color, var(--teal)); box-shadow: 0 0 8px var(--cat-color, var(--teal)); } .project-card h3 { font-size: 1.2rem; margin-bottom: 12px; } .project-card .summary { color: var(--text-muted); font-size: 0.93rem; margin-bottom: 20px; } .project-card .tag-row { margin-bottom: 6px; } .project-link { display: inline-block; margin-top: 16px; font-size: 0.88rem; color: var(--cat-color, var(--teal)); border-bottom: 1px solid transparent; transition: transform 0.2s ease; } .project-link:hover { border-color: currentColor; transform: translateX(3px); } /* ---------- tech stack marquee ---------- */ .marquee { position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; white-space: nowrap; background: linear-gradient(180deg, var(--bg-alt), var(--bg)); } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-alt), transparent); } .marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-alt), transparent); } .marquee-track { display: inline-flex; gap: 48px; animation: scroll-left 28s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--tag-color, var(--text-dim)); transition: color 0.2s ease, text-shadow 0.2s ease; } .marquee-track span:hover { color: var(--tag-color, var(--teal)); text-shadow: 0 0 14px var(--tag-color, var(--teal)); } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- contact ---------- */ .contact-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .contact-links { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .contact-links a { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .contact-links a:nth-child(3n+1):hover { border-color: var(--teal); background: var(--teal-soft); box-shadow: var(--glow-teal); } .contact-links a:nth-child(3n+2):hover { border-color: var(--violet); background: var(--violet-soft); box-shadow: var(--glow-violet); } .contact-links a:nth-child(3n+3):hover { border-color: var(--amber); background: var(--amber-soft); box-shadow: var(--glow-amber); } .contact-links a:hover { transform: translateX(4px); } .contact-card { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 32px; background: linear-gradient(160deg, var(--surface), var(--bg-alt)); overflow: hidden; } .contact-card::before { content: ""; position: absolute; top: -30%; right: -20%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(198, 75, 255, 0.22), transparent 70%); animation: float-y-slow 8s ease-in-out infinite; pointer-events: none; } .contact-card .email { position: relative; font-family: var(--font-display); font-size: 1.3rem; margin: 14px 0 20px; word-break: break-word; background: linear-gradient(100deg, var(--teal), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--text-dim); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } footer a { color: var(--text-muted); } footer a:hover { color: var(--text); } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); margin-left: 10px; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, background 0.3s ease; } .theme-toggle:hover { border-color: var(--teal); box-shadow: var(--glow-teal); transform: translateY(-2px) rotate(-8deg); } .theme-toggle svg { position: absolute; width: 18px; height: 18px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; } .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.4); color: var(--amber); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); color: var(--violet); } html[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.4); } @media (max-width: 760px) { .theme-toggle { order: -1; margin-left: 0; margin-right: 6px; } } /* ============================================================ ADVANCED CUSTOM CURSOR A lagging outer ring + a snappy inner dot, both riding on top of the ambient cursor-glow that was already here. Only takes over on fine-pointer (mouse/trackpad) devices — touchscreens keep their native cursor entirely. ============================================================ */ @media (pointer: fine) { body.has-custom-cursor * { cursor: none !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; opacity: 0; transition: opacity 0.3s ease; } .cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; } .cursor-dot { width: 7px; height: 7px; background: var(--teal); box-shadow: 0 0 10px var(--teal), 0 0 22px var(--teal); transition: opacity 0.3s ease, background 0.25s ease, box-shadow 0.25s ease, width 0.2s ease, height 0.2s ease; } .cursor-ring { width: 36px; height: 36px; border: 1.5px solid var(--teal); transition: opacity 0.3s ease, width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, background 0.3s ease; } .cursor-ring.is-hover { width: 68px; height: 68px; border-color: var(--violet); background: var(--violet-soft); } .cursor-ring.is-down { width: 28px; height: 28px; } .cursor-ring.is-text { width: 4px; height: 26px; border-radius: 2px; border-color: var(--pink); background: var(--pink); } } @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } .cursor-ripple { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--teal); pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); animation: cursor-ripple-anim 0.6s ease-out forwards; } @keyframes cursor-ripple-anim { to { width: 74px; height: 74px; opacity: 0; border-width: 0.5px; } } /* ============================================================ FLOATING SYNTAX TAGS (hero) ============================================================ */ .floating-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .ftag { position: absolute; left: var(--x); top: var(--y); font-family: "IBM Plex Sans", monospace; font-size: 0.76rem; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; backdrop-filter: blur(6px); animation: float-y 5s ease-in-out infinite; animation-delay: var(--delay); opacity: 0.92; } .ftag.c-teal { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 16px var(--teal-soft); } .ftag.c-violet { color: var(--violet); border-color: var(--violet); background: var(--violet-soft); box-shadow: 0 0 16px var(--violet-soft); } .ftag.c-amber { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); box-shadow: 0 0 16px var(--amber-soft); } .ftag.c-pink { color: var(--pink); border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 0 16px var(--pink-soft); } @media (max-width: 860px) { .floating-tags { display: none; } } /* ============================================================ HERO CODE WINDOW — a tiny animated IDE mockup that types out real snippets (Python/Odoo, C#/Unity, SQL) with syntax color, then erases and moves to the next one. ============================================================ */ .code-window-anchor { position: absolute; left: 50%; top: 45%; width: min(300px, 82%); z-index: 3; transform: translate(-50%, -50%); } .code-window { width: 100%; height: 214px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; backdrop-filter: blur(10px); overflow: hidden; display: flex; flex-direction: column; transform: perspective(900px) rotateY(6deg) rotateX(2deg) rotate(-1.5deg); animation: float-y-slow 9s ease-in-out infinite; transition: transform 0.35s ease, box-shadow 0.35s ease; } .code-window:hover { transform: perspective(900px) rotateY(0deg) rotateX(0deg) rotate(0deg) scale(1.03); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), var(--glow-teal); } .code-window-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cwdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .cwdot-red { background: #ff5f57; } .cwdot-yellow { background: #febc2e; } .cwdot-green { background: #28c840; } .code-window-title { margin-left: 8px; font-family: "IBM Plex Sans", monospace; font-size: 0.72rem; color: var(--text-dim); } .code-window-body { margin: 0; padding: 12px 14px 16px; font-family: "IBM Plex Mono", "IBM Plex Sans", monospace; font-size: 0.72rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; flex: 1; overflow: hidden; color: var(--text-muted); } .code-window-body .tok-kw { color: var(--violet); } .code-window-body .tok-cls { color: var(--amber); font-weight: 600; } .code-window-body .tok-fn { color: var(--teal); } .code-window-body .tok-str { color: var(--pink); } .code-window-body .tok-cm { color: var(--text-dim); font-style: italic; } .code-window-body .tok-pl { color: var(--text-muted); } .code-cursor { display: inline-block; width: 6px; height: 13px; margin-left: 1px; background: var(--teal); vertical-align: -2px; animation: cursor-blink 0.9s step-end infinite; } @keyframes cursor-blink { 50% { opacity: 0; } } @media (max-width: 860px) { .code-window-anchor { display: none; } } /* ============================================================ ABOUT PHOTO ============================================================ */ .about-photo { position: relative; width: 128px; height: 128px; margin: 0 auto 26px; z-index: 1; perspective: 600px; } .about-photo-ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, var(--teal), var(--violet), var(--pink), var(--amber), var(--teal)); animation: spin-ring 7s linear infinite; } .about-photo-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); } @keyframes spin-ring { to { transform: rotate(360deg); } } .about-photo-frame { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; z-index: 1; display: grid; place-items: center; background: linear-gradient(145deg, var(--surface-2), var(--bg-alt)); box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) inset; transition: transform 0.2s ease; will-change: transform; } .about-photo-frame img { width: 100%; height: 100%; object-fit: cover; } .about-photo-initials { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; background: linear-gradient(100deg, var(--teal), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }