*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ───────────────────────────────────────────────────────────── THEME VARIABLES Only ONE transition rule exists — on during switching. We add .theme-switching via JS for 350ms, then remove it. This means zero transition overhead during normal rendering. ───────────────────────────────────────────────────────────── */ :root { --bg: #0a0a0a; --bg-card: #131313; --text: #f2f2f2; --text-muted: #7a7a7a; --accent: #ffffff; --accent-dim: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.055); --nav-bg: rgba(10,10,10,0.95); --grain-op: 0.032; --font-display: 'Bebas Neue', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; } body.light { --bg: #ffffff; --bg-card: #f2f2f2; --text: #111111; --text-muted: #777777; --accent: #000000; --accent-dim: rgba(0,0,0,0.10); --border: rgba(0,0,0,0.11); --nav-bg: rgba(255,255,255,0.96); --grain-op: 0.022; } body.warm { --bg: #110b07; --bg-card: #1c130c; --text: #f5e9dc; --text-muted: #a68f76; --accent: #ff7a29; --accent-dim: rgba(255,122,41,0.14); --border: rgba(255,150,80,0.14); --nav-bg: rgba(17,11,7,0.95); --grain-op: 0.032; } body.purple { --bg: #0b0810; --bg-card: #14101f; --text: #e6e1ee; --text-muted: #7d7292; --accent: #6d28d9; --accent-dim: rgba(109,40,217,0.14); --border: rgba(109,40,217,0.16); --nav-bg: rgba(11,8,16,0.95); --grain-op: 0.032; } /* The ONLY transition — active during theme switch only */ body.theme-switching, body.theme-switching * { transition: background-color 450ms cubic-bezier(.4,0,.2,1), border-color 450ms cubic-bezier(.4,0,.2,1), color 450ms cubic-bezier(.4,0,.2,1), box-shadow 450ms cubic-bezier(.4,0,.2,1), opacity 450ms cubic-bezier(.4,0,.2,1) !important; } /* ── BASE ── */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── FILM GRAIN ── */ #grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 1000; opacity: var(--grain-op); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .45s steps(1) infinite; will-change: transform; } /* Pause grain animation when overlay is open — prevents iOS fixed positioning bug */ body.overlay-open #grain { animation-play-state: paused; } @keyframes grain { 0% { transform:translate(0,0) } 10% { transform:translate(-2%,-3%) } 20% { transform:translate(3%,2%) } 30% { transform:translate(-1%,4%) } 40% { transform:translate(4%,-1%)} 50% { transform:translate(-3%,3%) } 60% { transform:translate(2%,-4%)} 70% { transform:translate(-4%,1%) } 80% { transform:translate(1%,-2%)} 90% { transform:translate(-2%,4%) } 100% { transform:translate(3%,-3%)} } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; padding: 20px 56px; display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-display); font-size: 20px; letter-spacing: 4px; color: var(--text); text-decoration: none; } .nav-logo b { color: var(--accent); font-weight: 400; } .nav-right { display: flex; align-items: center; gap: 32px; } .nav-links { display: flex; gap: 40px; align-items: center; } .nav-links a { font-size: 11px; letter-spacing: 2px; color: var(--text-muted); text-decoration: none; text-transform: uppercase; font-weight: 500; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s; } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } /* ── THEME TOGGLE — defined once below near nav-center ── */ /* ── HERO LAYOUT (two-column) ── */ .hero-layout { position: relative; z-index: 3; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 100px 56px 60px; max-width: 1400px; margin: 0 auto; } .hero-content { flex: 0 0 auto; max-width: 560px; } /* ── HERO SECTION BASE ── */ #hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-glow-orb { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 65%); right: 5%; top: 15%; pointer-events: none; z-index: 1; border-radius: 50%; animation: orb 8s ease-in-out infinite alternate; } body.light .hero-glow-orb { background: radial-gradient(circle, rgba(0,0,0,.05) 0%, transparent 65%); } @keyframes orb { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-20px) scale(1.08); } } /* ── HERO BENTO + ORBIT SYSTEM ── */ .hero-bento { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; animation: fadeUp .7s ease 2.4s both; } /* ── ORBIT SYSTEM ── */ .orbit-system { position: relative; width: 480px; height: 520px; flex-shrink: 0; will-change: transform; transform: translateZ(0); isolation: isolate; } /* Decorative orbit rings */ .o-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; } .o-ring-1 { /* Matches icon orbit exactly: radius 198px → diameter 396px */ width: 396px; height: 396px; border: 1px dashed rgba(255,255,255,.25); animation: ring-rotate 28s linear infinite; } .o-ring-2 { /* Outer decorative ring */ width: 470px; height: 470px; border: 1px dotted rgba(255,255,255,.07); animation: ring-rotate 42s linear infinite reverse; } .o-ring-3 { /* Inner decorative ring */ width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.05); animation: ring-rotate 18s linear infinite; } @keyframes ring-rotate { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } } /* Photo card */ .orbit-photo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 178px; height: 238px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 50px rgba(255,255,255,.14), 0 28px 72px rgba(0,0,0,.65); z-index: 2; } .orbit-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(15%) contrast(1.1); display: block; } .orbit-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,10,.65) 0%, transparent 55%); pointer-events: none; } .orbit-photo-tag { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,.85); white-space: nowrap; pointer-events: none; } /* Orbit arms */ .o-arm { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; z-index: 4; will-change: transform; } .o-arm-react { animation: o-spin 9s linear infinite; animation-delay: 0s; } .o-arm-python { animation: o-spin 9s linear infinite; animation-delay: -3s; } .o-arm-node { animation: o-spin 9s linear infinite; animation-delay: -6s; } @keyframes o-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Icon buttons */ .o-btn { position: absolute; top: -30px; /* -½ icon height */ left: calc(198px - 30px); /* radius 198px - ½ icon */ width: 60px; height: 60px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; overflow: visible; transition: border-color .2s, box-shadow .2s, transform .15s, color .2s; } .o-arm-react .o-btn { animation: o-counter 9s linear infinite; animation-delay: 0s; } .o-arm-python .o-btn { animation: o-counter 9s linear infinite; animation-delay: -3s; } .o-arm-node .o-btn { animation: o-counter 9s linear infinite; animation-delay: -6s; } @keyframes o-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .o-btn svg { width: 34px; height: 34px; } /* Glow halo — color driven by JS via --gc */ .o-glow { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gc),.25) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .3s; --gc: 255,255,255; } .o-btn.active .o-glow, .o-btn:hover .o-glow { opacity: 1; } .o-btn.active { border-color: rgba(var(--gc),.7); box-shadow: 0 0 24px rgba(var(--gc),.4); --gc: 255,255,255; } /* ── MESSAGE BUBBLE ── */ .o-bubble { position: absolute; bottom: calc(50% + 158px); left: 50%; transform: translateX(-50%) translateY(12px); background: var(--bg-card); border: 1px solid var(--accent); border-radius: 14px; padding: 13px 18px; display: flex; align-items: center; gap: 13px; min-width: 220px; max-width: 290px; z-index: 10; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 24px rgba(255,255,255,.12); white-space: nowrap; } .o-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); } .o-bubble::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--bg-card); border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .o-bubble-icon { flex-shrink: 0; width: 30px; height: 30px; } .o-bubble-icon svg { width: 30px; height: 30px; } .o-bubble-body { display: flex; flex-direction: column; gap: 3px; } .o-bubble-main { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; color: var(--text); line-height: 1; } .o-bubble-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; } /* ── SIDE CARDS ── */ .bento-cards { display: flex; flex-direction: column; gap: 12px; width: 192px; flex-shrink: 0; } .bento-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; } .bento-card:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 10px 32px rgba(0,0,0,.28); transform: translateY(-2px); } .bento-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; } /* ── Card 1: Clock ── */ .b-clock-row { display: flex; align-items: center; gap: 12px; } .b-analog { width: 48px; height: 48px; flex-shrink: 0; } .b-clock-info { display: flex; flex-direction: column; gap: 4px; } .b-time { font-family: var(--font-mono); font-size: 18px; color: var(--text); letter-spacing: .5px; line-height: 1; font-weight: 500; } .b-sub { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: .3px; } /* ── Card 2: Building ── */ .b-build-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .b-ring-svg { width: 44px; height: 44px; flex-shrink: 0; } .b-build-info { display: flex; flex-direction: column; gap: 3px; } .bento-project-name { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; color: var(--text); line-height: 1; } .b-pct { font-family: var(--font-mono); font-size: 9px; color: var(--accent); letter-spacing: .5px; } .bento-stack { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .bento-stack span { padding: 2px 7px; background: var(--accent-dim); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; font-family: var(--font-mono); font-size: 7.5px; color: var(--accent); letter-spacing: .4px; } .b-push { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); } .b-push-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text); flex-shrink: 0; } /* ── Card 3: Terminal ── */ .bento-terminal { min-height: 88px; } .b-scanline { position: absolute; left: 0; right: 0; height: 24px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.025), transparent); pointer-events: none; animation: b-scan 4s linear infinite; top: 0; } @keyframes b-scan { 0% { top: -30%; } 100% { top: 110%; } } .b-term-prompt { font-family: var(--font-mono); font-size: 9.5px; line-height: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-path { color: var(--accent); } .b-dollar { color: var(--text); } .b-cmd { color: rgba(255,255,255,.4); } .b-term-out { font-family: var(--font-mono); font-size: 9.5px; line-height: 1.8; display: flex; align-items: baseline; gap: 6px; min-height: 20px; } .b-arrow { color: var(--text); flex-shrink: 0; } .b-cursor { color: var(--accent); font-size: 11px; animation: blink 1s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} } /* Hide bento on narrow screens */ @media (max-width: 960px) { .hero-layout { flex-direction: column; padding: 100px 32px 60px; } .hero-bento { display: none; } .hero-content { max-width: 100%; } } .hero-name { font-family: var(--font-display); font-size: clamp(72px,11vw,136px); line-height: .9; margin-bottom: 28px; animation: fadeUp .7s ease 2.1s both; } .glitch-line { display: block; } .accent-name { color: var(--accent); } .hero-sub { font-size: 15px; color: var(--text-muted); line-height: 1.8; max-width: 500px; margin-bottom: 40px; animation: fadeUp .7s ease 2.2s both; } .hero-sub strong { color: var(--text); } .hero-title { display: block; color: var(--accent) !important; font-size: 17px; letter-spacing: .02em; margin-bottom: 6px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .7s ease 2.3s both; } .btn-fire { padding: 13px 30px; background: var(--accent); color: var(--bg); border: none; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .5px; border-radius: 5px; text-decoration: none; transition: transform .2s, box-shadow .2s; box-shadow: 0 0 36px rgba(255,255,255,.3); } .btn-fire:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(255,255,255,.45); } .btn-ghost { padding: 13px 30px; background: transparent; color: var(--text); border: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; font-weight: 500; border-radius: 5px; text-decoration: none; transition: border-color .2s, color .2s; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-cv { display: inline-flex; align-items: center; gap: 8px; } /* ── SCROLL CUE ── */ .scroll-cue { position: absolute; bottom: 36px; left: 56px; z-index: 4; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; animation: fadeUp .7s ease 3s both; } .scroll-line { width: 40px; height: 1px; background: var(--text-muted); position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: scl 2s ease-in-out 3.5s infinite; } @keyframes scl { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} } /* ── DIVIDER ── */ .divider { height: 1px; background: var(--border); max-width: 1200px; margin: 0 auto; } /* ── REVEAL ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; } .reveal.on { opacity: 1; transform: translateY(0); } /* ── ABOUT ── */ .about-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 110px 56px; } .section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .section-title { font-family: var(--font-display); font-size: clamp(38px,5vw,58px); line-height: .95; margin-bottom: 32px; } .about-p { font-size: 14.5px; color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; } .about-p strong { color: var(--text); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; } .about-more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 4px; transition: border-color .2s, color .2s, gap .2s; } .about-more-link span { transition: transform .2s; } .about-more-link:hover { border-color: var(--accent); color: var(--accent); gap: 10px; } .about-more-link:hover span { transform: translateX(2px); } .stat-box { padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); } .stat-box:hover { border-color: rgba(255,255,255,.3); } .stat-n { font-family: var(--font-display); font-size: 46px; color: var(--accent); line-height: 1; } .stat-n-icon { display: flex; align-items: center; } .stat-n-icon svg { width: 0.8em; height: 0.8em; } .stat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-muted); margin-top: 4px; } .about-photo { width: 100%; height: 460px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; position: relative; } .about-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: grayscale(15%) contrast(1.05); transition: transform .5s ease, filter .5s ease; } .about-photo:hover .about-photo-img { transform: scale(1.03); filter: grayscale(0%) contrast(1.05); } .about-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,10,.45) 0%, transparent 50%); pointer-events: none; } body.light .about-photo::after { background: linear-gradient(to top, rgba(245,241,235,.4) 0%, transparent 50%); } .about-accent-bar { position: absolute; bottom: -12px; left: -12px; width: 70px; height: 3px; background: var(--accent); border-radius: 2px; } /* ── PROJECTS ── */ .projects-wrap { max-width: 1200px; margin: 0 auto; padding: 0 56px 110px; } .projects-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; } .view-all { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-decoration: none; letter-spacing: 1px; } .view-all:hover { color: var(--accent); } .proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .proj-phase-heading { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; } .proj-phase-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .proj-phase-dot--ongoing { background: transparent; border: 1px solid var(--text-muted); } .proj-phase-dot--completed { background: var(--text); box-shadow: 0 0 8px rgba(var(--accent-rgb),.3); } .proj-status-badge { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); } .proj-status-badge--ongoing { color: var(--text-muted); border-color: var(--border); background: transparent; } .proj-status-badge--completed { color: var(--text); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); } .proj-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; padding: 30px; position: relative; overflow: hidden; transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s, transform .3s; } .proj-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 55%); opacity: 0; transition: opacity .35s; border-radius: 22px; } .proj-card:hover { border-color: rgba(255,255,255,.28); box-shadow: 0 24px 64px rgba(0,0,0,.12), 0 0 40px rgba(255,255,255,.06); } .proj-card:hover::after { opacity: 1; } .proj-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--accent); margin-bottom: 22px; } .proj-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-dim); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; } .proj-title { font-family: var(--font-display); font-size: 30px; letter-spacing: 1px; color: var(--text); margin-bottom: 12px; line-height: 1; } .proj-desc { font-size: 13px; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; } .proj-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; } .tag { padding: 4px 11px; background: var(--accent-dim); border: 1px solid var(--border); border-radius: 100px; font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: .5px; } .proj-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase; position: relative; z-index: 1; } .proj-link span { transition: transform .2s; display: inline-block; } .proj-link:hover span { transform: translateX(5px); } /* ── PROJECT SCREENSHOT PREVIEW ── */ .proj-preview { border-radius: 0; overflow: hidden; border: none; border-bottom: 1px solid var(--border); margin: -30px -30px 24px -30px; background: rgba(0,0,0,.3); position: relative; z-index: 1; } .proj-preview-img-wrap { position: relative; width: 100%; height: 185px; overflow: hidden; } .proj-preview-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; /* Pre-scaled so hover pan never upscales — no blur */ transform: scale(1.06) translateY(0); transform-origin: top center; transition: transform .6s cubic-bezier(.4,0,.2,1); will-change: transform; } /* Pan only — scale stays constant, zero blur */ .proj-card:hover .proj-preview-img { transform: scale(1.06) translateY(-8%); } /* Bottom fade so image dissolves into card content */ .proj-preview-img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px; background: linear-gradient(to bottom, transparent, var(--bg-card)); pointer-events: none; } /* Placeholder shown when image is missing (onerror or no src) */ .proj-preview-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; text-align: center; line-height: 1.6; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255,255,255,.014) 10px, rgba(255,255,255,.014) 20px ); /* Hidden by default — shown via JS onerror or when img fails */ opacity: 0; pointer-events: none; transition: opacity .3s; } .proj-preview-placeholder code { color: var(--accent); font-size: 9px; opacity: .7; } /* Show placeholder when img has error class */ .proj-preview-img.errored ~ .proj-preview-placeholder, .proj-preview-img[src=""] ~ .proj-preview-placeholder { opacity: 1; } /* Stack num + icon side-by-side */ .proj-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .proj-meta .proj-num { margin-bottom: 0; } .proj-meta .proj-icon { margin-bottom: 0; } /* ── SKILLS ── */ .skills-wrap { max-width: 1100px; margin: 0 auto; padding: 0 56px 110px; } .skills-cloud { display: flex; flex-wrap: wrap; gap: 12px; } .sk { display: flex; align-items: center; gap: 9px; padding: 11px 20px; border: 1px solid var(--border); border-radius: 100px; background: var(--bg-card); font-size: 13px; color: var(--text); font-weight: 500; transition: border-color .2s, color .2s, transform .2s, box-shadow .2s; } .sk:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,255,255,.1); } .sk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .55; transition: opacity .2s; } .sk:hover .sk-dot { opacity: 1; } /* ── CONTACT ── */ .contact-wrap { max-width: 860px; margin: 0 auto; padding: 80px 56px 130px; text-align: center; position: relative; } .contact-orb { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; } .contact-title { font-family: var(--font-display); font-size: clamp(52px,8vw,92px); line-height: .92; color: var(--text); margin-bottom: 20px; } .contact-title em { font-style: normal; color: var(--accent); } .contact-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 44px; line-height: 1.7; } .contact-email { display: inline-block; font-family: var(--font-mono); font-size: clamp(13px,2vw,19px); color: var(--text); text-decoration: none; padding: 20px 44px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 36px; transition: border-color .3s, box-shadow .3s, color .3s; } .contact-email:hover { border-color: var(--accent); box-shadow: 0 0 36px rgba(255,255,255,.13); color: var(--accent); } .socials { display: flex; justify-content: center; gap: 14px; } .soc { width: 50px; height: 50px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; transition: border-color .2s, color .2s, transform .2s; } .soc:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-4px); } .soc svg { width: 18px; height: 18px; } /* ── FOOTER ── */ footer { border-top: 1px solid var(--border); padding: 22px 56px; display: flex; justify-content: space-between; align-items: center; } .foot-l, .foot-r { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--text-muted); } .foot-logo { font-family: var(--font-display); font-size: 18px; letter-spacing: 4px; color: var(--text-muted); } .foot-logo b { color: var(--accent); font-weight: 400; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 2px; } /* ── LIGHT MODE OVERRIDES ───────────────────────────────────── Extra polish for elements that need more than variable swaps ───────────────────────────────────────────────────────────── */ /* Nav — stronger shadow to lift off the page */ body.light nav { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.06); } /* Hero name — darker first line so it pops on warm bg */ body.light .hero-name { color: #111111; } body.light .accent-name { color: var(--accent); } /* Hero sub text */ body.light .hero-sub { color: #777777; } /* Orbit photo — drop the dark gradient, use warm vignette instead */ body.light .orbit-photo-overlay { background: linear-gradient(to top, rgba(0,0,0,.18) 0%, transparent 55%); } body.light .orbit-photo { box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 40px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.22); } /* Orbit rings — more visible in light */ body.light .o-ring-1 { border-color: rgba(0,0,0,.30); } body.light .o-ring-2 { border-color: rgba(0,0,0,.10); } body.light .o-ring-3 { border-color: rgba(0,0,0,.08); } /* Icon buttons — stronger border in light */ body.light .o-btn { background: #f2f2f2; border-color: rgba(0,0,0,.14); box-shadow: 0 2px 12px rgba(0,0,0,.08); } /* Bento cards — subtle shadow lifts them off */ body.light .bento-card { box-shadow: 0 2px 16px rgba(0,0,0,.07); } /* Project cards */ body.light .proj-card { box-shadow: 0 2px 16px rgba(0,0,0,.07); } body.light .proj-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 0 30px rgba(0,0,0,.08); } body.light .proj-preview { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.1); } body.light .proj-preview-img-wrap::after { background: linear-gradient(to bottom, transparent, var(--bg-card)); } body.light .proj-preview-placeholder { background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0,0,0,.022) 10px, rgba(0,0,0,.022) 20px ); } /* Skills — full light mode override */ body.light .sk { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.13); box-shadow: 0 2px 10px rgba(0,0,0,.07); } body.light .sk-name { color: rgba(0,0,0,.5); } body.light .sk:hover .sk-name { color: rgba(0,0,0,.85); } /* Per-tech hover states — light mode (monochrome) */ body.light .sk:hover { background: rgba(0,0,0,.05); border-color: var(--accent); box-shadow: 0 0 20px rgba(0,0,0,.12); } /* Stat boxes */ body.light .stat-box { box-shadow: 0 1px 8px rgba(0,0,0,.06); } /* Glow orb — warmer tone in light */ body.light .hero-glow-orb { background: radial-gradient(circle, rgba(0,0,0,.09) 0%, transparent 65%); } /* Contact email box */ body.light .contact-email { background: var(--bg-card); } /* Footer */ body.light footer { box-shadow: 0 -1px 0 rgba(0,0,0,.07); } /* ═══════════════════════════════════════════════════════════════ PROJECTS PAGE — projects.html styles ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #0a0a0a; --bg-card: #131313; --bg-overlay: #101010; --text: #f2f2f2; --text-muted: #7a7a7a; --accent: #ffffff; --accent-dim: rgba(255,255,255,0.08); --accent-rgb: 255,255,255; --border: rgba(255,255,255,0.055); --border-hover: rgba(255,255,255,0.22); --nav-bg: rgba(10,10,10,0.95); --font-display: 'Bebas Neue', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; } body.light { --bg: #ffffff; --bg-card: #f2f2f2; --bg-overlay: #f7f7f7; --text: #111111; --text-muted: #777777; --accent: #000000; --accent-dim: rgba(0,0,0,0.10); --accent-rgb: 0,0,0; --border: rgba(0,0,0,0.10); --border-hover: rgba(0,0,0,0.25); --nav-bg: rgba(255,255,255,0.96); } body.warm { --bg: #110b07; --bg-card: #1c130c; --bg-overlay: #160f09; --text: #f5e9dc; --text-muted: #a68f76; --accent: #ff7a29; --accent-dim: rgba(255,122,41,0.14); --accent-rgb: 255,122,41; --border: rgba(255,150,80,0.14); --border-hover: rgba(255,150,80,0.32); --nav-bg: rgba(17,11,7,0.95); } body.purple { --bg: #0b0810; --bg-card: #14101f; --bg-overlay: #100c19; --text: #e6e1ee; --text-muted: #7d7292; --accent: #6d28d9; --accent-dim: rgba(109,40,217,0.14); --accent-rgb: 109,40,217; --border: rgba(109,40,217,0.16); --border-hover: rgba(109,40,217,0.34); --nav-bg: rgba(13,10,20,0.95); } body.theme-switching, body.theme-switching * { transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease, opacity 350ms ease !important; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ── GRAIN ── */ #grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 1000; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .45s steps(1) infinite; } @keyframes grain { 0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(3%,2%)} 30%{transform:translate(-1%,4%)}40%{transform:translate(4%,-1%)}50%{transform:translate(-3%,3%)} 60%{transform:translate(2%,-4%)}70%{transform:translate(-4%,1%)}80%{transform:translate(1%,-2%)} 90%{transform:translate(-2%,4%)}100%{transform:translate(3%,-3%)} } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; padding: 20px 56px; display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-display); font-size: 20px; letter-spacing: 4px; color: var(--text); text-decoration: none; } .nav-logo b { color: var(--accent); font-weight: 400; } .nav-right { display: flex; align-items: center; gap: 32px; } .nav-center { display: flex; gap: 40px; align-items: center; } .nav-center a { font-size: 11px; letter-spacing: 2px; color: var(--text-muted); text-decoration: none; text-transform: uppercase; font-weight: 500; position: relative; } .nav-center a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s; } .nav-center a:hover { color: var(--text); } .nav-center a:hover::after { width: 100%; } .nav-center a.active { color: var(--accent); } .nav-center a.active::after { width: 100%; } /* ── TOGGLE (4-way: light / dark / warm / purple) ── */ #theme-toggle { width: 102px; height: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; position: relative; display: flex; align-items: center; padding: 3px; overflow: hidden; transform: translateZ(0); /* GPU layer — fixes webkit overflow+border-radius clipping bug */ transition: border-color .3s cubic-bezier(.4,0,.2,1); } #theme-toggle:hover { border-color: var(--accent); } .t-thumb { width: 24px; height: 22px; border-radius: 50%; background: var(--accent); position: absolute; left: 3px; top: 3px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 2px 10px rgba(0,0,0,.25); will-change: transform; } body:not(.light):not(.warm):not(.purple) .t-thumb { transform: translateX(24px); } body.warm .t-thumb { transform: translateX(48px); } body.purple .t-thumb { transform: translateX(72px); } .t-opt { position: relative; z-index: 1; width: 24px; height: 22px; border: none; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: color .35s cubic-bezier(.4,0,.2,1), transform .2s ease-out; } .t-opt:active { transform: scale(.85); } body.light .t-opt[data-theme="light"], body:not(.light):not(.warm):not(.purple) .t-opt[data-theme="dark"], body.warm .t-opt[data-theme="warm"], body.purple .t-opt[data-theme="purple"] { color: var(--bg); } /* ══════════════════════════════════════════ PAGE HEADER ══════════════════════════════════════════ */ .page-header { padding: 130px 56px 64px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-header-left { position: relative; z-index: 1; } .ph-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; animation: fadeUp .6s ease .05s both; } .ph-label::before { content: ''; width: 28px; height: 1px; background: var(--accent); opacity: .5; } .ph-title { font-family: var(--font-display); font-size: clamp(72px, 11vw, 140px); line-height: .85; letter-spacing: 1px; color: var(--text); animation: fadeUp .7s ease .1s both; } .ph-title em { font-style: normal; color: var(--accent); display: block; } .page-header-right { position: relative; z-index: 1; text-align: right; animation: fadeUp .7s ease .2s both; } .ph-count { font-family: var(--font-display); font-size: 96px; line-height: 1; color: var(--border); letter-spacing: -2px; pointer-events: none; } .ph-sub { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 280px; text-align: right; margin-top: 8px; } /* ══════════════════════════════════════════ PROJECT ROW LIST — OPTION B Asymmetric split: scrolling list left, sticky cascading preview right ══════════════════════════════════════════ */ .projects-list { position: relative; } /* Two-column outer wrapper */ .projects-b-layout { display: grid; grid-template-columns: 1fr 420px; align-items: start; } .projects-b-left { border-right: 1px solid var(--border); } .projects-b-right { position: sticky; top: 61px; height: calc(100vh - 61px); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; } /* ── Project rows (left column — text only) ── */ .proj-row { display: block; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; transition: border-color .3s, opacity .35s; animation: fadeUp .6s ease both; min-height: 120px; } .proj-row:last-child { border-bottom: none; } .proj-row:hover { border-color: var(--border-hover); } /* Dim inactive rows */ .proj-row--inactive { opacity: 0.5; } .proj-row--inactive:hover { opacity: 0.75; } /* 3px accent bar grows up from bottom on hover OR when active */ .proj-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; z-index: 2; } .proj-row:hover::before, .proj-row--active::before { transform: scaleY(1); } /* Accent bg wash on hover OR when active */ .proj-row::after { content: ''; position: absolute; inset: 0; background: var(--accent-dim); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); pointer-events: none; } .proj-row:hover::after, .proj-row--active::after { transform: scaleX(1); } /* Keep title accented when row is active */ .proj-row--active .pr-title { color: var(--accent); } .proj-row--active .pr-arrow { opacity: 1; transform: translate(4px,-4px); color: var(--accent); } /* Info panel — full width, roomier type */ .pr-info { padding: 32px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; gap: 10px; } .pr-top { display: flex; align-items: center; justify-content: space-between; } .pr-num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--text-muted); } .pr-arrow { font-size: 16px; color: var(--text-muted); transition: transform .3s, color .3s; opacity: 0; } .pr-phase-badge { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-muted); } .pr-phase-badge--ongoing { color: var(--text-muted); border-color: var(--border); background: transparent; } .pr-phase-badge--completed { color: var(--text); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); } .proj-row--filtered-out, .pb-card--filtered-out { display: none !important; } .proj-filter-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 0 56px; font-family: var(--font-mono); } .proj-filter-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border-radius: 30px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; } .proj-filter-btn span { font-size: 9px; opacity: .6; } .proj-filter-btn:hover { border-color: var(--border-hover); color: var(--text); } .proj-filter-btn--active { background: var(--accent); border-color: var(--accent); color: var(--bg); } .proj-filter-btn--active span { opacity: .8; } .proj-row:hover .pr-arrow { transform: translate(4px,-4px); color: var(--accent); opacity: 1; } .pr-title { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 56px); letter-spacing: .5px; color: var(--text); line-height: .92; transition: color .2s; } .proj-row:hover .pr-title { color: var(--accent); } .pr-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; } .pr-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; } .pr-tag { padding: 3px 9px; background: var(--accent-dim); border: 1px solid var(--border); border-radius: 100px; font-size: 9px; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: .5px; white-space: nowrap; } /* Mobile image strip — hidden on desktop, revealed by mobile.css */ .pr-img-mobile { display: none; } .pr-img-mobile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--accent-rgb),.2) 0%, transparent 60%); } /* ── Right sticky preview stack ── */ .pb-hint { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; text-align: right; margin-top: auto; flex-shrink: 0; } .pb-stack { display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .pb-card { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; transition: border-color .4s ease, box-shadow .4s ease; } .pb-card:hover { border-color: var(--border-hover); } .pb-card--active { border-color: rgba(var(--accent-rgb),.5); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.08), 0 20px 48px rgba(0,0,0,.4); } .pb-card-img { overflow: hidden; position: relative; height: 72px; transition: height .42s cubic-bezier(.16,1,.3,1); } .pb-card--active .pb-card-img { height: 210px; } .pb-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1), filter .4s; filter: brightness(.8) saturate(.9); } .pb-card--active .pb-card-img img { transform: scale(1.04); filter: brightness(.95) saturate(1.1); } .pb-card-placeholder { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-card); z-index: 0; } .pb-card-placeholder.visible { display: flex; } /* Ensure loaded image always sits above overlay/placeholder */ .pb-card-img img { position: relative; z-index: 1; } .pb-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--accent-rgb),.22) 0%, transparent 60%); opacity: 0; transition: opacity .4s; } .pb-card--active .pb-card-overlay { opacity: 1; } /* Corner brackets on active card */ .pb-card--active .pb-card-img::before, .pb-card--active .pb-card-img::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; opacity: .7; z-index: 2; } .pb-card--active .pb-card-img::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; } .pb-card--active .pb-card-img::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; } .pb-card-label { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg-card); border-top: 1px solid var(--border); gap: 8px; } .pb-card-label-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pb-card-num { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--accent); flex-shrink: 0; } .pb-card-name { font-family: var(--font-display); font-size: 14px; letter-spacing: .5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; } .pb-card--active .pb-card-name { color: var(--text); } .pb-card-cat { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; max-height: 0; transition: opacity .35s, max-height .35s; } .pb-card--active .pb-card-cat { opacity: 1; max-height: 20px; } .pb-card-arrow { font-size: 14px; color: var(--accent); flex-shrink: 0; opacity: 0; transform: translate(0,0); transition: opacity .3s, transform .3s; } .pb-card--active .pb-card-arrow { opacity: 1; transform: translate(2px,-2px); } /* Mobile: stack vertically */ @media (max-width: 900px) { .projects-b-layout { grid-template-columns: 1fr; } .projects-b-left { border-right: none; } .projects-b-right { display: none; } .pr-info { padding: 24px 20px; } } /* ── FOOTER ── */ footer { border-top: 1px solid var(--border); padding: 22px 56px; display: flex; justify-content: space-between; align-items: center; } .foot-l, .foot-r { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--text-muted); } .foot-logo { font-family: var(--font-display); font-size: 18px; letter-spacing: 4px; color: var(--text-muted); } .foot-logo b { color: var(--accent); font-weight: 400; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 2px; } /* ── ANIMATIONS ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .overlay-anim { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } #proj-overlay.open .overlay-anim { opacity: 1; transform: translateY(0); } /* ── LIGHT MODE ── */ body.light nav { box-shadow: 0 1px 0 rgba(0,0,0,.08); } body.light .proj-row:hover { background: transparent; } body.light .o-screenshot { background: var(--bg-card); } /* ── MOBILE ── */ @media (max-width: 768px) { a, button, .proj-row { cursor: pointer; } nav { padding: 14px 20px; } .nav-center { gap: 22px; } .page-header { padding: 100px 24px 44px; flex-direction: column; align-items: flex-start; gap: 16px; } .ph-title { font-size: clamp(56px, 14vw, 80px); } .ph-count { font-size: 64px; } .projects-b-layout { grid-template-columns: 1fr; } .projects-b-left { border-right: none; } .projects-b-right { display: none; } .pr-info { padding: 24px 20px; } .overlay-nav { padding: 14px 20px; } .overlay-hero { padding: 32px 24px; grid-template-columns: 1fr; } .oh-right { display: none; } .oh-title { font-size: clamp(38px, 9vw, 60px); } .overlay-body { grid-template-columns: 1fr; } .overlay-main { padding: 32px 24px; border-right: none; border-bottom: 1px solid var(--border); } .overlay-sidebar { padding: 32px 24px; } footer { padding: 20px 24px; flex-direction: column; gap: 4px; text-align: center; } } /* ══════════════════════════════════════════════════════ PROJECT OVERLAY — Futuristic HUD Design ══════════════════════════════════════════════════════ */ /* Dot-grid background texture */ #proj-overlay { position: fixed; inset: 0; z-index: 9000; background: var(--bg); background-image: radial-gradient(circle, rgba(var(--accent-rgb),.06) 1px, transparent 1px); background-size: 28px 28px; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } #proj-overlay.open { display: block; animation: overlayFadeIn .35s ease forwards; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .ol-panel { min-height: 100vh; transform: translateY(40px); transition: transform .5s cubic-bezier(.16,1,.3,1); } #proj-overlay.open .ol-panel { transform: translateY(0); } /* ── Nav bar ── */ .ol-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 16px 56px; background: rgba(7,7,10,.88); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } body.light .ol-nav { background: rgba(240,235,226,.92); } .ol-nav-id { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; } .ol-nav-slash, .ol-nav-dash { color: var(--accent); } .ol-nav-right { display: flex; align-items: center; gap: 16px; } .ol-type-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); padding: 4px 12px; border-radius: 100px; text-transform: uppercase; } .ol-close { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 100px; padding: 7px 18px; transition: border-color .2s, color .2s, background .2s; } .ol-close:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); } /* ── Hero title block ── */ .ol-hero { padding: 52px 56px 36px; border-bottom: 1px solid var(--border); position: relative; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .05s, transform .5s ease .05s; } #proj-overlay.open .ol-hero { opacity: 1; transform: translateY(0); } .ol-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; } .ol-title { font-family: var(--font-display); font-size: clamp(44px, 6vw, 88px); line-height: .88; letter-spacing: .5px; color: var(--text); max-width: 820px; margin-bottom: 28px; } .ol-meta-row { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 20px; } .ol-meta-item { display: flex; flex-direction: column; gap: 4px; } .ol-meta-key { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2.5px; color: var(--text-muted); text-transform: uppercase; } .ol-meta-val { font-size: 13px; font-weight: 500; color: var(--text); } .ol-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px; width: fit-content; } .ol-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ol-pulse 2s ease-in-out infinite; } @keyframes ol-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)} } /* ── Cinematic image frame ── */ .ol-visual { padding: 0 56px 0; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .1s, transform .5s ease .1s; } #proj-overlay.open .ol-visual { opacity: 1; transform: translateY(0); } .ol-frame { position: relative; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 6px; height: clamp(240px, 42vh, 420px); background: var(--bg-card); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.05), 0 24px 64px rgba(0,0,0,.4), inset 0 0 80px rgba(var(--accent-rgb),.03); } .ol-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.92) saturate(1.1); } /* Scanline overlay */ .ol-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px ); mix-blend-mode: multiply; } /* Corner brackets */ .ol-frame-corner { position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; opacity: .8; } .ol-fc-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; } .ol-fc-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; } .ol-fc-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; } .ol-fc-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; } /* Top info bar on image */ .ol-frame-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: rgba(255,255,255,.6); text-transform: uppercase; } .ol-fb-label { flex: 1; } .ol-fb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text); animation: ol-pulse 1.8s ease-in-out infinite; } .ol-fb-live { color: var(--text); } /* Stats strip */ .ol-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; margin-bottom: 0; } .ol-stat { padding: 16px 20px; border-right: 1px solid var(--border); position: relative; overflow: hidden; transition: background .2s; } .ol-stat:last-child { border-right: none; } .ol-stat:hover { background: var(--accent-dim); } .ol-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity .2s; } .ol-stat:hover::before { opacity: 1; } .ol-stat-num { font-family: var(--font-display); font-size: 28px; color: var(--text); letter-spacing: .5px; line-height: 1; margin-bottom: 4px; } .ol-stat-num em { font-style: normal; color: var(--accent); } .ol-stat-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; } /* ── Content grid ── */ .ol-body { display: grid; grid-template-columns: 1fr 320px; gap: 0; border-top: 1px solid var(--border); margin-top: 0; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .15s, transform .5s ease .15s; } #proj-overlay.open .ol-body { opacity: 1; transform: translateY(0); } /* ── Overlay two-column top row ── */ .ol-top-row { display: grid; grid-template-columns: 1fr 480px; align-items: stretch; border-bottom: 1px solid var(--border); } .ol-top-row .ol-hero { border-bottom: none; padding: 52px 48px 40px; display: flex; flex-direction: column; justify-content: center; } .ol-right-col { display: flex; flex-direction: column; border-left: 1px solid var(--border); padding: 24px 32px 24px 24px; gap: 16px; justify-content: center; } .ol-top-row .ol-visual { padding: 0; opacity: 1 !important; transform: none !important; } .ol-top-row .ol-frame { height: 220px; min-height: unset; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb),.2); } .ol-top-row .ol-stats { border-radius: 8px; border: 1px solid var(--border); grid-template-columns: 1fr; } .ol-top-row .ol-stats .ol-stat:last-child { border-right: none; } @media (max-width: 768px) { .ol-top-row { grid-template-columns: 1fr; } .ol-top-row .ol-hero { padding: 24px 20px 20px; border-bottom: 1px solid var(--border); } .ol-right-col { border-left: none; border-top: 1px solid var(--border); padding: 20px; } .ol-top-row .ol-frame { height: 180px; } } .ol-main { padding: 48px 56px; border-right: 1px solid var(--border); } .ol-aside { padding: 48px 36px; } .ol-sec { margin-bottom: 44px; } .ol-sec-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .ol-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .ol-desc { font-size: 14.5px; color: var(--text); line-height: 1.9; font-weight: 300; } .ol-desc p + p { margin-top: 14px; } /* Feature list — numbered */ .ol-features { list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: feat; } .ol-feat { counter-increment: feat; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); transition: background .2s; } .ol-feat:first-child { border-top: 1px solid var(--border); } .ol-feat::before { content: counter(feat, decimal-leading-zero); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--accent); padding-top: 3px; opacity: .7; } .ol-feat-body {} .ol-feat-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .ol-feat-desc { font-size: 12px; color: var(--text-muted); line-height: 1.65; } /* Sidebar */ .ol-stack { display: flex; flex-wrap: wrap; gap: 7px; } .ol-chip { padding: 5px 12px; background: var(--accent-dim); border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; color: var(--text); transition: border-color .2s, box-shadow .2s; } .ol-chip:hover { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.2); } /* Progress */ .ol-prog-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); } .ol-prog-pct { font-size: 20px; font-family: var(--font-display); color: var(--accent); } .ol-prog-track { height: 3px; background: var(--border); border-radius: 2px; position: relative; overflow: visible; } .ol-prog-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0; transition: width 1.4s cubic-bezier(.16,1,.3,1) .3s; position: relative; } .ol-prog-glow { position: absolute; top: -3px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.8); opacity: 0; transition: opacity .3s .3s; } #proj-overlay.open .ol-prog-glow { opacity: 1; } /* Links */ .ol-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--accent-dim); text-decoration: none; margin-bottom: 8px; transition: border-color .2s, background .2s; } .ol-link:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.1); } .ol-link-name { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .ol-link-arrow { font-size: 13px; color: var(--text-muted); transition: transform .2s; } .ol-link:hover .ol-link-arrow { transform: translate(3px,-3px); color: var(--accent); } /* ── Lightbox ── */ #lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; } #lightbox.open { display: flex; animation: overlayFadeIn .25s ease forwards; } #lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 32px 80px rgba(0,0,0,.6); animation: lbZoom .3s cubic-bezier(.16,1,.3,1) forwards; } @keyframes lbZoom { from { transform: scale(.94); } to { transform: scale(1); } } #lightbox-close { position: absolute; top: 20px; right: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.5); background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: color .2s, border-color .2s; } #lightbox-close:hover { color: #fff; border-color: rgba(255,255,255,.4); } /* ── Gallery filmstrip ── */ .ol-strip-section { border-top: 1px solid var(--border); padding: 40px 0 60px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .2s, transform .5s ease .2s; } #proj-overlay.open .ol-strip-section { opacity: 1; transform: translateY(0); } .ol-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 56px 12px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.25) transparent; } .ol-strip-item { flex-shrink: 0; width: 260px; height: 156px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); position: relative; cursor: zoom-in; background: var(--bg-card); transition: border-color .25s, transform .25s, box-shadow .25s; } .ol-strip-item:hover { border-color: var(--accent); transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 20px rgba(var(--accent-rgb),.15); } .ol-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .ol-strip-item-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,.65); text-transform: uppercase; opacity: 0; transition: opacity .2s; } .ol-strip-item:hover .ol-strip-item-label { opacity: 1; } /* Light mode tweaks */ body.light .ol-frame { box-shadow: 0 8px 32px rgba(0,0,0,.12); } body.light .ol-scanlines { opacity: .3; } /* Mobile */ @media (max-width: 768px) { .ol-nav { padding: 12px 20px; } .ol-nav-id { display: none; } .ol-hero { padding: 28px 20px 24px; } .ol-title { font-size: clamp(32px, 8vw, 52px); line-height: .9; } .ol-meta-row { gap: 20px; } .ol-visual { padding: 0 16px; } .ol-frame { height: 220px; } .ol-stats { grid-template-columns: 1fr; } .ol-stat { padding: 12px 16px; } .ol-stat-num { font-size: 22px; } .ol-body { grid-template-columns: 1fr; margin-top: 20px; } .ol-main { padding: 28px 20px; border-right: none; border-bottom: 1px solid var(--border); } .ol-aside { padding: 24px 20px; } .ol-feat { grid-template-columns: 24px 1fr; gap: 10px; padding: 14px 0; } .ol-strip-section { padding: 24px 0 40px; } .ol-strip { padding: 4px 16px 12px; } .ol-strip-item { width: 180px; height: 108px; } .ol-sec-label { padding: 0 !important; } .ol-close span:last-child { display: none; } .ol-type-badge { display: none; } }