WIP: design: complete landing page redesign (Vercel/Linear style) #6

Draft
Archos wants to merge 3 commits from redesign into main
Showing only changes of commit c6cd9855e8 - Show all commits
+19 -7
View File
@@ -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); }
}