jake/cresync-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile: fallbacks for backdrop-filter, gradient-text, z-index

Browse Source
This commit is contained in:
Jake Shore 2026-01-26 20:29:34 -05:00
parent d32077f8d7
commit 94d27a65a5
1 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -21,14 +21,20 @@
body { body {
font-family: 'Inter', system-ui, -apple-system, sans-serif; font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #030303; background-color: #030303;
color: #fff; color: #ffffff;
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; overflow-x: hidden;
min-width: 320px; min-width: 320px;
} }
/* Ensure text is always visible */
h1, h2, h3, h4, h5, h6, p, span, a, li, div {
color: inherit;
}
/* Utility Classes */ /* Utility Classes */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
@ -94,13 +100,21 @@
/* Components */ /* Components */
.glass { .glass {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(20px); }
border: 1px solid rgba(255, 255, 255, 0.08);
@supports (backdrop-filter: blur(20px)) {
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
} }
.gradient-text { .gradient-text {
color: #22c55e;
background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6); background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
background-size: 200% 200%; background-size: 200% 200%;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -109,6 +123,13 @@
animation: gradient-shift 6s ease infinite; animation: gradient-shift 6s ease infinite;
} }
@supports not (-webkit-background-clip: text) {
.gradient-text {
color: #22c55e;
background: none;
}
}
@keyframes gradient-shift { @keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; } 0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; } 50% { background-position: 100% 50%; }
@ -171,13 +192,19 @@
} }
.navbar.scrolled { .navbar.scrolled {
background: rgba(3, 3, 3, 0.8); background: rgba(3, 3, 3, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0.75rem 0; padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
@supports (backdrop-filter: blur(20px)) {
.navbar.scrolled {
background: rgba(3, 3, 3, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
@ -245,6 +272,7 @@
.hero-bg { .hero-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 0;
background: background:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.12), transparent), radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.08), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.08), transparent),
@ -255,6 +283,7 @@
.hero-grid { .hero-grid {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 0;
background-image: background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
@ -1153,7 +1182,7 @@
<div class="hero-bg"></div> <div class="hero-bg"></div>
<div class="hero-grid"></div> <div class="hero-grid"></div>
<div class="container text-center" style="position: relative;"> <div class="container text-center" style="position: relative; z-index: 1;">
<div class="badge glass" style="margin-bottom: 2rem;"> <div class="badge glass" style="margin-bottom: 2rem;">
<span class="badge-dot"></span> <span class="badge-dot"></span>
Now in Early Access — Limited Spots Now in Early Access — Limited Spots