| |
| .proj-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px;} |
| .pf-btn{ |
| padding:8px 20px; |
| background:rgba(124,58,237,0.07); |
| border:1px solid rgba(124,58,237,0.2); |
| color:var(--text-secondary); |
| font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; |
| border-radius:100px; cursor:pointer; |
| transition:all 0.28s var(--ease-back); |
| } |
| .pf-btn:hover{color:var(--text-primary);border-color:rgba(0,255,238,0.4);background:rgba(0,255,238,0.06);} |
| .pf-btn.active{ |
| background:rgba(0,255,238,0.1); border-color:var(--neon-cyan); |
| color:var(--neon-cyan); |
| box-shadow:0 0 16px rgba(0,255,238,0.2); |
| text-shadow:0 0 8px var(--neon-cyan); |
| } |
|
|
| |
| .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;} |
|
|
| |
| .proj-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;} |
| .proj-skel{ |
| height:420px; border-radius:24px; |
| background:linear-gradient(90deg,rgba(124,58,237,0.05) 25%,rgba(0,255,238,0.05) 50%,rgba(124,58,237,0.05) 75%); |
| background-size:200% 100%; animation:shimmer 1.8s infinite; |
| } |
| @keyframes shimmer{to{background-position:-200% 0;}} |
|
|
| |
| .proj-error,.proj-empty{ |
| display:flex;flex-direction:column;align-items:center;gap:14px; |
| padding:80px 0; text-align:center; |
| } |
| .proj-error{color:#ff5090;font-size:48px;} |
| .proj-error p{font-size:15px;color:#ff5090;} |
| .proj-error-detail{font-size:12px!important;color:var(--text-muted)!important;font-family:monospace;} |
| .proj-retry{display:inline-flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer;} |
| .proj-empty{color:var(--text-muted);font-size:48px;} |
| .proj-empty p{font-size:15px;color:var(--text-muted);} |
|
|
| |
| .proj-slide-wrap{position:relative;padding-bottom:80px;} |
| .proj-stage{ |
| display:flex; align-items:center; justify-content:center; |
| gap:24px; min-height:520px; perspective:1200px; |
| } |
|
|
| |
| .proj-card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;} |
|
|
| |
| .sl-card{transition:all 0.55s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;} |
| .sl-center{ |
| width:420px; opacity:1; z-index:3; |
| transform:scale(1) translateZ(0); |
| box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(0,255,238,0.2),0 0 60px rgba(124,58,237,0.15); |
| } |
| .sl-left,.sl-right{width:310px;opacity:0.38;z-index:1;pointer-events:none;} |
| .sl-left {transform:scale(0.86) translateX(-30px) rotateY(12deg);} |
| .sl-right{transform:scale(0.86) translateX(30px) rotateY(-12deg);} |
|
|
| |
| .slide-arrow{ |
| position:absolute;top:50%;transform:translateY(-50%); |
| width:52px;height:52px; |
| background:rgba(124,58,237,0.1); |
| border:1px solid rgba(124,58,237,0.3); border-radius:50%; |
| color:var(--text-primary); font-size:22px; |
| display:flex;align-items:center;justify-content:center; |
| cursor:pointer;z-index:10;backdrop-filter:blur(16px); |
| transition:all 0.28s var(--ease-back); |
| } |
| .slide-arrow:hover{ |
| background:rgba(0,255,238,0.15); |
| border-color:var(--neon-cyan); |
| color:var(--neon-cyan); |
| transform:translateY(-50%) scale(1.1); |
| box-shadow:0 0 24px rgba(0,255,238,0.3); |
| } |
| .slide-arrow.left{left:0;}.slide-arrow.right{right:0;} |
|
|
| |
| .slide-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;} |
| .sd{ |
| width:8px;height:8px;border-radius:50%; |
| background:rgba(124,58,237,0.25);border:none;cursor:pointer;padding:0; |
| transition:all 0.3s var(--ease-back); |
| } |
| .sd.on{width:28px;border-radius:4px;background:var(--grad-aurora);box-shadow:0 0 10px rgba(0,255,238,0.4);} |
| .sd:hover{background:var(--text-muted);} |
|
|
| |
| .slide-prog{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(124,58,237,0.1);overflow:hidden;border-radius:2px;} |
| .slide-prog-bar{height:100%;background:var(--grad-aurora);animation:progFill 4s linear forwards;box-shadow:0 0 8px rgba(0,255,238,0.5);} |
| @keyframes progFill{from{width:0;}to{width:100%;}} |
|
|
| |
| .proj-img-wrap{position:relative;height:200px;overflow:hidden;border-radius:20px 20px 0 0;flex-shrink:0;} |
| .proj-img{width:100%;height:100%;object-fit:cover;transition:transform 0.55s ease;} |
| .proj-card:hover .proj-img{transform:scale(1.08);} |
| .proj-img-ph{ |
| width:100%;height:100%; |
| display:flex;align-items:center;justify-content:center; |
| background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(0,255,238,0.08)); |
| font-size:50px;color:rgba(0,255,238,0.3); |
| } |
| .proj-overlay{ |
| position:absolute;inset:0; |
| background:rgba(2,0,8,0.88); |
| display:flex;align-items:center;justify-content:center;gap:12px; |
| opacity:0;transition:opacity 0.35s; |
| } |
| .proj-card:hover .proj-overlay{opacity:1;} |
| .ov-btn{ |
| display:inline-flex;align-items:center;gap:6px;padding:10px 18px; |
| background:var(--grad-main); |
| color:#fff;font-size:12px;font-weight:700;border-radius:100px; |
| text-decoration:none;transition:all 0.2s; |
| font-family:'Orbitron',monospace; letter-spacing:0.08em; |
| box-shadow:0 4px 16px rgba(124,58,237,0.4); |
| } |
| .ov-btn.ghost{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#f0eeff;} |
| .ov-btn:hover{opacity:0.85;transform:translateY(-2px);} |
|
|
| |
| .proj-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;} |
| .proj-dur{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);font-weight:500;font-family:'Orbitron',monospace;letter-spacing:0.05em;} |
| .proj-title{ |
| font-family:'Orbitron',monospace;font-size:18px;font-weight:700; |
| color:var(--text-primary);line-height:1.3; |
| } |
| .proj-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.75;flex:1;font-family:'Space Grotesk',sans-serif;} |
| .proj-tools{display:flex;flex-wrap:wrap;gap:7px;} |
| .pt{ |
| padding:3px 12px; |
| background:rgba(191,0,255,0.08);border:1px solid rgba(191,0,255,0.2); |
| color:var(--neon-purple);font-size:11px;font-weight:500;border-radius:100px; |
| font-family:'Space Grotesk',sans-serif; |
| } |
| .proj-links{ |
| display:flex;gap:10px;flex-wrap:wrap;padding-top:6px; |
| border-top:1px solid rgba(124,58,237,0.12);margin-top:auto; |
| } |
| .pl-btn{ |
| display:inline-flex;align-items:center;gap:6px;padding:8px 16px; |
| background:rgba(0,255,238,0.07);border:1px solid rgba(0,255,238,0.2); |
| color:var(--neon-cyan);font-size:12px;font-weight:600;border-radius:100px; |
| text-decoration:none;transition:all 0.25s var(--ease-back); |
| font-family:'Rajdhani',sans-serif;letter-spacing:0.06em; |
| } |
| .pl-btn:hover{background:rgba(0,255,238,0.15);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,255,238,0.2);} |
| .pl-btn.ghost{background:transparent;border-color:rgba(124,58,237,0.2);color:var(--text-secondary);} |
| .pl-btn.ghost:hover{color:var(--text-primary);border-color:rgba(124,58,237,0.5);} |
|
|
| |
| @media(max-width:900px){ |
| .proj-stage{gap:0;min-height:440px;} |
| .sl-left,.sl-right{display:none;} |
| .sl-center{width:100%;max-width:440px;} |
| .slide-arrow.left{left:4px;}.slide-arrow.right{right:4px;} |
| } |
| @media(max-width:600px){ |
| .proj-grid{grid-template-columns:1fr;} |
| .sl-center{width:95vw;} |
| .proj-img-wrap{height:175px;} |
| .proj-body{padding:18px;} |
| .slide-arrow{width:42px;height:42px;font-size:18px;} |
| } |
