Refine hero typography and coming soon flow

2026-03-08 06:15:36 +01:00
parent 96995ed5f1
commit 97ac06e89a
7 changed files with 176 additions and 75 deletions
@@ -360,6 +360,112 @@ html[lang="ar"] {
    background: linear-gradient(180deg, transparent, hsl(var(--background)));
  }

+  .hero-title-line {
+    display: inline-block;
+    padding-inline: 0.02em;
+    padding-block-end: 0.05em;
+  }
+
+  .hero-title-accent {
+    background-image: linear-gradient(
+      120deg,
+      hsl(var(--hero-ink)) 0%,
+      hsl(var(--hero-ink)) 24%,
+      hsl(var(--primary) / 0.58) 52%,
+      hsl(var(--hero-right) / 0.34) 78%,
+      hsl(var(--hero-ink)) 100%
+    );
+    background-size: 220% 220%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: hero-title-shift 8s ease-in-out infinite alternate;
+  }
+
+  .hero-title-accent-soft {
+    background-image: linear-gradient(
+      120deg,
+      hsl(var(--hero-ink)) 0%,
+      hsl(var(--hero-ink)) 34%,
+      hsl(var(--hero-left) / 0.26) 62%,
+      hsl(var(--primary) / 0.24) 82%,
+      hsl(var(--hero-ink)) 100%
+    );
+    background-size: 220% 220%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: hero-title-shift 10s ease-in-out infinite alternate;
+  }
+
+  .hero-scroll-link {
+    display: inline-flex;
+    height: 3.25rem;
+    width: 3.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 1px solid hsl(var(--border) / 0.55);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.38),
+      0 18px 44px -28px rgba(15, 23, 42, 0.28);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    transition:
+      transform 220ms ease,
+      border-color 220ms ease,
+      background-color 220ms ease;
+  }
+
+  .hero-scroll-link:hover {
+    transform: translateY(2px);
+    border-color: hsl(var(--primary) / 0.42);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22));
+  }
+
+  .hero-scroll-link svg {
+    animation: hero-scroll-bob 1.8s ease-in-out infinite;
+  }
+
+  .dark .hero-scroll-link {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.08),
+      0 18px 44px -28px rgba(0, 0, 0, 0.58);
+  }
+
+  .dark .hero-scroll-link:hover {
+    border-color: rgba(255, 255, 255, 0.18);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
+  }
+
+  @keyframes hero-title-shift {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 45% 100%;
+    }
+  }
+
+  @keyframes hero-scroll-bob {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(4px);
+    }
+  }
+
  .hero-header-bridge {
    position: absolute;
    left: 50%;