/* ============================================================ DHEERAJ NAGAR PORTFOLIO — STYLES Neo-Industrial Dark Theme ============================================================ */ /* ============================================================ THEME SYSTEM — CSS Custom Properties All themes defined here. JS applies [data-theme] to . To add a new theme: copy a block, change the selector & values, then add an entry to the cycle in script.js. ============================================================ */ /* ---------- DEFAULT / BLUE THEME ---------- */ :root { --bg: #050d1a; --bg-2: #071221; --bg-3: #0c1a2e; --surface: #0f2040; --surface-2: #162a50; --border: rgba(59, 130, 246, 0.12); --border-hover: rgba(59, 130, 246, 0.5); --text: #e8f0ff; --text-2: #7ea8e0; --text-3: #3d6090; --accent: #3b82f6; --accent-2: #1d4ed8; --accent-glow: rgba(59, 130, 246, 0.22); --accent-glow-strong: rgba(59, 130, 246, 0.50); --explorer-bg: #071020; --explorer-sidebar: #040c18; --explorer-border: #112240; --explorer-hover: #0e1d38; --explorer-selected: rgba(59, 130, 246, 0.12); --nav-scrolled-bg: rgba(5, 13, 26, 0.90); --footer-bg: #040c18; --statusbar-bg: #0a1828; --hero-radial: rgba(59, 130, 246, 0.08); --footer-glow-color: rgba(59, 130, 246, 0.06); --mobile-menu-bg: rgba(5, 13, 26, 0.97); --scrollbar-thumb: rgba(59, 130, 246, 0.30); --theme-fab-bg: rgba(15, 32, 64, 0.78); --theme-fab-border: rgba(59,130,246,0.28); --cursor-color: 59, 130, 246; --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* ---------- DARK THEME ---------- */ [data-theme="dark"] { --bg: #050505; --bg-2: #0a0a0c; --bg-3: #111114; --surface: #151518; --surface-2: #1e1e24; --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 94, 30, 0.4); --text: #f8f8f8; --text-2: #a0a0ab; --text-3: #5a5a66; --accent: #ff5e1e; --accent-2: #e03c00; --accent-glow: rgba(255, 94, 30, 0.20); --accent-glow-strong: rgba(255, 94, 30, 0.45); --explorer-bg: #0b0b0e; --explorer-sidebar: #08080a; --explorer-border: #1f1f26; --explorer-hover: #181820; --explorer-selected: rgba(255, 94, 30, 0.12); --nav-scrolled-bg: rgba(8, 8, 9, 0.85); --footer-bg: #050506; --statusbar-bg: #141418; --hero-radial: rgba(255, 107, 53, 0.08); --footer-glow-color: rgba(255, 107, 53, 0.06); --mobile-menu-bg: rgba(8, 8, 9, 0.97); --scrollbar-thumb: rgba(255, 107, 53, 0.3); --theme-fab-bg: rgba(30, 30, 36, 0.78); --theme-fab-border: rgba(255,255,255,0.1); --cursor-color: 255, 94, 30; --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* ---------- LIGHT THEME ---------- */ [data-theme="light"] { --bg: #f4f4f0; --bg-2: #eaeae4; --bg-3: #ddddd5; --surface: #ffffff; --surface-2: #f0f0eb; --border: rgba(0, 0, 0, 0.09); --border-hover: rgba(224, 92, 0, 0.35); --text: #111110; --text-2: #555550; --text-3: #999990; --accent: #e05c00; --accent-2: #b84500; --accent-glow: rgba(224, 92, 0, 0.18); --accent-glow-strong: rgba(224, 92, 0, 0.40); --explorer-bg: #f0f0eb; --explorer-sidebar: #e6e6e0; --explorer-border: #d0d0c8; --explorer-hover: #e8e8e2; --explorer-selected: rgba(224, 92, 0, 0.10); --nav-scrolled-bg: rgba(244, 244, 240, 0.92); --footer-bg: #eaeae4; --statusbar-bg: #e2e2dc; --hero-radial: rgba(224, 92, 0, 0.06); --footer-glow-color: rgba(224, 92, 0, 0.05); --mobile-menu-bg: rgba(244, 244, 240, 0.98); --scrollbar-thumb: rgba(224, 92, 0, 0.25); --theme-fab-bg: rgba(255, 255, 255, 0.78); --theme-fab-border: rgba(0,0,0,0.12); --cursor-color: 224, 92, 0; } /* ---------- BLUE THEME ---------- */ [data-theme="blue"] { --bg: #050d1a; --bg-2: #071221; --bg-3: #0c1a2e; --surface: #0f2040; --surface-2: #162a50; --border: rgba(59, 130, 246, 0.12); --border-hover: rgba(59, 130, 246, 0.5); --text: #e8f0ff; --text-2: #7ea8e0; --text-3: #3d6090; --accent: #3b82f6; --accent-2: #1d4ed8; --accent-glow: rgba(59, 130, 246, 0.22); --accent-glow-strong: rgba(59, 130, 246, 0.50); --explorer-bg: #071020; --explorer-sidebar: #040c18; --explorer-border: #112240; --explorer-hover: #0e1d38; --explorer-selected: rgba(59, 130, 246, 0.12); --nav-scrolled-bg: rgba(5, 13, 26, 0.90); --footer-bg: #040c18; --statusbar-bg: #0a1828; --hero-radial: rgba(59, 130, 246, 0.08); --footer-glow-color: rgba(59, 130, 246, 0.06); --mobile-menu-bg: rgba(5, 13, 26, 0.97); --scrollbar-thumb: rgba(59, 130, 246, 0.30); --theme-fab-bg: rgba(15, 32, 64, 0.78); --theme-fab-border: rgba(59,130,246,0.2); --cursor-color: 59, 130, 246; } /* ---------- PURPLE THEME ---------- */ [data-theme="purple"] { --bg: #0d0814; --bg-2: #110c1a; --bg-3: #170f22; --surface: #1e1030; --surface-2: #271540; --border: rgba(168, 85, 247, 0.12); --border-hover: rgba(168, 85, 247, 0.5); --text: #f0e8ff; --text-2: #b090d8; --text-3: #6040a0; --accent: #a855f7; --accent-2: #7c3aed; --accent-glow: rgba(168, 85, 247, 0.22); --accent-glow-strong: rgba(168, 85, 247, 0.50); --explorer-bg: #0c0814; --explorer-sidebar: #090610; --explorer-border: #1f1030; --explorer-hover: #180e28; --explorer-selected: rgba(168, 85, 247, 0.12); --nav-scrolled-bg: rgba(13, 8, 20, 0.90); --footer-bg: #090610; --statusbar-bg: #140a20; --hero-radial: rgba(168, 85, 247, 0.08); --footer-glow-color: rgba(168, 85, 247, 0.06); --mobile-menu-bg: rgba(13, 8, 20, 0.97); --scrollbar-thumb: rgba(168, 85, 247, 0.30); --theme-fab-bg: rgba(30, 16, 48, 0.78); --theme-fab-border: rgba(168,85,247,0.2); --cursor-color: 168, 85, 247; } /* ---------- GREEN THEME ---------- */ [data-theme="green"] { --bg: #030f08; --bg-2: #05140a; --bg-3: #091a0e; --surface: #0c2014; --surface-2: #112b1c; --border: rgba(34, 197, 94, 0.10); --border-hover: rgba(34, 197, 94, 0.45); --text: #e8ffe0; --text-2: #70c090; --text-3: #305040; --accent: #22c55e; --accent-2: #16a34a; --accent-glow: rgba(34, 197, 94, 0.20); --accent-glow-strong: rgba(34, 197, 94, 0.48); --explorer-bg: #041008; --explorer-sidebar: #020c06; --explorer-border: #0e2214; --explorer-hover: #0a1c10; --explorer-selected: rgba(34, 197, 94, 0.10); --nav-scrolled-bg: rgba(3, 15, 8, 0.90); --footer-bg: #020c06; --statusbar-bg: #081508; --hero-radial: rgba(34, 197, 94, 0.07); --footer-glow-color: rgba(34, 197, 94, 0.05); --mobile-menu-bg: rgba(3, 15, 8, 0.97); --scrollbar-thumb: rgba(34, 197, 94, 0.28); --theme-fab-bg: rgba(12, 32, 20, 0.78); --theme-fab-border: rgba(34,197,94,0.2); --cursor-color: 34, 197, 94; } /* ---------- RED THEME ---------- */ [data-theme="red"] { --bg: #150606; --bg-2: #210909; --bg-3: #2a1010; --surface: #351313; --surface-2: #461818; --border: rgba(255, 59, 59, 0.13); --border-hover: rgba(255, 59, 59, 0.52); --text: #fff0f0; --text-2: #f0a0a0; --text-3: #945151; --accent: #ff3b3b; --accent-2: #ff6b6b; --accent-glow: rgba(255, 59, 59, 0.35); --accent-glow-strong: rgba(255, 59, 59, 0.58); --explorer-bg: #180707; --explorer-sidebar: #100404; --explorer-border: #3a1414; --explorer-hover: #2b1010; --explorer-selected: rgba(255, 59, 59, 0.13); --nav-scrolled-bg: rgba(21, 6, 6, 0.90); --footer-bg: #100404; --statusbar-bg: #260d0d; --hero-radial: rgba(255, 59, 59, 0.10); --footer-glow-color: rgba(255, 59, 59, 0.07); --mobile-menu-bg: rgba(21, 6, 6, 0.97); --scrollbar-thumb: rgba(255, 59, 59, 0.34); --theme-fab-bg: rgba(53, 19, 19, 0.78); --theme-fab-border: rgba(255,59,59,0.24); --cursor-color: 255, 59, 59; } /* ============================================================ SHARED FONT VARS (not theme-dependent) ============================================================ */ :root { --font-display: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* --- RESET --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; cursor: none; } a { text-decoration: none; color: inherit; } input, select, button { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .logo, .footer-logo, .hero-name, .section-title, .bento-title, .mobile-menu a, .stat-num { font-family: var(--font-display); font-weight: 700; } img { max-width: 100%; } /* ============================================================ CUSTOM CURSOR — theme-aware via --cursor-color ============================================================ */ .cursor-dot { width: 6px; height: 6px; background: rgb(var(--cursor-color)); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.05s, background 0.3s ease; box-shadow: 0 0 8px rgba(var(--cursor-color), 0.8); } .cursor-ring { width: 30px; height: 30px; border: 1.5px solid rgba(var(--cursor-color), 0.5); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.18s ease, height 0.18s ease, border-color 0.3s ease, transform 0.12s ease, opacity 0.12s ease; } body:hover .cursor-ring { opacity: 1; } /* Hover enlarged state — color still from variable */ .cursor-ring.is-hovering { border-color: rgba(var(--cursor-color), 0.9); box-shadow: 0 0 16px rgba(var(--cursor-color), 0.35); } /* ============================================================ PARTICLE CANVAS ============================================================ */ #particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* ============================================================ NAVIGATION ============================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 24px 5%; transition: all 0.4s ease; } nav.scrolled { background: var(--nav-scrolled-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 16px 5%; border-bottom: 1px solid var(--border); box-shadow: 0 4px 40px rgba(0,0,0,0.6); } .logo { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 0; color: var(--text); } .logo-accent { color: var(--accent); } .nav-links { list-style: none; display: flex; gap: 36px; } .nav-link { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); transition: color 0.3s; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; } .nav-link:hover, .nav-link.active { color: var(--text); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-cta { color: var(--accent) !important; border: 1px solid var(--border-hover); padding: 8px 20px; border-radius: 4px; transition: all 0.3s ease !important; } .nav-cta:hover { background: var(--accent); color: #fff !important; box-shadow: 0 0 20px var(--accent-glow); } .nav-cta::after { display: none !important; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: none; padding: 4px; } .hamburger span { width: 24px; height: 2px; background: var(--text); display: block; transition: all 0.3s; } .mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--mobile-menu-bg); z-index: 999; align-items: center; justify-content: center; flex-direction: column; } .mobile-menu.open { display: flex; } .mobile-menu ul { list-style: none; text-align: center; } .mobile-menu li { margin: 20px 0; } .mobile-menu a { font-family: var(--font-display); font-size: 3rem; letter-spacing: 0; color: var(--text-2); transition: color 0.3s; } .mobile-menu a:hover { color: var(--accent); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 4px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.3s ease; cursor: none; border: none; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 0 var(--accent-glow); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px var(--accent-glow-strong); } .btn-ghost { background: transparent; color: var(--text-2); border: 1px solid rgba(255,255,255,0.12); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); } /* ============================================================ SECTION SHARED ============================================================ */ .section-header { margin-bottom: 70px; } .section-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 16px; } .section-title { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem); line-height: 0.98; letter-spacing: 0; color: var(--text); } .section-title em { font-style: normal; color: var(--accent); } /* Scroll fade */ .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s ease; } .fade-in.appear { opacity: 1; transform: translateY(0); } /* ============================================================ SECTION 1: HERO ============================================================ */ .hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .hero-section::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; background: radial-gradient(circle, var(--hero-radial) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 120px 20px 80px; } .hero-meta { margin-bottom: 28px; } .badge { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: #4ade80; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); padding: 7px 16px; border-radius: 100px; text-transform: uppercase; } .hero-name { font-family: var(--font-display); font-size: clamp(3.9rem, 11vw, 9.8rem); line-height: 0.92; letter-spacing: 0; display: flex; flex-direction: column; margin-bottom: 24px; } .hero-surname { color: var(--accent); } /* GLITCH EFFECT */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .glitch:hover::before { animation: glitch-before 0.4s steps(2) forwards; color: #ff4757; clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); transform: translate(-3px, -2px); opacity: 0.8; } .glitch:hover::after { animation: glitch-after 0.4s steps(2) 0.05s forwards; color: #00d2ff; clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); transform: translate(3px, 2px); opacity: 0.8; } @keyframes glitch-before { 0% { transform: translate(-3px, -2px) skew(2deg); } 25% { transform: translate(3px, 2px) skew(-1deg); } 50% { transform: translate(-1px, 3px) skew(1deg); } 100% { transform: translate(0, 0) skew(0deg); opacity: 0; } } @keyframes glitch-after { 0% { transform: translate(3px, 2px) skew(-2deg); } 25% { transform: translate(-3px, -2px) skew(1deg); } 50% { transform: translate(2px, -3px) skew(-1deg); } 100% { transform: translate(0, 0) skew(0deg); opacity: 0; } } .hero-title-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 24px; } .hero-line { flex: 1; max-width: 100px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } .hero-title-wrap .hero-line:last-child { background: linear-gradient(90deg, var(--accent), transparent); } .hero-title { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-2); letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; } .hero-desc { color: var(--text-2); font-size: 1rem; max-width: 600px; margin: 0 auto 40px; line-height: 1.8; } .hero-ctas { display: flex; gap: 16px; justify-content: center; margin-bottom: 60px; flex-wrap: wrap; } .hero-stats { display: flex; align-items: center; justify-content: center; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-width: 450px; margin: 0 auto; background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); } .stat { flex: 1; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .stat-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--accent); line-height: 1; } .stat span:nth-child(2) { font-size: 1.2rem; color: var(--accent); } .stat-label { font-size: 0.7rem; color: var(--text-3); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; } .stat-divider { width: 1px; height: 40px; background: var(--border); } .hero-scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; } .hero-scroll-hint span { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--text-3); } .scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.1); } } /* Hero entrance animation */ @keyframes heroIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-inner { animation: heroIn 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* ============================================================ SECTION 2: SKILLS & EXPERIENCE ============================================================ */ .skills-section { position: relative; z-index: 1; padding: 120px 5%; max-width: 1300px; margin: 0 auto; } .sub-heading { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 30px; display: flex; align-items: center; gap: 10px; } .sub-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); } .skills-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; } /* Skill Bars */ .skill-item { margin-bottom: 28px; } .skill-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; } .skill-pct { font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; } .skill-bar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; } .skill-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 2px; transition: width 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; box-shadow: 0 0 12px var(--accent-glow); } .skill-fill::after { content: ''; position: absolute; right: 0; top: -3px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); } /* Timeline */ .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent), transparent); } .timeline-item { position: relative; margin-bottom: 40px; } .tl-dot { position: absolute; left: -27px; top: 5px; width: 13px; height: 13px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 12px var(--accent); } .tl-year { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.04em; display: block; margin-bottom: 6px; } .tl-content h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; } .tl-content > p:nth-child(3) { font-size: 0.82rem; color: var(--text-2); margin-bottom: 8px; font-family: var(--font-mono); } .tl-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.7; } /* Chips */ .chips-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .chip { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.01em; padding: 8px 16px; border: 1px solid var(--border); border-radius: 100px; color: var(--text-2); background: var(--surface); transition: all 0.3s; cursor: default; } .chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); transform: translateY(-2px); } /* ============================================================ SECTION 3: SHOWCASE ============================================================ */ .showcase-section { position: relative; z-index: 1; padding: 120px 5%; max-width: 1300px; margin: 0 auto; } .showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; } .card-featured .sc-img { min-height: 400px; } .showcase-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; } .showcase-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity 0.4s; } .showcase-card:hover { border-color: var(--border-hover); transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .showcase-card:hover::before { opacity: 1; } .sc-img { width: 100%; height: 260px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .sc-3d-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; } .sc-3d-placeholder svg { max-width: 80%; max-height: 80%; filter: drop-shadow(0 0 12px rgba(255,107,53,0.4)); transition: filter 0.4s; } .showcase-card:hover svg { filter: drop-shadow(0 0 20px rgba(255,107,53,0.7)); animation: svgPulse 2s ease-in-out infinite; } @keyframes svgPulse { 0%, 100% { filter: drop-shadow(0 0 15px rgba(255,107,53,0.6)); } 50% { filter: drop-shadow(0 0 25px rgba(255,107,53,0.9)); } } .wireframe-label { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255,107,53,0.5); letter-spacing: 3px; text-transform: uppercase; margin-top: 12px; } .car-wireframe svg, .weapon-art svg, .brand-art svg { width: 100%; height: 100%; } .sc-content { padding: 28px 30px; } .sc-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 10px; } .sc-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; line-height: 1.3; } .sc-content p { font-size: 0.88rem; color: var(--text-2); line-height: 1.7; margin-bottom: 18px; } .sc-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 16px; } .sc-meta > span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); } .sc-link { font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; transition: gap 0.3s; white-space: nowrap; } .sc-link:hover { text-decoration: underline; } /* ============================================================ SECTION 4: PROJECT ARCHIVE — BENTO GRID ============================================================ */ .projects-section { position: relative; z-index: 1; padding: 120px 5%; max-width: 1400px; margin: 0 auto; } /* ── Filter Bar ── */ .archive-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; padding: 14px 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .filter-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; margin-right: 4px; } .filter-dropdowns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; } .filter-dropdown { position: relative; } .filter-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; cursor: none; transition: all 0.25s ease; white-space: nowrap; letter-spacing: 0.3px; } .filter-btn:hover, .filter-btn.active { border-color: var(--accent); color: var(--text); background: var(--accent-glow); } .filter-btn.active { color: var(--accent); } .filter-chevron { width: 10px; height: 10px; transition: transform 0.25s ease; flex-shrink: 0; } .filter-dropdown.open .filter-chevron { transform: rotate(180deg); } .filter-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .filter-dropdown.open .filter-menu { opacity: 1; transform: translateY(0); pointer-events: all; } .filter-option { display: block; width: 100%; padding: 10px 16px; background: transparent; border: none; color: var(--text-2); font-family: var(--font-body); font-size: 0.82rem; text-align: left; cursor: none; transition: all 0.2s ease; } .filter-option:hover { background: rgba(255,255,255,0.05); color: var(--text); } .filter-option.active { color: var(--accent); background: var(--accent-glow); } .filter-count-wrap { margin-left: auto; } .filter-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); white-space: nowrap; } /* ── Bento Grid ── */ .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Desktop layout */ @media (min-width: 900px) { .bento-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (min-width: 1200px) { .bento-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } /* Wide cards span 2 columns */ .bento-wide { grid-column: span 2; } /* Tall cards span 2 rows on wider screens */ @media (min-width: 900px) { .bento-tall { grid-row: span 2; } } /* ── Individual Bento Card ── */ .bento-card { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; cursor: none; border: 1px solid rgba(255,255,255,0.07); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease; will-change: transform; } .bento-wide { aspect-ratio: 2 / 1; } @media (min-width: 900px) { .bento-tall { aspect-ratio: 1 / 2; } } .bento-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-glow-strong); border-color: rgba(255,255,255,0.14); } .bento-card:hover .bento-overlay { opacity: 0.88; } .bento-card:hover .bento-title { letter-spacing: 0.04em; } .bento-card:hover .bento-scene { transform: scale(1.06); } /* Hidden state when filtered out */ .bento-card.bento-hidden { display: none; } /* ── Card Background ── */ .bento-bg { position: absolute; inset: 0; overflow: hidden; } /* ── Scene SVG Container ── */ .bento-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .bento-svg { width: 90%; height: 90%; object-fit: contain; } /* ── Gradient Overlay ── */ .bento-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.10) 65%, transparent 100% ); opacity: 0.82; transition: opacity 0.4s ease; z-index: 1; } /* ── Badges (top-right) ── */ .bento-badges { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; z-index: 3; } .bento-badge { padding: 4px 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid currentColor; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s ease; } .bento-card:hover .bento-badge { transform: translateY(-2px); } .badge-maya { color: #00b4d8; background: rgba(0,180,216,0.12); border-color: rgba(0,180,216,0.35); } .badge-max { color: #a78bfa; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.35); } .badge-spp { color: #ff8c5a; background: rgba(255,140,90,0.12); border-color: rgba(255,140,90,0.35); } .badge-exr { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); } .badge-ai { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.35); } .badge-vray { color: #fb7185; background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.35); } /* ── Card Content (bottom) ── */ .bento-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 20px 20px; z-index: 2; display: flex; flex-direction: column; gap: 4px; } .bento-count { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; } .bento-title { font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 700; color: #fff; letter-spacing: 0; line-height: 1.1; transition: letter-spacing 0.4s ease; text-transform: uppercase; } /* ── Empty State ── */ .bento-empty { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--text-3); } .bento-empty-icon { display: block; font-size: 2.5rem; margin-bottom: 16px; opacity: 0.4; } .bento-empty p { font-size: 0.9rem; margin-bottom: 20px; } .bento-reset-btn { padding: 10px 24px; background: var(--accent-glow); border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; cursor: none; transition: all 0.25s; } .bento-reset-btn:hover { background: var(--accent-glow-strong); } /* ── Mobile Overrides (≤ 480px) ── */ @media (max-width: 480px) { .projects-section { padding: 80px 4% 60px; } .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .bento-wide { grid-column: span 2; aspect-ratio: 16/9; } .bento-tall { grid-row: span 1; aspect-ratio: 1/1; } .bento-card { border-radius: 18px; aspect-ratio: 1/1; } .bento-title { font-size: 0.95rem; } .bento-count { font-size: 0.58rem; } .bento-badge { font-size: 0.55rem; padding: 3px 7px; } .bento-content { padding: 12px 14px 14px; } .bento-badges { top: 10px; right: 10px; } .archive-filters { padding: 10px 14px; gap: 8px; } .filter-label { display: none; } .filter-btn { padding: 7px 11px; font-size: 0.75rem; } .filter-count-wrap { display: none; } } /* ── Tablet ── */ @media (min-width: 481px) and (max-width: 899px) { .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .bento-wide { grid-column: span 2; } .bento-tall { grid-row: span 1; } } /* [Old Explorer UI removed — replaced by Bento Grid] */ .explorer-addressbar, .explorer-window, .explorer-titlebar, .explorer-menubar, .explorer-toolbar, .explorer-body, .explorer-sidebar, .explorer-content, .explorer-statusbar, .files-grid, .file-item, .folder-icon, .file-icon, .file-ext, .sidebar-item, .addr-path, .addr-btn { display: none; } /* ============================================================ FOOTER ============================================================ */ footer { position: relative; z-index: 1; background: var(--footer-bg); border-top: 1px solid var(--border); overflow: hidden; } ============================================================ */ footer { position: relative; z-index: 1; background: var(--footer-bg); border-top: 1px solid var(--border); overflow: hidden; } .footer-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(circle, var(--footer-glow-color) 0%, transparent 70%); pointer-events: none; } .footer-inner { max-width: 1300px; margin: 0 auto; padding: 80px 5% 40px; } .footer-top { display: grid; grid-template-columns: 1fr 1.5fr 0.8fr; gap: 60px; margin-bottom: 60px; } .footer-logo { font-family: var(--font-display); font-size: 3rem; letter-spacing: 0; } .footer-logo span { color: var(--accent); } .footer-brand p { color: var(--text-2); margin-top: 12px; font-size: 0.9rem; line-height: 1.8; } .footer-cta h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; } .footer-cta p { color: var(--text-2); margin-bottom: 20px; } .footer-links h4 { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: var(--text-2); font-size: 0.88rem; transition: color 0.3s; } .footer-links a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 24px; color: var(--text-3); font-size: 0.78rem; font-family: var(--font-mono); } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ============================================================ SECTION DIVIDERS ============================================================ */ .skills-section, .showcase-section, .projects-section { border-top: 1px solid var(--border); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .skills-layout { grid-template-columns: 1fr; gap: 50px; } .showcase-grid { grid-template-columns: 1fr; } .card-featured { grid-template-columns: 1fr; } .card-featured .sc-img { min-height: 300px; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .hamburger { display: flex; } .hero-name { font-size: clamp(3.5rem, 15vw, 6rem); } .hero-stats { flex-direction: column; max-width: 220px; } .stat-divider { width: 40px; height: 1px; } .explorer-body { height: auto; flex-direction: column; } .explorer-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--explorer-border); height: auto; padding: 10px 0; flex-direction: row; overflow-x: auto; } .sidebar-section { margin-bottom: 0; flex-shrink: 0; } .sidebar-storage { display: none; } .files-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } .addr-search input { width: 120px; } section { padding: 80px 5%; } } /* File link wrapper — makes the whole item clickable */ .file-link { display: contents; color: inherit; text-decoration: none; } .file-item:has(.file-link):hover { border-color: var(--accent); cursor: pointer; } /* ============================================================ GLOBAL THEME TRANSITIONS Apply smooth transitions to everything when theme changes. The .theme-transitioning class is added/removed by JS. ============================================================ */ .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ============================================================ THEME FAB — Floating Action Button (bottom-right) ============================================================ */ .theme-fab { position: fixed; bottom: 24px; right: 24px; top: auto; z-index: 10000; width: 48px; height: 48px; border-radius: 50%; background: var(--theme-fab-bg); border: 1px solid var(--theme-fab-border); display: flex; align-items: center; justify-content: center; cursor: none; padding: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.35s ease, border-color 0.35s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--theme-fab-border), inset 0 1px 0 rgba(255,255,255,0.14); } .theme-fab:hover { transform: scale(1.14) rotate(22deg); box-shadow: 0 8px 32px var(--accent-glow-strong), 0 0 0 1px var(--accent); border-color: var(--accent); } .theme-fab-icon { width: 22px; height: 22px; color: var(--accent); transition: color 0.35s ease; } /* Light theme text color overrides */ [data-theme="light"] nav.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,0.12); } .theme-toast { position: fixed; right: 22px; bottom: 84px; z-index: 9999; min-width: 112px; padding: 9px 14px; border-radius: 999px; background: var(--theme-fab-bg); border: 1px solid var(--theme-fab-border); color: var(--text); font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; box-shadow: 0 14px 34px rgba(0,0,0,0.35), 0 0 26px var(--accent-glow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.35s ease, background 0.35s ease; transform-origin: bottom right; } .theme-toast.show { opacity: 1; transform: translateY(0) scale(1); } /* Mobile adjustments — FAB stays bottom-right */ @media (max-width: 768px) { .theme-fab { bottom: 16px; right: 16px; width: 44px; height: 44px; } .theme-fab-icon { width: 20px; height: 20px; } .theme-toast { bottom: 72px; right: 14px; } } /* ============================================================ TOOLS I USE — grid of tool cards ============================================================ */ .tools-wrap { margin-bottom: 56px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 14px; margin-top: 8px; } .tool-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: center; cursor: default; position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .tool-card::before { content: ''; position: absolute; inset: 0; background: var(--accent-glow); opacity: 0; border-radius: 16px; transition: opacity 0.3s ease; } .tool-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-glow-strong); } .tool-card:hover::before { opacity: 1; } .tool-card:hover .tool-icon-wrap { transform: scale(1.1) rotate(-5deg); } .tool-card:hover .tool-tag { opacity: 1; transform: translateY(0); } .tool-icon-wrap { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); background: var(--accent-glow); border: 1px solid rgba(var(--cursor-color), 0.15); } .tool-svg { width: 40px; height: 40px; } .tool-name { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--text-2); line-height: 1.3; position: relative; z-index: 1; transition: color 0.3s ease; } .tool-card:hover .tool-name { color: var(--text); } .tool-tag { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; color: var(--accent); opacity: 0; transform: translateY(5px); transition: opacity 0.25s ease, transform 0.25s ease; position: relative; z-index: 1; } @media (max-width: 600px) { .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .tool-card { padding: 16px 8px 12px; } .tool-icon-wrap { width: 42px; height: 42px; } .tool-svg { width: 32px; height: 32px; } .tool-name { font-size: 0.62rem; } } @media (max-width: 380px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }