Archived
66 lines
1.5 KiB
CSS
66 lines
1.5 KiB
CSS
/* Custom Blurs & Glass */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.dark .glass {
|
|
background: rgba(18, 18, 18, 0.7);
|
|
}
|
|
|
|
/* Bento Card Physics */
|
|
.bento-card {
|
|
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.bento-card:hover {
|
|
transform: translateY(-10px) scale(1.01);
|
|
}
|
|
|
|
/* Hero Zoom Keyframe */
|
|
@keyframes heroZoom {
|
|
0% { transform: scale(1.05); }
|
|
100% { transform: scale(1.15); }
|
|
}
|
|
|
|
.hero-zoom {
|
|
animation: heroZoom 20s infinite alternate ease-in-out;
|
|
}
|
|
|
|
/* Hidden elements for reveal observer */
|
|
.reveal-init {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
|
|
.reveal-active {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
/* Glassmorphism Header */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.75);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
.dark .glass { background: rgba(18, 18, 18, 0.75); }
|
|
|
|
/* Animation: Subtle Zoom for Hero */
|
|
@keyframes heroZoom {
|
|
0% { transform: scale(1); }
|
|
100% { transform: scale(1.1); }
|
|
}
|
|
.hero-zoom { animation: heroZoom 20s infinite alternate ease-in-out; }
|
|
|
|
/* Bento Interaction */
|
|
.bento-card { transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
|
|
.bento-card:hover { transform: translateY(-8px); }
|
|
|
|
/* Custom Scroll Progress Bar */
|
|
#scroll-progress {
|
|
transform-origin: 0%;
|
|
transition: transform 0.1s linear;
|
|
} |