/* ======================================================================== SVK Portfolio — Global CSS Redesign ======================================================================== */ /* Fonts (also add to in index.html for best performance) */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&display=swap'); /* -------------------------------------------------------------------------- CSS Variables -------------------------------------------------------------------------- */ :root { --bg: #0c0c0b; --bg2: #141413; --accent: #c9a96e; --accent-dim: rgba(201, 169, 110, 0.12); --blue: #3b82f6; --blue-dim: rgba(59, 130, 246, 0.1); --cyan: #22d3ee; --cyan-dim: rgba(34, 211, 238, 0.08); --grad: linear-gradient(135deg, #3b82f6, #22d3ee); --glass: rgba(255, 255, 255, 0.02); --glass2: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.1); --text: #efefed; --text2: rgba(239, 239, 237, 0.48); --text3: rgba(239, 239, 237, 0.22); --serif: 'Instrument Serif', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --spring-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* -------------------------------------------------------------------------- 1) Global Resets & Typography -------------------------------------------------------------------------- */ @font-face { font-family: 'Blanka'; src: url('./blanka/Blanka-Regular.woff2') format('woff2'); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html::-webkit-scrollbar { width: 3px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.35); border-radius: 999px; } * { cursor: none !important; scrollbar-width: thin; scrollbar-color: rgba(201, 169, 110, 0.3) transparent; } ::selection { background: var(--accent); color: #0c0c0b; } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; } ul { list-style: none; } a { text-decoration: none; cursor: pointer; } /* Aurora / vignette removed — solid background only */ /* -------------------------------------------------------------------------- Cursor (dot + trailing blob) -------------------------------------------------------------------------- */ #cursor-dot { position: fixed; pointer-events: none; z-index: 9999; border-radius: 999px; box-sizing: border-box; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%); will-change: left, top, width, height, border-radius, background, border-color; overflow: visible; /* animation entirely driven by JS — no CSS transitions */ } /* I-beam serif caps — appear when cursor is in text-caret mode */ #cursor-dot::before, #cursor-dot::after { content: ''; position: absolute; width: 8px; height: 2px; background: inherit; border-radius: 1px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.12s ease; } #cursor-dot::before { top: -1px; } #cursor-dot::after { bottom: -1px; } #cursor-dot.is-caret::before, #cursor-dot.is-caret::after { opacity: 1; } /* cursor blob removed */ /* -------------------------------------------------------------------------- Subtle noise texture — 3% opacity, adds tactile depth without visual noise -------------------------------------------------------------------------- */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9997; opacity: 0.055; 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.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 150px 150px; background-repeat: repeat; } /* -------------------------------------------------------------------------- Site Loader — SVK logo flies to nav on completion -------------------------------------------------------------------------- */ #site-loader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; background: #0c0c0b; transition: opacity 0.55s ease; } #site-loader.fade-out { opacity: 0; pointer-events: none; } #loader-logo { font-family: 'Blanka', sans-serif; font-size: clamp(3.5rem, 10vw, 5.5rem); color: #efefed; letter-spacing: 0.18em; will-change: transform, opacity; } #loader-bar { width: 140px; height: 1px; background: rgba(255,255,255,0.08); overflow: hidden; border-radius: 1px; } #loader-fill { height: 100%; width: 0%; background: var(--accent); animation: loader-fill-anim 0.68s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes loader-fill-anim { 0% { width: 0%; } 60% { width: 70%; } 100% { width: 100%; } } /* -------------------------------------------------------------------------- Project page loaders — #loader (class-based) used on all sub-pages -------------------------------------------------------------------------- */ #loader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; background: #0c0c0b; transition: opacity 0.5s ease; } #loader.loaded { opacity: 0; pointer-events: none; } .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } .loader-inner .loader-logo { font-family: 'Blanka', sans-serif; font-size: clamp(3.5rem, 10vw, 5.5rem); color: #efefed; letter-spacing: 0.18em; } .loader-inner .loader-bar { width: 140px; height: 1px; background: rgba(255,255,255,0.08); overflow: hidden; border-radius: 1px; } .loader-inner .loader-fill { height: 100%; width: 0%; background: var(--accent); animation: loader-fill-anim 0.68s cubic-bezier(0.4,0,0.2,1) forwards; } /* -------------------------------------------------------------------------- Aurora background canvas — lives behind everything -------------------------------------------------------------------------- */ canvas#bg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } #vanta-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: none; } body.light-mode #vanta-bg { display: block; } body.light-mode canvas#bg { display: none; } /* -------------------------------------------------------------------------- Atmosphere orbs — shift color per section -------------------------------------------------------------------------- */ #atm-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .atm-orb { position: absolute; border-radius: 50%; filter: blur(130px); opacity: 0.13; transition: background 2.2s ease; } #atm-a { width: 70vw; height: 70vw; top: -25%; left: -15%; background: #1e4fc8; } #atm-b { width: 55vw; height: 55vw; bottom: -25%; right: -15%; background: #0ea5e9; } /* -------------------------------------------------------------------------- Section heading — accent bar draws in under the title on scroll -------------------------------------------------------------------------- */ .sec-t { position: relative; } .sec-t::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 2.6rem; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 1px; transform: scaleX(0); transform-origin: left center; pointer-events: none; opacity: 0; } .sec-hd.vis .sec-t::after { animation: heading-bar 0.55s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes heading-bar { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* -------------------------------------------------------------------------- Project page background — particle canvas + ambient orbs -------------------------------------------------------------------------- */ canvas#particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-orbs .orb1, .bg-orbs .orb2, .bg-orbs .orb3 { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12; } .bg-orbs .orb1 { width: 600px; height: 600px; background: var(--blue); top: -120px; left: -160px; } .bg-orbs .orb2 { width: 500px; height: 500px; background: var(--cyan); bottom: 10%; right: -100px; } .bg-orbs .orb3 { width: 400px; height: 400px; background: var(--purple, #7c3aed); top: 40%; left: 50%; transform: translateX(-50%); } #cur { position: fixed; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); will-change: left, top; } /* -------------------------------------------------------------------------- 2) Container -------------------------------------------------------------------------- */ .container { width: 95%; max-width: 1060px; margin: 0 auto; } main.container { position: relative; z-index: 20; margin-top: 0; background: var(--bg); box-shadow: 0 -60px 80px var(--bg); width: 100%; } main.container::before { content: ''; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; z-index: 1; } /* ======================================================================== 3) NAVBAR ======================================================================== */ #nav { position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; max-width: 100%; box-sizing: border-box; background: rgba(12, 12, 11, 0.45); -webkit-backdrop-filter: blur(48px) saturate(180%); backdrop-filter: blur(48px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04); transition: background 0.3s ease, border-color 0.3s ease; } #nav.scrolled { background: rgba(12, 12, 11, 0.72); -webkit-backdrop-filter: blur(48px) saturate(180%); backdrop-filter: blur(48px) saturate(180%); border-bottom-color: rgba(255, 255, 255, 0.1); } #nav .logo { font-family: var(--serif); font-style: italic; font-size: 1.5rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } #nav .logo:hover { text-decoration: none; } .nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--text3); font-size: 0.825rem; font-weight: 500; text-decoration: none; position: relative; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } .nav-links a:hover, .nav-links a.active { color: var(--text); font-style: italic; } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.nav-cta { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; padding: 0.45rem 1.1rem; border-radius: 8px; font-weight: 600; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } .nav-links a.nav-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); } .nav-links a.nav-cta::after { display: none; } /* -------------------------------------------------------------------------- 4) THEME TOGGLE SWITCH (white/black) -------------------------------------------------------------------------- */ .toggle-switch { position: relative; width: 28px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background-color 0.25s ease-out, border-color 0.25s ease-out, transform 0.2s ease-out; } .toggle-switch label::after { content: "☾"; position: relative; font-size: 0.9rem; color: #fff; } .toggle-switch input:checked + label { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(34, 211, 238, 0.9); } .toggle-switch input:checked + label::after { content: "☀"; color: #ffe066; } /* ======================================================================== 5) HERO SECTION — Cinematic full-screen intro ======================================================================== */ #hero { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 0 8% 0 13%; pointer-events: none; overflow: hidden; } /* ---- Video background ---- */ #hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; } #hero-video.ready { opacity: 1; } /* Safari shows a native play/pause overlay even without the controls attribute. These pseudo-elements suppress it entirely. */ #hero-video::-webkit-media-controls, #hero-video::-webkit-media-controls-enclosure, #hero-video::-webkit-media-controls-panel, #hero-video::-webkit-media-controls-play-button, #hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; appearance: none; } /* Directional overlay: heavy dark on the left (text), opens up on the right */ #hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to right, rgba(12, 12, 11, 0.88) 0%, rgba(12, 12, 11, 0.6) 40%, rgba(12, 12, 11, 0.18) 100% ), linear-gradient( to bottom, rgba(12, 12, 11, 0.45) 0%, transparent 22%, transparent 65%, rgba(12, 12, 11, 0.75) 100% ); } /* Hero content above video + overlay */ .hero-pre, h1.name, .hero-typed, .hero-btns { position: relative; z-index: 2; will-change: transform, opacity, filter; } /* No motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { #hero-video { display: none; } } .hero-pre { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text3); margin-bottom: 2rem; opacity: 0; /* CSS hero-rise animates in via #hero.hero-revealed */ } h1.name { font-family: var(--serif); font-style: italic; font-size: clamp(4rem, 9.5vw, 11.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; color: var(--text); -webkit-text-fill-color: var(--text); white-space: nowrap; margin-bottom: 1.75rem; opacity: 0; /* CSS hero-rise animates in via #hero.hero-revealed */ } h1.name em { font-style: normal; color: var(--text2); -webkit-text-fill-color: var(--text2); -webkit-text-stroke: 0; } /* Staggered char-rise — each letter animates in individually */ .nc { display: inline-block; animation: char-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 32ms + 30ms); } @keyframes char-rise { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0px); } } .hero-typed { font-family: var(--font); font-style: normal; font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.5rem); color: var(--text2); margin-bottom: 2.5rem; opacity: 0; /* CSS hero-rise animates in via #hero.hero-revealed */ min-height: 1.8rem; } .typed-accent { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cblink { display: inline-block; width: 2px; height: 0.85em; background: var(--cyan); margin-left: 2px; vertical-align: middle; animation: cursorBlink 0.75s step-end infinite; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .hero-btns { display: flex; gap: 0.75rem; justify-content: flex-start; pointer-events: all; opacity: 0; /* CSS hero-rise animation reveals on hero-revealed class */ } /* ── Hero entrance — CSS keyframe, no CDN dependency ──────────────────── */ /* Triggered by JS adding .hero-revealed to #hero on hero-ready event. */ /* animation-fill-mode:both holds opacity:0 before delay, opacity:1 after. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } #hero.hero-revealed .hero-pre { animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } #hero.hero-revealed .hero-typed { animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.17s both; } #hero.hero-revealed .hero-btns { animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.29s both; } /* Reduced-motion: skip animation, show immediately */ @media (prefers-reduced-motion: reduce) { #hero.hero-revealed .hero-pre, #hero.hero-revealed .hero-typed, #hero.hero-revealed .hero-btns { animation: none; opacity: 1; } .hero-pre, .hero-typed, .hero-btns { opacity: 1; } } .btn { display: inline-block; padding: 0.62rem 1.4rem; border-radius: 14px; font-weight: 600; font-size: 0.82rem; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); } /* Primary — brighter glass */ .btn-p { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), /* top specular */ inset 0 -1px 0 rgba(0, 0, 0, 0.12), /* bottom depth */ 0 8px 32px rgba(0, 0, 0, 0.18); } .btn-p:hover { background: rgba(255, 255, 255, 0.26); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 12px 40px rgba(0, 0, 0, 0.25); } /* Secondary — dimmer glass */ .btn-s { background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.08); } .btn-s:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); } /* scroll hint removed */ /* ======================================================================== MARQUEE STRIP ======================================================================== */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.1rem 0; position: relative; z-index: 20; background: var(--bg); } .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; } .marquee-wrap:hover .marquee-track { animation-play-state: paused; } .marquee-content { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); white-space: nowrap; flex-shrink: 0; padding-right: 2rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Scroll reveal — IO adds .vis; CSS transition plays the animation ── */ .sec-hd, .about-left-col, .about-copy, .exp-item, .crow, .form-wrap, .closing-heading, .closing-kicker, .closing-sub { opacity: 0; transform: translateY(22px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .sec-hd.vis, .about-left-col.vis, .about-copy.vis, .exp-item.vis, .crow.vis, .form-wrap.vis, .closing-heading.vis, .closing-kicker.vis, .closing-sub.vis { opacity: 1; transform: none; } /* Project cards: GSAP-only reveal (tilt uses transform — no CSS transition) */ .proj-card { opacity: 0; } /* Stagger delays */ .crow:nth-child(2) { transition-delay: 0.08s; } .crow:nth-child(3) { transition-delay: 0.16s; } .closing-kicker { transition-delay: 0.1s; } .closing-sub { transition-delay: 0.2s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* Stats divider removed */ /* ======================================================================== 8) FADE-IN ON SCROLL ======================================================================== */ /* ======================================================================== 9) INVISIBLE ANCHOR (stop scroll above the

) ======================================================================== */ /* ======================================================================== 12) SECTION LAYOUT (.sec) + ABOUT ME ======================================================================== */ .sec { padding: 5rem 5%; } /* Alternating section borders for visual separation */ #experience, #skills { border-top: 1px solid var(--border); } .sec-inner { max-width: 1060px; margin: 0 auto; } .sec-hd { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 4.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .sec-n { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text3); } .sec-t { font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 5.5vw, 4.5rem); color: var(--text); line-height: 1; letter-spacing: -0.025em; } .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; } .about-left-col { display: flex; flex-direction: column; gap: 1.75rem; position: sticky; top: 100px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 1.25rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.14); } .photo-frame { width: 100%; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; border: 1px solid var(--border2); background: var(--glass2); box-shadow: 0 0 40px rgba(59, 130, 246, 0.1); will-change: transform, opacity, filter; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.55; color: var(--text); letter-spacing: -0.01em; } .about-quote span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4ade80; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: 999px; padding: 0.3rem 0.75rem; margin-bottom: 1.25rem; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); animation: statusPulse 2.4s ease infinite; } @keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } } .about-copy p { font-size: 0.925rem; color: var(--text2); line-height: 1.9; margin-bottom: 1rem; will-change: transform, opacity, filter; } .about-copy p:last-child { margin: 0; } .about-copy strong { color: var(--text); font-weight: 600; } .about-copy em { font-family: var(--serif); font-style: italic; color: var(--cyan); } /* ======================================================================== 13.5) EXPERIENCE (.exp-list) ======================================================================== */ .exp-list { display: flex; flex-direction: column; } #experience .sec-inner { position: relative; padding-left: 2.5rem; } #experience .sec-inner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--border2) 15%, var(--border2) 85%, transparent); transform: scaleY(var(--line-p, 0)); transform-origin: top; } .exp-item { position: relative; display: grid; grid-template-columns: 175px 1fr; gap: 3rem; padding: 1.75rem 1.5rem; margin-bottom: 0.75rem; background: rgba(255, 255, 255, 0.025); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 4px 20px rgba(0, 0, 0, 0.1); will-change: transform, opacity; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .exp-item:hover { border-color: rgba(59, 130, 246, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 32px rgba(59, 130, 246, 0.08); } .exp-item::before { content: ''; position: absolute; left: -2.85rem; top: 2.75rem; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } .exp-item:last-child { margin-bottom: 0; } .exp-period, .exp-loc { font-size: 0.775rem; color: var(--text3); font-weight: 500; margin-bottom: 0.2rem; } .exp-cur { display: inline-block; font-size: 0.64rem; text-transform: uppercase; color: var(--cyan); background: var(--cyan-dim); border: 1px solid rgba(34, 211, 238, 0.2); border-radius: 4px; padding: 0.2rem 0.5rem; margin-top: 0.5rem; } .exp-role { font-size: 0.975rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 0.2rem; } .exp-co { font-family: var(--serif); font-style: italic; font-size: 0.95rem; display: inline-block; margin-bottom: 0.75rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .exp-ul { list-style: none; margin: 0; padding: 0; } .exp-ul li { font-size: 0.875rem; color: var(--text2); line-height: 1.6; padding-left: 1rem; margin-bottom: 0.4rem; position: relative; } .exp-ul li::before { content: "·"; position: absolute; left: 0; color: var(--blue); } /* ======================================================================== 14) PROJECT CARDS (.proj-grid + .proj-card) ======================================================================== */ .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding-block: 0.5rem; } .proj-card { display: flex; flex-direction: column; padding: 1.6rem 1.7rem 1.5rem; min-height: 300px; /* Liquid glass base */ background: rgba(255, 255, 255, 0.055); -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.06); backdrop-filter: blur(36px) saturate(200%) brightness(1.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; text-decoration: none; color: inherit; position: relative; overflow: hidden; cursor: pointer; transform-style: preserve-3d; will-change: transform, opacity; isolation: isolate; transition: border-color 0.38s ease, box-shadow 0.38s ease, background 0.38s ease; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 4px 28px rgba(0, 0, 0, 0.28); } /* Lift card children above pseudo-layers */ .proj-card > * { position: relative; z-index: 1; } /* ── Back: iridescent liquid layer ──────────────────────── */ .proj-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient( from 200deg at 20% 115%, rgba(99, 102, 241, 0.55), rgba(59, 130, 246, 0.60), rgba(34, 211, 238, 0.50), rgba(52, 211, 153, 0.30), rgba(167, 139, 250, 0.55), rgba(236, 72, 153, 0.35), rgba(99, 102, 241, 0.55) ); filter: blur(28px) hue-rotate(0deg); opacity: 0.28; animation: liquidFlow 12s linear infinite; z-index: 0; pointer-events: none; transition: opacity 0.45s ease; } .proj-card--feat::before { opacity: 0.62; } @keyframes liquidFlow { to { filter: blur(28px) hue-rotate(360deg); } } /* ── Front: glass specular + top gloss ──────────────────── */ .proj-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, transparent 28%), radial-gradient( 320px circle at var(--mx, 50%) var(--my, -10%), rgba(255, 255, 255, 0.16), transparent 65% ); pointer-events: none; z-index: 2; } .proj-card--feat { transform: translateY(-6px); background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.30); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.07), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 64px rgba(0, 0, 0, 0.48), 0 0 60px rgba(120, 80, 255, 0.14); } /* Dim non-featured cards when one is hovered */ .proj-grid:has(.proj-card--feat) .proj-card:not(.proj-card--feat) { opacity: 0.42; filter: saturate(0.6); transition: opacity 0.35s ease, filter 0.35s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease, box-shadow 0.32s ease, background 0.32s ease; } /* ── Bento layout modifiers ─────────────────────────────────────── */ /* Card 01: dominant span-2 slot */ .proj-card--span2 { grid-column: span 2; } /* Card 06: full-width banner slot */ .proj-card--wide { grid-column: 1 / -1; min-height: auto; } /* Wide card: 2-col body — description left, stats sidebar right */ .proj-card--wide .proj-body { display: grid; grid-template-columns: 1fr 190px; column-gap: 2.5rem; } .proj-card--wide .proj-name { grid-column: 1; grid-row: 1; } .proj-card--wide .proj-desc { grid-column: 1; grid-row: 2; flex: unset; -webkit-line-clamp: 4; } .proj-card--wide .proj-tags { grid-column: 1; grid-row: 3; margin-top: 0.6rem; } .proj-card--wide .proj-stats { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-start; gap: 0.45rem; margin-top: 0; opacity: 1; transform: translateY(0); pointer-events: auto; } .proj-card--wide .proj-link { grid-column: 2; grid-row: 3; margin-top: 0.6rem; opacity: 0.7; transform: translateY(0); pointer-events: auto; } .proj-body { display: flex; flex-direction: column; flex: 1; } .proj-name { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 0.5rem; transition: color 0.25s ease; } .proj-card--feat .proj-name { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Description */ .proj-desc { flex: 1; font-size: 0.83rem; color: var(--text2); line-height: 1.62; margin-bottom: 1rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; transition: opacity 0.2s ease; } /* Tags — pinned to bottom of body */ .proj-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; } .ptag { font-size: 0.65rem; font-weight: 500; color: var(--text3); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 5px; padding: 0.15rem 0.55rem; background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s, color 0.2s; } .proj-card--feat .ptag { border-color: rgba(59, 130, 246, 0.2); color: var(--text2); } /* Live link */ .proj-link { display: block; margin-top: 0.55rem; font-size: 0.7rem; color: var(--cyan); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .proj-card--feat .proj-link, .proj-card--span2 .proj-link { opacity: 0.8; transform: translateY(0); pointer-events: auto; } .proj-link:hover { opacity: 1; text-decoration: underline; } /* ======================================================================== 15) SKILLS SECTION — horizontal row layout ======================================================================== */ .sk-rows { display: flex; flex-direction: column; } .sk-row { display: grid; grid-template-columns: 148px 1fr; gap: 2rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .sk-row.vis { opacity: 1; transform: none; } .sk-row:nth-child(2) { transition-delay: 0.07s; } .sk-row:nth-child(3) { transition-delay: 0.14s; } .sk-row:nth-child(4) { transition-delay: 0.21s; } .sk-row:nth-child(5) { transition-delay: 0.28s; } .sk-row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.06); } .sk-row-meta { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.2rem; flex-shrink: 0; } .sk-row-name { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .sk-row-count { font-size: 0.63rem; color: var(--text3); font-weight: 500; } .sk-row-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start; } .sk-tag { display: inline-flex; align-items: center; padding: 0.28rem 0.72rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); font-size: 0.8rem; font-weight: 500; color: var(--text2); white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } /* Category colors — label and tag hover */ .sk-row:nth-child(1) .sk-row-name { color: #60a5fa; } .sk-row:nth-child(2) .sk-row-name { color: #a78bfa; } .sk-row:nth-child(3) .sk-row-name { color: #34d399; } .sk-row:nth-child(4) .sk-row-name { color: #22d3ee; } .sk-row:nth-child(5) .sk-row-name { color: #c9a96e; } .sk-row:nth-child(1) .sk-row-count::before, .sk-row:nth-child(2) .sk-row-count::before, .sk-row:nth-child(3) .sk-row-count::before, .sk-row:nth-child(4) .sk-row-count::before, .sk-row:nth-child(5) .sk-row-count::before { content: '— '; } .sk-row:nth-child(1) .sk-tag:hover { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.35); color: var(--text); } .sk-row:nth-child(2) .sk-tag:hover { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.35); color: var(--text); } .sk-row:nth-child(3) .sk-tag:hover { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); color: var(--text); } .sk-row:nth-child(4) .sk-tag:hover { background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.35); color: var(--text); } .sk-row:nth-child(5) .sk-tag:hover { background: rgba(201, 169, 110, 0.12); border-color: rgba(201, 169, 110, 0.4); color: var(--text); } /* ======================================================================== 16) CONTACT SECTION ======================================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; } .contact-h { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--text); margin-bottom: 1rem; } .contact-p { font-size: 0.95rem; color: var(--text2); line-height: 1.7; margin-bottom: 1.5rem; } .crow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; margin: 0 -0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; position: relative; overflow: hidden; transition: background 0.22s ease; } /* Gradient left-edge accent on hover */ .crow::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 2px; background: var(--grad); border-radius: 2px; opacity: 0; transform: scaleY(0.4); transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .crow:hover::before { opacity: 1; transform: scaleY(1); } .crow:hover { background: rgba(255, 255, 255, 0.04); } .crow:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.07); } .crow-l { font-size: 0.7rem; color: var(--text3); font-weight: 600; text-transform: uppercase; } .crow a { font-size: 0.84rem; color: var(--text2); text-decoration: none; transition: color 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .crow a:hover { color: var(--cyan); transform: translateX(3px); } .form-wrap { position: relative; background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 40px rgba(0, 0, 0, 0.2); } .form-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent); opacity: 0.5; border-radius: 16px 16px 0 0; } .contact-form.form { display: flex; flex-direction: column; gap: 0.55rem; } .contact-form .field { display: flex; flex-direction: column; gap: 0.25rem; } .contact-form .field label { font-size: 0.68rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; } .contact-form .field input, .contact-form .field textarea { background: var(--glass); border: 1px solid var(--border); border-radius: 7px; padding: 0.42rem 0.72rem; font-size: 0.8rem; color: var(--text); font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .contact-form .field input::placeholder, .contact-form .field textarea::placeholder { color: var(--text3); } .contact-form .field input:focus, .contact-form .field textarea:focus { outline: none; border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: rgba(59, 130, 246, 0.04); } /* Filled-state: persists after blur — system remembers captured data */ .contact-form .field input:not(:placeholder-shown), .contact-form .field textarea:not(:placeholder-shown) { border-color: rgba(59, 130, 246, 0.22); background: rgba(59, 130, 246, 0.02); } .contact-form .field textarea { resize: vertical; min-height: 80px; } .btn-send { background: #fff; color: #0c0c0b; border: none; border-radius: 8px; padding: 0.75rem 1.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; align-self: flex-start; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .btn-send:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } /* Contact status (for Formspree AJAX feedback) */ .contact-status { margin-top: 0.9rem; font-size: 0.9rem; padding: 0.45rem 0.9rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.25s ease-out, transform 0.25s ease-out; } .contact-status.visible { opacity: 1; transform: translateY(0) scale(1); } .contact-status.success { color: #bbf7d0; } .contact-status.error { color: #fecaca; } .contact-status.sending { color: #e5e7eb; } /* ===================================================================================== 17) FOOTER ===================================================================================== */ /* ===================================================================================== CONTACT SECTION — combined statement + form ===================================================================================== */ .sec--contact { border-top: 1px solid var(--border); position: relative; overflow: hidden; padding-top: 5rem; padding-bottom: 5rem; /* Full-bleed breakout from max-width container */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Calvin Harris — rich dark gradient base */ background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(120, 38, 210, 0.55) 0%, transparent 65%), radial-gradient(ellipse 55% 50% at 96% 100%, rgba(34, 211, 238, 0.22) 0%, transparent 58%), radial-gradient(ellipse 48% 40% at 2% 100%, rgba(59, 130, 246, 0.25) 0%, transparent 55%), linear-gradient(160deg, #090011 0%, #10001f 22%, #060b28 48%, #011528 74%, #000608 100%); } /* Grain texture — heavy enough to feel tactile */ .sec--contact::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; 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.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px 120px; background-repeat: repeat; z-index: 0; } /* Top vignette edge — blends into the preceding section */ .sec--contact::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); pointer-events: none; z-index: 0; } .sec--contact .sec-inner { position: relative; z-index: 1; } .contact-statement { text-align: center; max-width: none; margin: 0 auto 1.75rem; position: relative; z-index: 1; } .contact-statement .sec-n { display: block; margin-bottom: 1.25rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .closing-sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); line-height: 1.65; max-width: 420px; margin: 0 auto 0; } body.light-mode .closing-sub { color: rgba(12,12,11,0.58); } body.light-mode .closing-kicker { color: rgba(12,12,11,0.42); } .contact-body { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; opacity: 0.88; } .closing-kicker { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); margin-bottom: 0.75rem; } .closing-heading { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--text); margin-bottom: 1.25rem; } .closing-heading em { font-style: normal; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .closing-email { display: inline-block; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text2); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 0.2rem; transition: color 0.22s, border-color 0.22s; } .closing-email:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); } /* Light mode — visible soft gradient (purple crown + cyan corner) */ body.light-mode .sec--contact { background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(120, 38, 210, 0.12) 0%, transparent 65%), radial-gradient(ellipse 55% 48% at 97% 102%, rgba(34, 211, 238, 0.14) 0%, transparent 58%), radial-gradient(ellipse 48% 40% at 1% 102%, rgba(59, 130, 246, 0.12) 0%, transparent 55%), linear-gradient(160deg, #ece8f8 0%, #e6e2f6 22%, #e8edf8 55%, #e5f2f4 100%); } body.light-mode .sec--contact::after { background: linear-gradient(to bottom, rgba(242,242,246,1) 0%, transparent 100%); } body.light-mode .closing-heading { color: #0c0c0b; } body.light-mode .closing-email { color: rgba(12,12,11,0.6); border-color: rgba(0,0,0,0.15); } body.light-mode .closing-email:hover { color: #0c0c0b; border-color: rgba(0,0,0,0.4); } footer { border-top: 1px solid var(--border); padding: 1.4rem 5%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%); } .foot-l, .foot-r { flex: 1; font-size: 0.76rem; color: var(--text3); } .foot-r { text-align: right; } .foot-logo { font-family: var(--serif); font-style: italic; font-size: 1rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } .foot-logo:hover { text-decoration: none; } .foot-r a { color: var(--text3); text-decoration: none; transition: color 0.2s ease; } .foot-r a:hover { color: var(--cyan); } /* ===================================================================================== 22) BACK-TO-TOP BUTTON ===================================================================================== */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.7); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(34, 211, 238, 0.4); transition: opacity 0.25s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out, background 0.2s ease-out; z-index: 30; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: rgba(34, 211, 238, 0.2); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9), 0 0 26px rgba(34, 211, 238, 0.7); } body.light-mode .back-to-top { background: rgba(255, 255, 255, 0.95); color: #111; border-color: rgba(59, 130, 246, 0.7); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15), 0 0 18px rgba(59, 130, 246, 0.35); } body.light-mode .back-to-top:hover { background: rgba(239, 246, 255, 1); } /* ===================================================================================== 18) LIGHT-MODE OVERRIDES — comprehensive ===================================================================================== */ body.light-mode { /* Re-map every CSS variable so all elements using var() auto-update */ --bg: #f2f2f6; --bg2: #e8e8ef; --blue-dim: rgba(59, 130, 246, 0.1); --cyan-dim: rgba(34, 211, 238, 0.1); --glass: rgba(0, 0, 0, 0.03); --glass2: rgba(0, 0, 0, 0.055); --border: rgba(0, 0, 0, 0.08); --border2: rgba(0, 0, 0, 0.13); --text: #0c0c1a; --text2: #4a4a66; --text3: #9494ae; background: #f2f2f6; color: #0c0c1a; } /* Light mode — suppress dark overlay layers (aurora canvas handles its own bg) */ body.light-mode #atm-orbs { display: none; } body.light-mode .bg-orbs .orb1, body.light-mode .bg-orbs .orb2, body.light-mode .bg-orbs .orb3 { opacity: 0.04; } body.light-mode canvas#particles { opacity: 0.2; } body.light-mode #nav.scrolled { background: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(0, 0, 0, 0.08); } body.light-mode .nav-links a { color: #666; } body.light-mode .nav-links a:hover, body.light-mode .nav-links a.active { color: #111; } body.light-mode .nav-links a.nav-cta { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); color: #0c0c1a; } /* Light-mode hero */ body.light-mode .hero-h { color: #111; } body.light-mode .hero-sub { color: #555; } body.light-mode .hero-sub strong { color: #111; } body.light-mode .badges .badge { color: #555; } body.light-mode .badges .badge:hover { color: var(--blue); } /* About & project paragraphs become dark */ body.light-mode .proj-desc, body.light-mode .contact-p { color: #333; } /* PROJECT CARDS — liquid glass light mode */ body.light-mode .proj-card { background: rgba(255, 255, 255, 0.48); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 4px 20px rgba(0, 0, 0, 0.07); } body.light-mode .proj-card::before { opacity: 0.14; } body.light-mode .proj-card--feat::before { opacity: 0.30; } body.light-mode .proj-card--feat { background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 20px 56px rgba(0, 0, 0, 0.10), 0 0 50px rgba(120, 80, 255, 0.07); } body.light-mode .proj-name { color: #0c0c1a; } body.light-mode .proj-card--feat .proj-name { background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.light-mode .proj-desc { color: #444; } body.light-mode .proj-num { color: #aaa; } body.light-mode .proj-card--feat .proj-num { color: #3b82f6; } body.light-mode .proj-arr { color: #ccc; } body.light-mode .proj-card--feat .proj-arr { color: #3b82f6; } body.light-mode .proj-card .ptag { color: #666; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.02); } body.light-mode .proj-card--feat .ptag { border-color: rgba(59, 130, 246, 0.2); color: #333; } /* SKILLS & TOOLS: light mode */ body.light-mode .sk-row { border-color: rgba(0, 0, 0, 0.08); } body.light-mode .sk-tag { color: #555; border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.02); } body.light-mode .sk-row:nth-child(1) .sk-tag:hover { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #111; } body.light-mode .sk-row:nth-child(2) .sk-tag:hover { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.3); color: #111; } body.light-mode .sk-row:nth-child(3) .sk-tag:hover { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #111; } body.light-mode .sk-row:nth-child(4) .sk-tag:hover { background: rgba(6,182,212,0.08); border-color: rgba(6,182,212,0.3); color: #111; } body.light-mode .sk-row:nth-child(5) .sk-tag:hover { background: rgba(180,130,60,0.08); border-color: rgba(180,130,60,0.3); color: #111; } body.light-mode .contact-h { color: #111; } body.light-mode .contact-p { color: #555; } body.light-mode .crow a { color: #555; } body.light-mode .crow a:hover { color: var(--blue); } body.light-mode .form-wrap { background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 32px rgba(0,0,0,0.06); } body.light-mode .contact-form .field input, body.light-mode .contact-form .field textarea { background: #fff; color: #111; border-color: rgba(0, 0, 0, 0.15); } /* Filled-state in light mode */ body.light-mode .contact-form .field input:not(:placeholder-shown), body.light-mode .contact-form .field textarea:not(:placeholder-shown) { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.03); } body.light-mode .btn-send { background: #0c0c1a; color: #fff; } body.light-mode .btn-send:hover { background: #1a1a2e; } /* ===================================================================================== 20) PROJECT PAGE HOVER EFFECTS ===================================================================================== */ /* If you have separate project-one/two/three pages, include similar CSS there */ /* ===================================================================================== 21) RESPONSIVE ADJUSTMENTS (TABLET & MOBILE) ===================================================================================== */ /* Tablet and small laptop tweaks */ @media (max-width: 900px) { #hero { padding: 0 6% 0 8%; } h1.name { white-space: normal; font-size: clamp(3rem, 10vw, 7rem); } } /* Mobile-first responsive (768px) */ @media (max-width: 768px) { #hero { padding: 0 5% 0 6%; } h1.name { white-space: normal; font-size: clamp(2.5rem, 12vw, 5rem); line-height: 1; } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-left-col { position: static; flex-direction: row; align-items: center; gap: 1.5rem; } .about-left-col .photo-frame { width: 100px; height: 100px; flex-shrink: 0; aspect-ratio: unset; } .contact-grid { grid-template-columns: 1fr; } .skills-grid { grid-template-columns: 1fr 1fr; } #nav .nav-links { display: none; } } /* Phone-sized screens */ @media (max-width: 480px) { .sk-row { grid-template-columns: 1fr; gap: 0.6rem; } .sk-row-count { display: none; } /* Contact heading — allow wrap + scale down on small screens */ .closing-heading { white-space: normal; font-size: clamp(2rem, 9vw, 4rem); letter-spacing: -0.02em; } } @media (max-width: 600px) { #nav { padding: 0 1.25rem; flex-wrap: wrap; gap: 0.75rem; height: auto; min-height: 64px; padding-top: 0.75rem; padding-bottom: 0.75rem; } .nav-links { flex-wrap: wrap; gap: 1rem; } #hero { padding: 0 5%; min-height: auto; } h1.name { font-size: clamp(2.2rem, 13vw, 4rem); white-space: normal; line-height: 1; } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-left-col { position: static; flex-direction: row; align-items: center; gap: 1.5rem; } .about-left-col .photo-frame { width: 100px; height: 100px; flex-shrink: 0; aspect-ratio: unset; } /* Experience stacks on mobile */ .exp-item { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0; } .exp-left-inner { order: -1; } .sk-row { grid-template-columns: 120px 1fr; gap: 1.25rem; } .contact-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ===================================================================================== 22) PROJECT PAGE TEMPLATE (.project-hero, .project-body, .proj-section) ===================================================================================== */ .project-hero { padding: 72px 5% 1.5rem; position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; } .project-hero .back-link { font-size: 0.8rem; color: var(--text3); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem; transition: color 0.2s; } .project-hero .back-link:hover { color: var(--text); } .project-hero .proj-icon-wrap { width: 56px; height: 56px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--border2); font-size: 1.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .project-hero .proj-title { font-family: var(--serif); font-style: italic; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.025em; color: var(--text); margin-bottom: 1rem; } .project-hero .proj-subtitle { font-size: 1.05rem; color: var(--text2); line-height: 1.75; max-width: 600px; margin-bottom: 2rem; } .proj-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; margin-bottom: 2rem; } .proj-link-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 500; padding: 0.55rem 1.1rem; border-radius: 8px; border: 1px solid var(--border2); background: var(--glass); color: var(--text2); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.01em; white-space: nowrap; } .proj-link-btn:hover { border-color: rgba(59, 130, 246, 0.4); color: var(--text); background: var(--glass2); } /* Live site variant — solid green primary CTA */ .proj-link-btn--live { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.38); color: #4ade80; font-weight: 600; } .proj-link-btn--live:hover { background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.65); color: #86efac; box-shadow: 0 0 18px rgba(74, 222, 128, 0.12); } /* Pulsing status dot */ .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: livePulse 2.4s ease infinite; } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); } } .project-hero .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0; /* spacing handled by .proj-links margin-top */ } .project-hero .tag { font-size: 0.68rem; font-weight: 500; padding: 0.28rem 0.6rem; border-radius: 5px; border: 1px solid var(--border); background: var(--glass); color: var(--text2); letter-spacing: 0.01em; } .project-hero .proj-divider { width: 100%; height: 1px; background: linear-gradient(90deg, var(--blue), var(--cyan), transparent); margin-top: 3rem; } /* ── Browser-frame screenshot preview on project detail pages ── */ .proj-preview { max-width: 860px; margin: 0 auto 3.5rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 72px rgba(0, 0, 0, 0.55); } .proj-preview-bar { height: 34px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; padding: 0 14px; gap: 7px; flex-shrink: 0; } .proj-preview-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .proj-preview-dot:nth-child(1) { background: rgba(255, 97, 89, 0.7); } .proj-preview-dot:nth-child(2) { background: rgba(255, 191, 44, 0.7); } .proj-preview-dot:nth-child(3) { background: rgba(74, 222, 128, 0.7); } .proj-preview-address { flex: 1; text-align: center; font-size: 0.63rem; color: rgba(255, 255, 255, 0.22); letter-spacing: 0.02em; user-select: none; } .proj-preview img { width: 100%; display: block; } .project-body { max-width: 1060px; margin: 0 auto; padding: 1.5rem 5% 5rem; display: flex; flex-direction: column; gap: 1.5rem; } .proj-section { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, opacity 0.5s ease-out, transform 0.5s ease-out; opacity: 0; transform: translateY(16px); } .proj-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); z-index: 1; } .proj-section:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 4px 32px rgba(59, 130, 246, 0.1); } .proj-section.vis { opacity: 1; transform: translateY(0); } .proj-section h2 { font-family: var(--serif); font-style: italic; font-size: 1.35rem; font-weight: 400; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .proj-section p { font-size: 0.925rem; color: var(--text2); line-height: 1.85; margin-bottom: 0.75rem; } .proj-section ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .proj-section ul li { font-size: 0.9rem; color: var(--text2); line-height: 1.7; padding-left: 1.1rem; position: relative; } .proj-section ul li::before { content: '·'; position: absolute; left: 0.1rem; color: var(--blue); font-size: 1.2rem; line-height: 1.4; } /* ===================================================================================== PROJECT PREV/NEXT NAVIGATION ===================================================================================== */ .proj-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 3.5rem; gap: 1rem; } .proj-nav-link { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--text2); transition: color 0.22s; max-width: 46%; } .proj-nav-link:hover { color: var(--text); } .proj-nav-link--next { align-items: flex-end; text-align: right; } .proj-nav-label { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); } .proj-nav-title { font-size: 1rem; font-weight: 700; color: inherit; transition: background 0.22s; } .proj-nav-link:hover .proj-nav-title { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===================================================================================== SCROLL PROGRESS BAR ===================================================================================== */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--grad); z-index: 9999; pointer-events: none; transition: width 0.08s linear; } /* ===================================================================================== NAV ACTIONS (resume + theme toggle + hamburger) ===================================================================================== */ .nav-actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .nav-resume { font-size: 0.775rem; font-weight: 500; color: var(--text2); text-decoration: none; border: 1px solid var(--border2); padding: 0.35rem 0.85rem; border-radius: 6px; letter-spacing: 0.02em; transition: color 0.2s, border-color 0.2s, background 0.2s; white-space: nowrap; } .nav-resume:hover { color: var(--text); border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.07); } /* ===================================================================================== HAMBURGER BUTTON ===================================================================================== */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border2); border-radius: 8px; cursor: pointer; gap: 5px; padding: 0; flex-shrink: 0; transition: border-color 0.2s; } .hamburger:hover { border-color: rgba(59, 130, 246, 0.4); } .hamburger span { display: block; width: 16px; height: 1.5px; background: var(--text2); border-radius: 999px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s, width 0.3s; } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; width: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ===================================================================================== MOBILE NAV PANEL ===================================================================================== */ .mobile-nav { position: fixed; top: 0; right: 0; width: min(300px, 82vw); height: 100vh; background: rgba(6, 6, 18, 0.98); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-left: 1px solid var(--border2); z-index: 9996; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; padding: 5rem 2rem 2rem; } .mobile-nav.open { transform: translateX(0); } .mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0; } .mobile-nav ul li a { display: block; font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--text2); text-decoration: none; padding: 0.65rem 0; border-bottom: 1px solid var(--border); transition: color 0.2s, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-nav ul li:last-child a { border-bottom: none; } .mobile-nav ul li a:hover { color: var(--text); padding-left: 0.6rem; } .mobile-nav-close { position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: 1px solid var(--border); color: var(--text3); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: background 0.2s, color 0.2s; } .mobile-nav-close:hover { background: var(--glass2); color: var(--text); } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 9995; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .mobile-nav-overlay.open { opacity: 1; pointer-events: all; } /* ===================================================================================== SKILLS — PILL TAGS ===================================================================================== */ .sk-list { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-direction: row; } .sk-item { display: inline-flex; align-items: center; padding: 0.28rem 0.7rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; color: var(--text2); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s; gap: 0; } .sk-item:hover { background: rgba(59, 130, 246, 0.1); color: var(--text); border-color: rgba(59, 130, 246, 0.35); transform: translateY(-1px); } .sk-d { display: none; } /* ===================================================================================== HAMBURGER VISIBLE ON MOBILE — overrides ===================================================================================== */ @media (max-width: 768px) { .hamburger { display: flex; } .nav-resume { display: none; } .toggle-switch { display: flex; } } /* ===================================================================================== LIGHT MODE — element-specific fixes (variables handle most, these handle the rest) ===================================================================================== */ /* Cursor — JS handles color per mode; no CSS override needed */ } /* Video is hidden in light mode — rich gradient takes over */ body.light-mode #hero-video { display: none; } body.light-mode #hero::after { background: /* fade left edge so text is readable */ linear-gradient(to right, rgba(242, 242, 246, 0.55) 0%, transparent 55%), /* fade bottom into page background */ linear-gradient(to bottom, transparent 55%, rgba(242, 242, 246, 0.92) 100%), /* subtle colour tints */ radial-gradient(ellipse 90% 55% at 68% 22%, rgba(99, 102, 241, 0.05) 0%, transparent 60%), radial-gradient(ellipse 55% 75% at 8% 88%, rgba(59, 130, 246, 0.03) 0%, transparent 58%); } /* Hero */ body.light-mode h1.name { color: #0c0c1a; -webkit-text-fill-color: #0c0c1a; background: none; -webkit-background-clip: unset; background-clip: unset; } body.light-mode h1.name em { -webkit-text-stroke: 0; -webkit-text-fill-color: rgba(12, 12, 26, 0.52); color: rgba(12, 12, 26, 0.52); } body.light-mode .hero-pre { color: rgba(0, 0, 0, 0.52); } body.light-mode .hero-typed { color: rgba(0, 0, 0, 0.58); } /* Primary button — solid dark in light mode (glass is invisible on white) */ body.light-mode .btn-p { background: #111128; color: #fff; border-color: #111128; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); } body.light-mode .btn-p:hover { background: #1e1e3a; border-color: #1e1e3a; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); } /* Secondary button — visible border on light bg */ body.light-mode .btn-s { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.2); color: #0c0c1a; -webkit-backdrop-filter: none; backdrop-filter: none; } body.light-mode .btn-s:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.28); } body.light-mode .marquee-wrap { background: #ebebf3; border-top-color: rgba(0, 0, 0, 0.08); border-bottom-color: rgba(0, 0, 0, 0.08); } body.light-mode .marquee-content { color: rgba(0, 0, 0, 0.48); } /* Navbar */ body.light-mode #nav { background: rgba(242, 242, 246, 0.7); } body.light-mode #nav.scrolled { background: rgba(242, 242, 246, 0.95); border-bottom-color: rgba(0, 0, 0, 0.07); } body.light-mode .toggle-switch label { background-color: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.2); } body.light-mode .toggle-switch label::after { color: #444; } body.light-mode .hamburger { border-color: rgba(0,0,0,0.15); } body.light-mode .hamburger span { background: #4a4a66; } body.light-mode .nav-resume { color: #4a4a66; border-color: rgba(0,0,0,0.13); } body.light-mode .nav-resume:hover { color: #0c0c1a; border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.06); } /* About */ body.light-mode .about-quote { color: #0c0c1a; } body.light-mode .about-copy p { color: #4a4a66; } body.light-mode .about-copy strong { color: #0c0c1a; } body.light-mode .about-copy em { color: var(--blue); } body.light-mode .about-left-col { background: rgba(255, 255, 255, 0.82); border-color: rgba(0, 0, 0, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 32px rgba(0, 0, 0, 0.06); } body.light-mode .photo-frame { border-color: rgba(0,0,0,0.1); box-shadow: 0 0 40px rgba(0,0,0,0.06); } /* Experience */ body.light-mode #experience .sec-inner::before { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.12) 15%, rgba(0,0,0,0.12) 85%, transparent); } body.light-mode .exp-item { background: rgba(255, 255, 255, 0.78); border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 20px rgba(0, 0, 0, 0.05); } body.light-mode .exp-item:hover { border-color: rgba(59, 130, 246, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 8px 32px rgba(59, 130, 246, 0.1); } body.light-mode .exp-role { color: #0c0c1a; } body.light-mode .exp-period, body.light-mode .exp-loc { color: #9494ae; } body.light-mode .exp-ul li { color: #4a4a66; } /* Project tags */ body.light-mode .ptag { color: #4a4a66; border-color: rgba(0,0,0,0.1); } /* Skills pills */ body.light-mode .sk-item { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #4a4a66; } body.light-mode .sk-item:hover { background: rgba(59,130,246,0.08); color: #0c0c1a; border-color: rgba(59,130,246,0.3); } body.light-mode .sk-hd { color: #9494ae; border-bottom-color: rgba(0,0,0,0.08); } /* Contact */ body.light-mode .crow { border-bottom-color: rgba(0,0,0,0.07); } body.light-mode .crow:first-of-type { border-top-color: rgba(0,0,0,0.07); } body.light-mode .crow:hover { background: rgba(0, 0, 0, 0.03); } /* Footer */ body.light-mode footer { border-top-color: rgba(0,0,0,0.07); background: rgba(255, 255, 255, 0.6); } /* Mobile nav */ body.light-mode .mobile-nav { background: rgba(242,242,246,0.98); border-left-color: rgba(0,0,0,0.1); } body.light-mode .mobile-nav ul li a { color: #4a4a66; border-bottom-color: rgba(0,0,0,0.08); } body.light-mode .mobile-nav ul li a:hover { color: #0c0c1a; } body.light-mode .mobile-nav-close { border-color: rgba(0,0,0,0.12); color: #9494ae; } body.light-mode .mobile-nav-overlay { background: rgba(0,0,0,0.35); } /* ===================================================================================== DESIGN POLISH ===================================================================================== */ /* Skills — per-category colored top accent + hover glow */ .sk-col:nth-child(1)::before { background: linear-gradient(90deg, transparent, rgba(59,130,246,0.3), transparent); } .sk-col:nth-child(2)::before { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.3), transparent); } .sk-col:nth-child(3)::before { background: linear-gradient(90deg, transparent, rgba(34,211,238,0.3), transparent); } .sk-col:nth-child(4)::before { background: linear-gradient(90deg, transparent, rgba(74,222,128,0.3), transparent); } .sk-col:nth-child(1):hover { box-shadow: 0 4px 28px rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.28); } .sk-col:nth-child(2):hover { box-shadow: 0 4px 28px rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.28); } .sk-col:nth-child(3):hover { box-shadow: 0 4px 28px rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.28); } .sk-col:nth-child(4):hover { box-shadow: 0 4px 28px rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.28); } /* Skills — pill hover colors per category */ .sk-col:nth-child(1) .sk-item:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: var(--text); } .sk-col:nth-child(2) .sk-item:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: var(--text); } .sk-col:nth-child(3) .sk-item:hover { background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.3); color: var(--text); } .sk-col:nth-child(4) .sk-item:hover { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: var(--text); } /* ── Arrow — top-right, fades in on hover ── */ .proj-arr { position: absolute; top: 1.1rem; right: 1.2rem; font-size: 1rem; color: var(--text3); opacity: 0.3; transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease; } .proj-card--feat .proj-arr { opacity: 1; color: var(--cyan); transform: translate(2px, -2px); } /* ── Number label ── */ .proj-num { font-family: var(--serif); font-style: italic; font-size: 0.72rem; color: var(--text3); font-weight: 400; line-height: 1; display: block; margin-bottom: 0.65rem; flex-shrink: 0; transition: color 0.25s ease; } .proj-card--feat .proj-num { color: var(--blue); } /* ── Thumbnail — hidden by default, shown on span-2 featured slot ── */ .proj-thumb { display: none; } .proj-card--span2 .proj-thumb { display: block; width: 100%; height: 155px; object-fit: cover; border-radius: 8px; margin-bottom: 0.75rem; flex-shrink: 0; } /* ── Stats row ── */ .proj-stats { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.55rem; flex-shrink: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s; pointer-events: none; } .proj-card--feat .proj-stats, .proj-card--span2 .proj-stats { opacity: 1; transform: translateY(0); pointer-events: auto; } .proj-stat { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue); background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 4px; padding: 0.12rem 0.5rem; white-space: nowrap; } /* Grid responsive breakpoints */ @media (max-width: 900px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } /* span-2 fills both cols (full width) at tablet */ .proj-card--span2 { grid-column: 1 / -1; } /* wide card body: revert to flex at tablet */ .proj-card--wide .proj-body { display: flex; flex-direction: column; } .proj-card--wide .proj-stats { flex-direction: row; align-items: center; } } @media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; gap: 0.75rem; } .proj-card--span2 .proj-thumb { height: 130px; } } /* Experience — pulsing green dot for current role */ .exp-item:first-child::before { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); animation: currentRolePulse 2.2s ease infinite; } @keyframes currentRolePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } } /* About — decorative large quotation mark */ .about-quote { position: relative; } .about-quote::before { content: '\201C'; position: absolute; top: -1.75rem; left: -0.25rem; font-family: var(--serif); font-size: 6rem; line-height: 1; color: rgba(59, 130, 246, 0.1); pointer-events: none; z-index: 0; user-select: none; } /* ===================================================================================== EXPERIENCE ACCORDION ===================================================================================== */ .exp-ul { overflow: hidden; max-height: 800px; opacity: 1; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.3s ease; } .exp-item.exp-collapsed .exp-ul { max-height: 0; opacity: 0; margin-bottom: 0; } /* Chevron indicator */ .exp-chevron { position: absolute; right: 1.5rem; top: 1.75rem; font-size: 1.3rem; line-height: 1; color: var(--text3); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease; pointer-events: none; user-select: none; transform: rotate(90deg); /* › pointing down = expanded */ } .exp-item.exp-collapsed .exp-chevron { transform: rotate(0deg); /* › pointing right = collapsed */ } .exp-item:hover .exp-chevron { color: var(--text2); } /* ===================================================================================== SKILLS — VISUAL POLISH Colored dots, colored column headers, category-matched hover states ===================================================================================== */ /* Dot color per category (matches the column glow color) */ .sk-col:nth-child(1) .sk-d { background: rgba(59, 130, 246, 0.55); } .sk-col:nth-child(2) .sk-d { background: rgba(139, 92, 246, 0.55); } .sk-col:nth-child(3) .sk-d { background: rgba(34, 211, 238, 0.55); } .sk-col:nth-child(4) .sk-d { background: rgba(74, 222, 128, 0.55); } /* On hover the dot brightens to full color */ .sk-col:nth-child(1) .sk-item:hover .sk-d { background: #3b82f6; } .sk-col:nth-child(2) .sk-item:hover .sk-d { background: #8b5cf6; } .sk-col:nth-child(3) .sk-item:hover .sk-d { background: #22d3ee; } .sk-col:nth-child(4) .sk-item:hover .sk-d { background: #4ade80; } /* Column header inherits category color */ .sk-col:nth-child(1) .sk-hd { color: rgba(59, 130, 246, 0.75); border-bottom-color: rgba(59, 130, 246, 0.2); } .sk-col:nth-child(2) .sk-hd { color: rgba(139, 92, 246, 0.75); border-bottom-color: rgba(139, 92, 246, 0.2); } .sk-col:nth-child(3) .sk-hd { color: rgba(34, 211, 238, 0.75); border-bottom-color: rgba(34, 211, 238, 0.2); } .sk-col:nth-child(4) .sk-hd { color: rgba(74, 222, 128, 0.75); border-bottom-color: rgba(74, 222, 128, 0.2); } /* ===================================================================================== CERTIFICATIONS STRIP ===================================================================================== */ .certs-strip { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .certs-hd { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-bottom: 0.85rem; } .certs-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cert-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.9rem; border-radius: 999px; border: 1px solid rgba(201, 169, 110, 0.22); background: rgba(201, 169, 110, 0.04); font-size: 0.78rem; font-weight: 500; color: var(--text2); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .cert-badge:hover { border-color: rgba(201, 169, 110, 0.5); background: rgba(201, 169, 110, 0.1); color: var(--text); } .cert-ico { font-size: 0.8rem; opacity: 0.65; flex-shrink: 0; } /* Light mode adjustments */ body.light-mode .cert-badge { border-color: rgba(180, 130, 60, 0.3); background: rgba(180, 130, 60, 0.05); color: #555; } body.light-mode .cert-badge:hover { border-color: rgba(180, 130, 60, 0.6); background: rgba(180, 130, 60, 0.1); color: #222; } body.light-mode .certs-strip { border-top-color: rgba(0,0,0,0.1); } /* ======================================================================== MOTION POLISH — Additions + Budget ------------------------------------------------------------------------ DURATION SCALE Micro (state changes, color) : 120–200ms Standard (nav, buttons, reveals) : 280–320ms Reveal (scroll, word) : 650ms Hero entrance : 900ms Page curtain : 480ms EASING FAMILY --spring-ease : cubic-bezier(0.22, 1, 0.36, 1) ← reveals + motion ease-out : cubic-bezier(0.25, 0, 0, 1) ← resolved transitions linear : scroll-scrubbed only MOTION HIERARCHY (what fires when) 1. Page entry/exit — curtain wipe (always, once per nav) 2. Hero entrance — char-rise + stagger (once per session) 3. Scroll reveals — opacity+y, fire-once per element 4. Active interaction — hover, nav indicator, card tilt 5. Reward moments — form send burst, success confetti only WHAT DOES NOT ANIMATE ✗ Skill tags entering viewport (removed — 40+ bursts = overload) ✗ Nav logo click spark (removed — gimmicky) ✗ Duplicate magnetic button vanilla JS (removed — GSAP handles it) ✗ Dead canvas dotGrid (removed — element absent from DOM) ======================================================================== */ /* ── Page Curtain Transition ───────────────────────────────────────────── */ #page-curtain { position: fixed; inset: 0; z-index: 9999; background: var(--bg); transform: scaleY(0); transform-origin: bottom center; pointer-events: none; will-change: transform; } #page-curtain.curtain-in { animation: curtainIn 0.48s cubic-bezier(0.76, 0, 0.24, 1) forwards; pointer-events: all; } #page-curtain.curtain-out { transform: scaleY(1); transform-origin: top center; animation: curtainOut 0.52s cubic-bezier(0.76, 0, 0.24, 1) forwards; } @keyframes curtainIn { from { transform: scaleY(0); transform-origin: bottom center; } to { transform: scaleY(1); transform-origin: bottom center; } } @keyframes curtainOut { from { transform: scaleY(1); transform-origin: top center; } to { transform: scaleY(0); transform-origin: top center; } } /* ── Navbar Sliding Active Indicator ─────────────────────────────────── */ .nav-links { position: relative; } #nav-indicator { position: absolute; bottom: -2px; height: 1px; background: var(--grad); border-radius: 1px; opacity: 0; pointer-events: none; transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } #nav-indicator.visible { opacity: 1; } /* ── Word-reveal for .closing-heading ────────────────────────────────── */ /* Override the grouped scroll-reveal translateY on just this element */ .closing-heading { opacity: 1 !important; transform: none !important; transition: none !important; } .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; /* thin gap between words */ margin-right: 0.22em; } .word-wrap:last-child { margin-right: 0; } .word-inner { display: inline-block; transform: translateY(108%); opacity: 0; /* Single duration matches the rest of the scroll-reveal system */ transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .closing-heading.words-revealed .word-inner { transform: translateY(0); opacity: 1; } /* ── Skill Tag — subtle lift on hover (pill is small, keep movement minimal) */ .sk-tag:hover { transform: translateY(-1px) scale(1.02); } /* ── Experience bullet stagger ───────────────────────────────────────── */ .exp-ul li { opacity: 0; transform: translateX(-6px); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .exp-item.vis .exp-ul li { opacity: 1; transform: translateX(0); } .exp-item.vis .exp-ul li:nth-child(1) { transition-delay: 0.12s; } .exp-item.vis .exp-ul li:nth-child(2) { transition-delay: 0.21s; } .exp-item.vis .exp-ul li:nth-child(3) { transition-delay: 0.30s; } .exp-item.vis .exp-ul li:nth-child(4) { transition-delay: 0.39s; } .exp-item.vis .exp-ul li:nth-child(5) { transition-delay: 0.48s; } .exp-item.vis .exp-ul li:nth-child(6) { transition-delay: 0.54s; } .exp-item.vis .exp-ul li:nth-child(7) { transition-delay: 0.60s; } /* ── Project-page loader — curtain slide (replaces opacity fade) ──────── */ /* Overrides the default opacity-based transition on #loader */ #loader.curtain-loader { transform-origin: top center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); opacity: 1 !important; /* prevent the opacity fade from firing */ } #loader.curtain-loader.loaded { opacity: 1 !important; transform: scaleY(0); pointer-events: none; }