WIP: design: complete landing page redesign (Vercel/Linear style) #6
+19
-7
@@ -15,9 +15,9 @@
|
||||
--font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
|
||||
|
||||
--accent: #1565c0;
|
||||
--accent-light: #1e88e5;
|
||||
--accent-hover: #1976d2;
|
||||
--accent: #1e88e5;
|
||||
--accent-light: #42a5f5;
|
||||
--accent-hover: #1565c0;
|
||||
--accent-subtle: rgba(21, 101, 192, 0.12);
|
||||
|
||||
--radius-sm: 6px;
|
||||
@@ -93,7 +93,10 @@ body {
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
background-image: radial-gradient(900px 500px at 20% -10%, rgba(21, 101, 192, .06), transparent 60%),
|
||||
radial-gradient(900px 500px at 120% 10%, rgba(30, 136, 229, .06), transparent 60%),
|
||||
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
background-color: var(--bg);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
@@ -168,9 +171,10 @@ a:hover { color: var(--accent); text-decoration: underline; }
|
||||
padding: 6px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
transition: background var(--transition);
|
||||
transition: background var(--transition), box-shadow var(--transition);
|
||||
box-shadow: 0 0 12px rgba(30, 136, 229, 0.3);
|
||||
}
|
||||
.nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; }
|
||||
.nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; box-shadow: 0 0 20px rgba(30, 136, 229, 0.5); }
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
@@ -250,6 +254,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
|
||||
padding: 5px 16px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: 24px;
|
||||
animation: badge-pulse 3s ease-in-out infinite;
|
||||
text-shadow: 0 0 20px rgba(30, 136, 229, 0.4);
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 44px;
|
||||
@@ -258,6 +264,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
|
||||
line-height: 1.12;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text);
|
||||
text-shadow: 0 0 40px rgba(30, 136, 229, 0.3);
|
||||
}
|
||||
.hero p {
|
||||
font-size: 17px;
|
||||
@@ -347,7 +354,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
|
||||
.link-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--accent-light);
|
||||
box-shadow: 0 4px 24px rgba(21, 101, 192, 0.25);
|
||||
box-shadow: 0 8px 32px rgba(30, 136, 229, 0.35);
|
||||
background: var(--bg-card-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -525,3 +532,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes badge-pulse {
|
||||
0%, 100% { border-color: rgba(30, 136, 229, 0.25); }
|
||||
50% { border-color: rgba(66, 165, 245, 0.6); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user