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;

31
css/style.min.css vendored
View File

@ -9,7 +9,6 @@
"Courier New", monospace;
--color-teal-300: oklch(85.5% 0.138 181.071);
--color-teal-400: oklch(77.7% 0.152 181.912);
--color-teal-500: oklch(70.4% 0.14 182.503);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-gray-200: oklch(92.8% 0.006 264.531);
@ -752,13 +751,20 @@
font-weight: normal;
font-style: normal;
}
html, body {
margin: 0;
padding: 0;
background: none;
min-height: 100vh;
}
body {
background-color: #0b0f2b;
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;
}
@ -768,6 +774,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;
@ -803,6 +810,7 @@ body {
}
}
.btn-minecraft {
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
background: linear-gradient(45deg, #14b8a6, #3b82f6);
background-size: 300% 300%;
border: none;
@ -823,6 +831,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;
}
@ -903,6 +912,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;
}
@ -982,6 +992,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;
@ -989,6 +1000,8 @@ body {
z-index: -1;
pointer-events: none;
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
mix-blend-mode: screen;
will-change: transform, opacity;
}
.particle.large {
width: 12px;
@ -1022,6 +1035,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;
@ -1029,8 +1043,10 @@ body {
z-index: 2;
}
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 {
color: #2dd4bf;
@ -1043,6 +1059,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;
@ -1078,7 +1095,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;
@ -1101,6 +1120,12 @@ footer a:hover {
.mobile-nav-container ul li a:hover {
transform: translateX(10px);
}
@media not all and (min-resolution:.001dpcm) {
.particle {
z-index: -2;
backface-visibility: hidden;
}
}
@media (max-width: 768px) {
.hero-bg {
min-height: 500px;

3
js/main.js
View File

@ -50,8 +50,11 @@ function createParticle() {
}, 14000);
}
// Delay particle creation to ensure background renders
setTimeout(() => {
// Create particles frequently
setInterval(createParticle, 75);
}, 500); // 500ms delay
function throttle(fn, wait) {
let lastTime = 0;