hypermc/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css for SAFARI - cmon APPLE

Browse Source
This commit is contained in:
snxraven
2025-07-04 03:01:48 -04:00
parent ecde5f34bb
commit e348734000
3 changed files with 64 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -7,13 +7,21 @@
font-style: normal;
}
html, body {
margin: 0;
padding: 0;
background: none;
min-height: 100vh;
}
body {
background-color: #0b0f2b; /* Explicit fallback */
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
background: linear-gradient(135deg, #0b0f2b, #1a2249);
font-family: 'Roboto', 'Verdana', sans-serif;
color: #e0e7ff;
overflow-x: hidden;
position: relative;
margin: 0;
min-height: 100vh;
scroll-behavior: smooth;
}
@ -24,6 +32,7 @@ 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;
@ -69,6 +78,7 @@ body {
}
.btn-minecraft {
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
background: linear-gradient(45deg, #14b8a6, #3b82f6);
background-size: 300% 300%;
border: none;
@ -90,6 +100,7 @@ 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;
}
@ -179,6 +190,7 @@ 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;
}
@ -273,6 +285,7 @@ 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;
@ -280,6 +293,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 */
}
.particle.large {
@ -307,6 +322,7 @@ 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;
@ -315,8 +331,10 @@ body {
}
footer {
z-index: 2;
background: rgba(10, 17, 40, 0.75);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 2;
}
footer a {
@ -332,6 +350,7 @@ 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;
@ -374,7 +393,9 @@ 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);
z-index: 20000;
padding: 4rem 2rem;
@ -401,6 +422,14 @@ footer a:hover {
transform: translateX(10px);
}
/* Safari-specific fix for particle rendering */
@media not all and (min-resolution:.001dpcm) { /* Targets Safari */
.particle {
z-index: -2; /* Lower z-index to ensure background visibility */
backface-visibility: hidden; /* Prevent rendering glitches */
}
}
@media (max-width: 768px) {
.hero-bg {
min-height: 500px;