Merge pull request #56 from 0xarchit/web/upgrade

IImmersive Scroll-Driven SaaS Landing Page Implementation

Author: 0xarchit

website/assets/default.webm

@@ -1,222 +1,150 @@
-/* Navigation */
-nav {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 64px;
-  background: rgba(13, 11, 14, 0.82);
-  backdrop-filter: blur(20px) saturate(160%);
-  border-bottom: 1px solid var(--border);
-  z-index: 100;
-  transition: border-color 0.3s;
-}
-
-nav.scrolled {
-  border-bottom-color: var(--border-hover);
-}
-
-.nav-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-}
-
-.nav-logo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-decoration: none;
-  color: var(--text-primary);
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.nav-logo img {
-  height: 34px;
-}
-
-.nav-links {
-  display: none;
-  gap: 24px;
-}
-
-.nav-links a {
-  text-decoration: none;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  transition: color 0.2s;
-}
-
-.nav-links a:hover {
-  color: var(--text-primary);
-}
-
-.nav-actions {
-  display: none;
-  align-items: center;
-  gap: 16px;
-}
-
-@media (min-width: 768px) {
-  .nav-links { display: flex; }
-  .nav-actions { display: flex; }
-}
-
-/* Buttons */
 .btn-primary {
+  background: var(--sky);
+  color: white;
+  border-radius: var(--radius-pill);
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-weight: 700;
+  font-size: 0.85rem;
+  padding: 10px 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--pink);
-  color: #0D0B0E;
-  border-radius: var(--radius-pill);
-  font-family: 'Syne', sans-serif;
-  font-weight: 700;
-  font-size: clamp(0.85rem, 2.5vw, 1rem);
-  padding: clamp(12px, 3vw, 15px) clamp(24px, 5vw, 40px);
-  text-decoration: none;
-  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+  transition: background 0.2s ease, transform 0.2s ease;
 }
 
 .btn-primary:hover {
-  background: #f9a8d4;
+  background: var(--sky-deep);
   transform: translateY(-1px);
-  box-shadow: var(--glow-sm);
 }
 
-.btn-primary.small {
-  font-size: 0.85rem;
-  padding: 10px 24px;
-}
-
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'Syne', sans-serif;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: color 0.2s;
+.btn-large {
+  padding: 14px 32px;
+  font-size: 1rem;
 }
 
-.btn-ghost:hover {
-  color: var(--text-primary);
-}
-
-.btn-ghost .arrow {
-  transition: transform 0.2s;
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 32px;
+  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
 }
 
-.btn-ghost:hover .arrow {
-  transform: translateX(3px);
+.card:hover {
+  box-shadow: var(--shadow-md), var(--shadow-sky);
+  border-color: var(--sky-border-md);
+  transform: translateY(-4px);
 }
 
-.btn-outline {
+.chip {
+  background: var(--sky-faint);
+  border: 1px solid var(--sky-border);
+  color: var(--sky-deep);
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+  font-size: var(--text-xs);
+  font-weight: 600;
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  padding: 8px 16px;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  font-size: 0.8rem;
-  transition: border-color 0.2s, color 0.2s;
 }
 
-.btn-outline:hover {
-  border-color: var(--border-hover);
-  color: var(--pink);
+.container {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
-/* Badges & Chips */
-.badge-os {
+.section-label {
+  color: var(--sky);
+  font-weight: 700;
   font-size: 0.72rem;
-  color: var(--text-muted);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 6px 14px;
-  display: inline-block;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: 12px;
+  display: block;
 }
 
-.chip {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 6px 12px;
-  font-family: 'Syne', sans-serif;
-  font-weight: 500;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
+/* Navbar */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  background: rgba(243, 250, 255, 0.88);
+  backdrop-filter: blur(16px) saturate(140%);
+  border-bottom: 1px solid var(--border);
+  z-index: 1000;
+  transition: box-shadow 0.3s ease;
 }
 
-.badge-mode-soft {
-  background: rgba(244,114,182,0.12);
-  border: 1px solid var(--border-pink);
-  color: var(--pink);
-  padding: 4px 10px;
-  border-radius: var(--radius-pill);
+.nav--scrolled {
+  box-shadow: var(--shadow-sm);
 }
 
-.badge-license {
-  color: #FCD34D;
-  border: 1px solid rgba(252,211,77,0.3);
-  padding: 4px 10px;
-  border-radius: var(--radius-sm);
+.nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
 }
 
-code {
-  background: var(--bg-surface);
-  color: var(--pink);
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 0.85em;
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-/* Cards */
-.card {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 24px;
-  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
+.nav-logo span {
+  font-family: 'Fraunces', serif;
+  font-weight: 300;
+  font-size: 1.25rem;
+  color: var(--text-primary);
 }
 
-.card:hover {
-  border-color: var(--border-hover);
-  box-shadow: var(--glow-xs);
-  transform: translateY(-3px);
+.nav-links {
+  display: flex;
+  gap: 32px;
+}
+
+.nav-link {
+  color: var(--text-muted);
+  transition: color 0.2s ease;
 }
 
-.card-raised {
-  background: var(--bg-raised);
+.nav-link:hover {
+  color: var(--text-primary);
 }
 
-/* Stats */
-.stats-strip {
-  display: inline-flex;
+.nav-actions {
+  display: flex;
   align-items: center;
-  gap: 16px;
-  opacity: 0;
-  animation: fadeInUp 0.6s ease forwards 0.6s;
+  gap: 24px;
 }
 
-.stat {
+.nav-stat {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
 }
 
-.stat-icon {
-  font-size: 0.9em;
+.icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+  fill: currentColor;
 }
 
-.stat-value {
-  color: var(--text-secondary);
-}
+.icon--lg { font-size: 1.2em; }
+.icon--sm { font-size: 0.9em; }
 
-.stat-divider {
-  color: var(--text-muted);
-}
+@media (max-width: 768px) {
+  .nav-links { display: none; }
+}