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