From 9edb1621481b26056e250413767c0f2787d61132 Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Sun, 8 Mar 2026 00:34:57 +0100
Subject: [PATCH] Polish hero overlays and fix fixed header

---
 app/globals.css                             |  6 +++---
 components/layout/hero-atmosphere.tsx       | 12 ++++++------
 components/layout/home-hero.tsx             |  2 +-
 components/layout/page-hero.tsx             |  2 +-
 components/layout/site-ambient-backdrop.tsx | 10 +++++-----
 components/layout/site-header.tsx           |  8 ++++----
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a309ba4..50cb926 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -44,9 +44,9 @@
   --ambient-secondary-alpha: 0.04;
   --ambient-grid-alpha: 0;
 
-  --radius-surface: 0rem;
-  --radius-nested: 0rem;
-  --radius-pill: 0px;
+  --radius-surface: 24px;
+  --radius-nested: 16px;
+  --radius-pill: 9999px;
 
   --shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
   --shadow-sm: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.1);
diff --git a/components/layout/hero-atmosphere.tsx b/components/layout/hero-atmosphere.tsx
index 82cdd16..397c17b 100644
--- a/components/layout/hero-atmosphere.tsx
+++ b/components/layout/hero-atmosphere.tsx
@@ -8,7 +8,7 @@ type HeroAtmosphereProps = {
 
 export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
   return (
-    <div className="pointer-events-none absolute inset-0 overflow-hidden">
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
       <motion.div
         animate={{
           x: [0, 90, -48, 0],
@@ -20,7 +20,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/22 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
+        className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/18 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
       />
 
       <motion.div
@@ -34,7 +34,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/18 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
+        className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/14 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
       />
 
       <motion.div
@@ -48,10 +48,10 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/14 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
+        className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/10 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
       />
 
-      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.58),rgba(255,255,255,0.32)_32%,rgba(255,255,255,0.08)_68%,rgba(255,255,255,0.02)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.16),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.18),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.18),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(10,14,22,0.3),rgba(10,14,22,0.42)_34%,rgba(10,14,22,0.7)_100%),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.2),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.12),transparent_38%)]" />
+      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.18)_30%,rgba(255,255,255,0.04)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.1),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.1),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)_28%,rgba(255,255,255,0)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.12),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.08),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.08),transparent_38%)]" />
 
       <motion.div
         animate={{
@@ -63,7 +63,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
           repeat: Number.POSITIVE_INFINITY,
           ease: "linear",
         }}
-        className="hero-noise absolute inset-[-8%] opacity-55 mix-blend-soft-light dark:opacity-22"
+        className="hero-noise absolute inset-[-8%] opacity-32 mix-blend-soft-light dark:opacity-12"
       />
     </div>
   );
