File size: 7,208 Bytes
e927672 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | /* Projects.css — Ultra Neon Cards */
.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);
}
/* grid */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
/* skeleton */
.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;}}
/* error/empty */
.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);}
/* ── Slideshow ── */
.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;
}
/* card base */
.proj-card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;}
/* slide variants */
.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);}
/* arrows */
.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;}
/* dots */
.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);}
/* progress */
.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%;}}
/* image */
.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);}
/* body */
.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);}
/* ── Responsive ── */
@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;}
} |