307 lines
8.0 KiB
CSS
307 lines
8.0 KiB
CSS
.topbar-glass{
|
|
background: rgba(18, 15, 28, .62);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 10px 40px rgba(0,0,0,.35);
|
|
}
|
|
|
|
.brand-badge{
|
|
width: 36px; height: 36px;
|
|
display:grid; place-items:center;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
|
font-weight: 800;
|
|
}
|
|
|
|
.navlink{
|
|
display:inline-flex; align-items:center; gap:.5rem;
|
|
padding:.55rem .85rem;
|
|
border-radius: 14px;
|
|
text-decoration:none;
|
|
color: rgba(255,255,255,.78);
|
|
transition: transform .12s ease, background .12s ease;
|
|
}
|
|
.navlink:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
|
|
.navlink span{ font-size: .95rem; }
|
|
|
|
.bg-aurora{
|
|
position: fixed; inset: 0;
|
|
background:
|
|
radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.30), transparent 60%),
|
|
radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.22), transparent 60%),
|
|
radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.18), transparent 60%);
|
|
filter: blur(0px);
|
|
z-index:-2;
|
|
}
|
|
.bg-grid{
|
|
position: fixed; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
opacity:.12;
|
|
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
|
|
z-index:-1;
|
|
}
|
|
|
|
.card-glass{
|
|
background: rgba(16, 14, 26, .62);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 12px 50px rgba(0,0,0,.35);
|
|
}
|
|
|
|
.pill{
|
|
padding: .45rem .75rem;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
color: rgba(255,255,255,.80);
|
|
font-size: .9rem;
|
|
}
|
|
.dot{
|
|
width: 8px; height: 8px;
|
|
border-radius: 999px;
|
|
background: #34d399;
|
|
box-shadow: 0 0 18px rgba(52,211,153,.55);
|
|
}
|
|
|
|
.hero-gradient{
|
|
background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.iconlink{
|
|
width: 42px; height: 42px;
|
|
display:grid; place-items:center;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
text-decoration:none;
|
|
transition: transform .12s ease;
|
|
}
|
|
.iconlink:hover{ transform: translateY(-2px); }
|
|
|
|
.tag{
|
|
font-size: .75rem;
|
|
padding: .25rem .55rem;
|
|
border-radius: 999px;
|
|
background: rgba(139,92,246,.18);
|
|
border: 1px solid rgba(139,92,246,.25);
|
|
color: rgba(255,255,255,.85);
|
|
}
|
|
|
|
.chip{
|
|
padding: .45rem .7rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
background: rgba(255,255,255,.06);
|
|
color: rgba(255,255,255,.75);
|
|
}
|
|
.chip.active{
|
|
background: rgba(139,92,246,.30);
|
|
border-color: rgba(139,92,246,.35);
|
|
color: #fff;
|
|
}
|
|
|
|
.project-grid{
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.project-card{
|
|
transition: transform .12s ease, border-color .12s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: start;
|
|
height: auto;
|
|
gap: 10px;
|
|
}
|
|
.project-card:hover{ transform: translateY(-2px); border-color: rgba(167,139,250,.35); }
|
|
.project-card .summary-clamp{
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 3.6em;
|
|
line-height: 1.2;
|
|
}
|
|
.project-card .project-footer{ margin-top: auto; }
|
|
.project-card .tech-row{
|
|
max-height: 64px;
|
|
min-height: 28px;
|
|
overflow: hidden;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.field{
|
|
width:100%;
|
|
padding: .9rem 1rem;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
outline: none;
|
|
color: #fff;
|
|
}
|
|
.field:focus{
|
|
border-color: rgba(167,139,250,.55);
|
|
box-shadow: 0 0 0 4px rgba(139,92,246,.18);
|
|
}
|
|
|
|
.bar{
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.08);
|
|
overflow:hidden;
|
|
}
|
|
.bar-fill{
|
|
height: 100%;
|
|
width: 0%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
|
transition: width 900ms cubic-bezier(.2,.9,.2,1);
|
|
}
|
|
|
|
.social{
|
|
display:flex; align-items:center; justify-content:center;
|
|
gap:.6rem;
|
|
padding: 1rem;
|
|
border-radius: 18px;
|
|
text-decoration:none;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
color:#fff;
|
|
transition: transform .12s ease;
|
|
}
|
|
.social:hover{ transform: translateY(-2px); }
|
|
|
|
.pulse-bars{ display:flex; gap:4px; align-items:flex-end; }
|
|
.pulse-bars span{
|
|
width:4px; height:10px; border-radius: 4px;
|
|
background: rgba(34,197,94,.9);
|
|
animation: beat 900ms infinite ease-in-out alternate;
|
|
}
|
|
.pulse-bars span:nth-child(2){ animation-delay: 120ms; height: 14px; }
|
|
.pulse-bars span:nth-child(3){ animation-delay: 240ms; height: 8px; }
|
|
.pulse-bars span:nth-child(4){ animation-delay: 360ms; height: 12px; }
|
|
@keyframes beat{ from{ transform: translateY(0); opacity:.6 } to{ transform: translateY(-4px); opacity:1 } }
|
|
|
|
#spotifyCard.is-playing #spArt { animation: spin 4s linear infinite; }
|
|
@keyframes spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }
|
|
|
|
/* Project modal gallery */
|
|
.pm-gallery{
|
|
display:grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.pm-gallery a{
|
|
position: relative;
|
|
display:block;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
background: rgba(255,255,255,.04);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.30);
|
|
}
|
|
.pm-gallery img{
|
|
width: 100%;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
display:block;
|
|
transition: transform .16s ease;
|
|
}
|
|
.pm-gallery a:hover img{ transform: scale(1.03); }
|
|
|
|
/* Animated PFP (neon ring) */
|
|
|
|
.pfp-wrap{
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: visible;
|
|
transform: translateZ(0);
|
|
animation: pfp-float 5.5s ease-in-out infinite;
|
|
}
|
|
|
|
.pfp-img{
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 999px;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
box-shadow:
|
|
0 18px 60px rgba(0,0,0,.55),
|
|
0 0 0 6px rgba(255,255,255,.03);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.pfp-ring{
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 999px;
|
|
background: conic-gradient(
|
|
from 180deg,
|
|
rgba(139,92,246,.0),
|
|
rgba(139,92,246,.85),
|
|
rgba(217,70,239,.85),
|
|
rgba(167,139,250,.85),
|
|
rgba(139,92,246,.0)
|
|
);
|
|
filter: drop-shadow(0 0 18px rgba(167,139,250,.22));
|
|
animation: pfp-spin 4.2s linear infinite;
|
|
z-index: 1;
|
|
}
|
|
|
|
.pfp-ring::after{
|
|
content:"";
|
|
position:absolute;
|
|
inset: 6px;
|
|
border-radius: 999px;
|
|
background: rgba(7,6,10,.92);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
}
|
|
|
|
.pfp-wrap::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:-14px;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle, rgba(167,139,250,.18), transparent 60%);
|
|
filter: blur(10px);
|
|
opacity: .75;
|
|
animation: pfp-pulse 2.6s ease-in-out infinite;
|
|
}
|
|
|
|
.pfp-wrap::after{
|
|
content:"";
|
|
position:absolute;
|
|
inset: -30%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
|
|
transform: translateX(-70%) rotate(12deg);
|
|
animation: pfp-shine 3.8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
mix-blend-mode: screen;
|
|
opacity: .55;
|
|
}
|
|
|
|
.pfp-wrap:hover{
|
|
animation-play-state: paused;
|
|
transform: translateY(-2px);
|
|
}
|
|
.pfp-wrap:hover .pfp-ring{
|
|
filter: drop-shadow(0 0 22px rgba(217,70,239,.26));
|
|
}
|
|
|
|
@keyframes pfp-spin { to { transform: rotate(360deg); } }
|
|
@keyframes pfp-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
|
|
@keyframes pfp-pulse { 0%,100%{ opacity:.55; transform: scale(.98); } 50%{ opacity:.9; transform: scale(1.03); } }
|
|
@keyframes pfp-shine { 0%{ transform: translateX(-70%) rotate(12deg); } 55%{ transform: translateX(70%) rotate(12deg); } 100%{ transform: translateX(70%) rotate(12deg); } }
|