diff --git a/components/layout/home-hero.tsx b/components/layout/home-hero.tsx
index 818d9e6..500fc25 100644
--- a/components/layout/home-hero.tsx
+++ b/components/layout/home-hero.tsx
@@ -26,7 +26,7 @@ export function HomeHero({
   return (
     <section className="relative isolate flex min-h-[85vh] items-center overflow-hidden">
       <HeroAtmosphere />
-      <div className="mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
+      <div className="relative z-10 mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
         <MotionFade className="w-full">
           <div className="mx-auto max-w-[54rem]">
             <p className="text-sm font-medium tracking-[0.08em] text-foreground/62">
diff --git a/components/layout/page-hero.tsx b/components/layout/page-hero.tsx
index 803f61d..54ef439 100644
--- a/components/layout/page-hero.tsx
+++ b/components/layout/page-hero.tsx
@@ -10,7 +10,7 @@ export function PageHero({ title, description }: PageHeroProps) {
   return (
     <section className="relative isolate flex min-h-[42vh] items-end overflow-hidden">
       <HeroAtmosphere compact />
-      <div className="mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
+      <div className="relative z-10 mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
         <MotionFade className="max-w-[44rem]">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/48">
             {title}
diff --git a/components/layout/site-ambient-backdrop.tsx b/components/layout/site-ambient-backdrop.tsx
index 4cbfa6d..b8bd858 100644
--- a/components/layout/site-ambient-backdrop.tsx
+++ b/components/layout/site-ambient-backdrop.tsx
@@ -16,7 +16,7 @@ export function SiteAmbientBackdrop() {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute left-[-10%] top-[4%] h-[30rem] w-[30rem] rounded-full bg-brand-primary/18 blur-3xl sm:h-[38rem] sm:w-[38rem] lg:h-[46rem] lg:w-[46rem]"
+        className="absolute left-[-10%] top-[4%] h-[30rem] w-[30rem] rounded-full bg-brand-primary/12 blur-3xl sm:h-[38rem] sm:w-[38rem] lg:h-[46rem] lg:w-[46rem]"
       />
       <motion.div
         animate={{
@@ -29,7 +29,7 @@ export function SiteAmbientBackdrop() {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute right-[-12%] top-[8%] h-[26rem] w-[26rem] rounded-full bg-brand-secondary/16 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
+        className="absolute right-[-12%] top-[8%] h-[26rem] w-[26rem] rounded-full bg-brand-secondary/12 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
       />
       <motion.div
         animate={{
@@ -42,9 +42,9 @@ export function SiteAmbientBackdrop() {
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
-        className="absolute bottom-[-12%] left-[22%] h-[20rem] w-[20rem] rounded-full bg-brand-primary/14 blur-3xl sm:h-[28rem] sm:w-[28rem] lg:h-[34rem] lg:w-[34rem]"
+        className="absolute bottom-[-12%] left-[22%] h-[20rem] w-[20rem] rounded-full bg-brand-primary/[0.08] blur-3xl sm:h-[28rem] sm:w-[28rem] lg:h-[34rem] lg:w-[34rem]"
       />
-      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.64),rgba(255,255,255,0.42)_24%,rgba(255,255,255,0.14)_52%,rgba(255,255,255,0.02)_100%),radial-gradient(circle_at_16%_18%,rgba(221,65,36,0.12),transparent_30%),radial-gradient(circle_at_78%_14%,rgba(235,143,117,0.16),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(160,182,255,0.16),transparent_40%)] dark:bg-[linear-gradient(180deg,rgba(11,15,24,0.24),rgba(11,15,24,0.36)_26%,rgba(11,15,24,0.72)_100%),radial-gradient(circle_at_16%_18%,rgba(221,65,36,0.16),transparent_30%),radial-gradient(circle_at_78%_14%,rgba(235,143,117,0.1),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(109,130,214,0.12),transparent_40%)]" />
+      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.08)_24%,rgba(255,255,255,0.02)_52%,rgba(255,255,255,0)_100%),radial-gradient(circle_at_16%_18%,rgba(221,65,36,0.08),transparent_30%),radial-gradient(circle_at_78%_14%,rgba(235,143,117,0.08),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(160,182,255,0.08),transparent_40%)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005)_26%,rgba(255,255,255,0)_100%),radial-gradient(circle_at_16%_18%,rgba(221,65,36,0.08),transparent_30%),radial-gradient(circle_at_78%_14%,rgba(235,143,117,0.06),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(109,130,214,0.05),transparent_40%)]" />
       <motion.div
         animate={{
           x: [0, 20, -14, 0],
@@ -55,7 +55,7 @@ export function SiteAmbientBackdrop() {
           repeat: Number.POSITIVE_INFINITY,
           ease: "linear",
         }}
-        className="hero-noise absolute inset-[-6%] opacity-48 mix-blend-soft-light dark:opacity-18"
+        className="hero-noise absolute inset-[-6%] opacity-[0.22] mix-blend-soft-light dark:opacity-[0.08]"
       />
     </div>
   );
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
index 0a0966e..b18fe54 100644
--- a/components/layout/site-header.tsx
+++ b/components/layout/site-header.tsx
@@ -94,7 +94,7 @@ export function SiteHeader({
   const t = useTranslations("navigation");
 
   return (
-    <header className="sticky top-3 z-40 bg-transparent">
+    <header className="fixed inset-x-0 top-3 z-40 bg-transparent">
       <Container className="max-w-[88rem]">
         <div className="relative grid min-h-[4.5rem] grid-cols-[auto_1fr_auto] items-center gap-3 lg:min-h-[5rem]">
           <div className="flex items-center">
@@ -116,7 +116,7 @@ export function SiteHeader({
               initial={{ opacity: 0, y: -8 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.28, ease: "easeOut" }}
-              className="pointer-events-auto inline-flex min-w-[27rem] max-w-[42rem] items-center justify-center gap-1 rounded-[var(--radius-pill)] border border-white/24 bg-[linear-gradient(180deg,rgba(255,255,255,0.22),rgba(255,255,255,0.1))] p-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.46),inset_0_-1px_0_rgba(255,255,255,0.08),0_18px_44px_-28px_rgba(15,23,42,0.32)] backdrop-blur-[28px] dark:border-white/12 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.09),rgba(255,255,255,0.03))] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(255,255,255,0.03),0_20px_48px_-28px_rgba(0,0,0,0.72)]"
+              className="pointer-events-auto inline-flex min-w-[27rem] max-w-[42rem] items-center justify-center gap-1 rounded-[var(--radius-pill)] border border-white/18 bg-white/10 p-1.5 shadow-[0_18px_44px_-28px_rgba(15,23,42,0.24)] backdrop-blur-[24px] dark:border-white/10 dark:bg-white/5 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]"
             >
               <NavLinks />
             </motion.nav>
@@ -127,7 +127,7 @@ export function SiteHeader({
               initial={{ opacity: 0, y: -8 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.28, ease: "easeOut", delay: 0.03 }}
-              className="inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-white/24 bg-[linear-gradient(180deg,rgba(255,255,255,0.22),rgba(255,255,255,0.1))] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.46),inset_0_-1px_0_rgba(255,255,255,0.08),0_18px_44px_-28px_rgba(15,23,42,0.32)] backdrop-blur-[28px] dark:border-white/12 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.09),rgba(255,255,255,0.03))] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(255,255,255,0.03),0_20px_48px_-28px_rgba(0,0,0,0.72)]"
+              className="inline-flex items-center gap-1 rounded-[var(--radius-pill)] border border-white/18 bg-white/10 p-1 shadow-[0_18px_44px_-28px_rgba(15,23,42,0.24)] backdrop-blur-[24px] dark:border-white/10 dark:bg-white/5 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)]"
             >
               <LocaleToggle
                 locale={locale}
@@ -154,7 +154,7 @@ export function SiteHeader({
             onClick={() => setIsOpen((open) => !open)}
             variant="ghost"
             size="icon"
-            className="ml-auto h-11 w-11 rounded-[var(--radius-pill)] border border-white/24 bg-[linear-gradient(180deg,rgba(255,255,255,0.24),rgba(255,255,255,0.11))] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.46),inset_0_-1px_0_rgba(255,255,255,0.08),0_18px_44px_-28px_rgba(15,23,42,0.32)] backdrop-blur-[28px] hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.3),rgba(255,255,255,0.14))] dark:border-white/12 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.09),rgba(255,255,255,0.03))] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(255,255,255,0.03),0_20px_48px_-28px_rgba(0,0,0,0.72)] dark:hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.05))] lg:hidden"
+            className="ml-auto h-11 w-11 rounded-[var(--radius-pill)] border border-white/18 bg-white/12 text-foreground shadow-[0_18px_44px_-28px_rgba(15,23,42,0.24)] backdrop-blur-[24px] hover:bg-white/18 dark:border-white/10 dark:bg-white/5 dark:shadow-[0_20px_48px_-28px_rgba(0,0,0,0.58)] dark:hover:bg-white/10 lg:hidden"
             aria-label={isOpen ? t("closeMenu") : t("openMenu")}
           >
             <motion.span