Add global CSS enhancements for visual effects
- Implemented dynamic gradient background animation for body - Added neon glow hover effect to .btn-minecraft - Applied glassmorphism effect to .section-bg - Introduced text glitch effect for .minecraft-font on hover - Enhanced .nav-btn with micro-animation shine effect
This commit is contained in:
108
css/style.css
108
css/style.css
@@ -15,9 +15,9 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0b0f2b; /* Explicit fallback */
|
||||
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
background: linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
background-size: 200% 200%;
|
||||
animation: bgShift 15s ease infinite;
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
overflow-x: hidden;
|
||||
@@ -26,19 +26,23 @@ body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@keyframes bgShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Custom Scrollbar Styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249); /* Match body gradient */
|
||||
background: linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
border: none; /* Ensure no border */
|
||||
border: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(10, 17, 40, 0.8);
|
||||
@@ -46,7 +50,6 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: -webkit-linear-gradient(45deg, #2dd4bf, #60a5fa);
|
||||
background: linear-gradient(45deg, #2dd4bf, #60a5fa);
|
||||
box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
@@ -57,20 +60,53 @@ body {
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
transform: translateZ(0);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minecraft-font:hover {
|
||||
animation: glitch 0.3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, -2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
60% {
|
||||
transform: translate(-2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
background: rgba(10, 17, 40, 0.75);
|
||||
background: rgba(10, 17, 40, 0.3);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
transition: box-shadow 0.4s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
|
||||
transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
|
||||
animation: floatSection 4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -90,6 +126,9 @@ body {
|
||||
}
|
||||
|
||||
.section-bg:hover {
|
||||
background: rgba(10, 17, 40, 0.4);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
@@ -103,7 +142,6 @@ body {
|
||||
}
|
||||
|
||||
.btn-minecraft {
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background-size: 300% 300%;
|
||||
border: none;
|
||||
@@ -116,6 +154,7 @@ body {
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
animation: gradientShift 5s ease infinite;
|
||||
box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-minecraft::before {
|
||||
@@ -125,7 +164,6 @@ body {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
@@ -136,7 +174,8 @@ body {
|
||||
|
||||
.btn-minecraft:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
|
||||
box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
|
||||
animation: neonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.btn-minecraft::after {
|
||||
@@ -158,6 +197,15 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes neonPulse {
|
||||
0%, 100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
@@ -215,7 +263,6 @@ body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -310,7 +357,6 @@ body {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@@ -318,8 +364,8 @@ body {
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
|
||||
mix-blend-mode: screen; /* Blend with background */
|
||||
will-change: transform, opacity; /* Optimize rendering */
|
||||
mix-blend-mode: screen;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.particle.large {
|
||||
@@ -347,7 +393,6 @@ body {
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
|
||||
background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
position: relative;
|
||||
@@ -375,7 +420,6 @@ footer a:hover {
|
||||
.nav-btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
@@ -385,6 +429,23 @@ footer a:hover {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.4s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
@@ -418,7 +479,6 @@ footer a:hover {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
|
||||
background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
@@ -448,10 +508,10 @@ footer a:hover {
|
||||
}
|
||||
|
||||
/* Safari-specific fix for particle rendering */
|
||||
@media not all and (min-resolution:.001dpcm) { /* Targets Safari */
|
||||
@media not all and (min-resolution:.001dpcm) {
|
||||
.particle {
|
||||
z-index: -2; /* Lower z-index to ensure background visibility */
|
||||
backface-visibility: hidden; /* Prevent rendering glitches */
|
||||
z-index: -2;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
96
css/style.min.css
vendored
96
css/style.min.css
vendored
@@ -758,9 +758,9 @@ html, body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
body {
|
||||
background-color: #0b0f2b;
|
||||
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
background: linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
background-size: 200% 200%;
|
||||
animation: bgShift 15s ease infinite;
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
overflow-x: hidden;
|
||||
@@ -768,23 +768,31 @@ body {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@keyframes bgShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
background: linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
border: none;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(10, 17, 40, 0.8);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: -webkit-linear-gradient(45deg, #2dd4bf, #60a5fa);
|
||||
background: linear-gradient(45deg, #2dd4bf, #60a5fa);
|
||||
box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
@@ -794,19 +802,50 @@ body {
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
transform: translateZ(0);
|
||||
position: relative;
|
||||
}
|
||||
.minecraft-font:hover {
|
||||
animation: glitch 0.3s linear infinite;
|
||||
}
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, -2px);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
60% {
|
||||
transform: translate(-2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, 0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
}
|
||||
.section-bg {
|
||||
background: rgba(10, 17, 40, 0.75);
|
||||
background: rgba(10, 17, 40, 0.3);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
transition: box-shadow 0.4s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
|
||||
transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
|
||||
animation: floatSection 4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -819,6 +858,9 @@ body {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.section-bg:hover {
|
||||
background: rgba(10, 17, 40, 0.4);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
@keyframes floatSection {
|
||||
@@ -830,7 +872,6 @@ body {
|
||||
}
|
||||
}
|
||||
.btn-minecraft {
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background-size: 300% 300%;
|
||||
border: none;
|
||||
@@ -843,6 +884,7 @@ body {
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
animation: gradientShift 5s ease infinite;
|
||||
box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.btn-minecraft::before {
|
||||
content: '';
|
||||
@@ -851,7 +893,6 @@ body {
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
@@ -860,7 +901,8 @@ body {
|
||||
}
|
||||
.btn-minecraft:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
|
||||
box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
|
||||
animation: neonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.btn-minecraft::after {
|
||||
content: '';
|
||||
@@ -879,6 +921,14 @@ body {
|
||||
height: 200px;
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes neonPulse {
|
||||
0%, 100% {
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
@@ -932,7 +982,6 @@ body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -1012,7 +1061,6 @@ body {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@@ -1055,7 +1103,6 @@ body {
|
||||
}
|
||||
}
|
||||
.header-bg {
|
||||
background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
|
||||
background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
position: relative;
|
||||
@@ -1079,7 +1126,6 @@ footer a:hover {
|
||||
.nav-btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
@@ -1089,6 +1135,21 @@ footer a:hover {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.4s ease;
|
||||
}
|
||||
.nav-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
.nav-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
@@ -1115,7 +1176,6 @@ footer a:hover {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
|
||||
background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
Reference in New Issue
Block a user