From 0fbfae29d9ac615ba33f59a6e0437ba2bd2e8c54 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuth.timo@gmail.com>
Date: Tue, 10 Mar 2026 19:01:41 +0100
Subject: [PATCH] Hero Section

---
 app/globals.css   | 434 ++++++++++++++++++++++------------------------
 devserver.out.log | Bin 7562 -> 8312 bytes
 2 files changed, 212 insertions(+), 222 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 03053ec..6e74ad9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1500,7 +1500,6 @@ main {
 }
 
 .home-hero-left {
-  background: var(--secondary);
   display: flex;
   align-items: center;
   padding: 6rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
@@ -1509,39 +1508,11 @@ main {
 }
 
 .home-hero-left::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -128px;
-  bottom: 0;
-  width: clamp(88px, 8vw, 128px);
-  background: rgba(var(--secondary-rgb), 0.78);
-  clip-path: ellipse(72% 156% at 18% 62%);
-  pointer-events: none;
-  z-index: 1;
+  display: none;
 }
 
 .home-hero-left::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -214px;
-  bottom: 0;
-  width: clamp(280px, 22vw, 392px);
-  background: linear-gradient(
-    to right,
-    var(--secondary) 0%,
-    var(--secondary) 40%,
-    rgba(13, 27, 42, 0.95) 55%,
-    rgba(13, 27, 42, 0.85) 65%,
-    rgba(13, 27, 42, 0.60) 75%,
-    rgba(13, 27, 42, 0.30) 86%,
-    rgba(13, 27, 42, 0.08) 94%,
-    transparent 100%
-  );
-  clip-path: ellipse(80% 158% at 12% 62%);
-  pointer-events: none;
-  z-index: 2;
+  display: none;
 }
 
 .home-hero-visual {
@@ -1549,8 +1520,26 @@ main {
   overflow: hidden;
   isolation: isolate;
   min-height: 100%;
-  margin-left: -122px;
-  clip-path: ellipse(66% 154% at 100% 62%);
+  margin-left: -200px;
+  /* Pull it slightly left to give room for the fade */
+  -webkit-mask-image: radial-gradient(ellipse 100% 140% at 100% 50%,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 1) 30%,
+      rgba(0, 0, 0, 0.85) 50%,
+      rgba(0, 0, 0, 0.65) 65%,
+      rgba(0, 0, 0, 0.40) 80%,
+      rgba(0, 0, 0, 0.15) 90%,
+      rgba(0, 0, 0, 0.05) 95%,
+      rgba(0, 0, 0, 0) 100%);
+  mask-image: radial-gradient(ellipse 100% 140% at 100% 50%,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 1) 30%,
+      rgba(0, 0, 0, 0.85) 50%,
+      rgba(0, 0, 0, 0.65) 65%,
+      rgba(0, 0, 0, 0.40) 80%,
+      rgba(0, 0, 0, 0.15) 90%,
+      rgba(0, 0, 0, 0.05) 95%,
+      rgba(0, 0, 0, 0) 100%);
 }
 
 .home-hero-visual::before {
@@ -1569,12 +1558,10 @@ main {
   position: absolute;
   inset: 0;
   background:
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(13, 27, 42, 0.14) 0%,
       rgba(13, 27, 42, 0.04) 38%,
-      rgba(13, 27, 42, 0.12) 100%
-    );
+      rgba(13, 27, 42, 0.12) 100%);
   z-index: 1;
 }
 
@@ -1752,6 +1739,8 @@ main {
     height: 400px;
     margin-left: 0;
     clip-path: none;
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 1) 30%);
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 1) 30%);
   }
 
   .home-hero-visual::before {
@@ -2874,276 +2863,277 @@ a.home-cta-contact-item:hover {
     min-height: 220px;
   }
 }
+
 /* ─── 404 Not Found ──────────────────────────────────────── */
 
 .nf-hero {
-    position: relative;
-    min-height: calc(100vh - 72px);
-    background: var(--secondary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding: 5rem 1.5rem;
+  position: relative;
+  min-height: calc(100vh - 72px);
+  background: var(--secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 5rem 1.5rem;
 }
 
 /* Subtle brick-grid line texture */
 .nf-bg-grid {
-    position: absolute;
-    inset: 0;
-    background-image:
-        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, 0.03) 39px, rgba(255, 255, 255, 0.03) 40px),
-        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, 0.03) 79px, rgba(255, 255, 255, 0.03) 80px);
-    pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background-image:
+    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, 0.03) 39px, rgba(255, 255, 255, 0.03) 40px),
+    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, 0.03) 79px, rgba(255, 255, 255, 0.03) 80px);
+  pointer-events: none;
 }
 
 /* Radial teal glow sitting behind the 404 number */
 .nf-glow {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -55%);
-    width: 700px;
-    height: 500px;
-    background: radial-gradient(ellipse at center, rgba(26, 140, 140, 0.18) 0%, transparent 70%);
-    pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -55%);
+  width: 700px;
+  height: 500px;
+  background: radial-gradient(ellipse at center, rgba(26, 140, 140, 0.18) 0%, transparent 70%);
+  pointer-events: none;
 }
 
 /* Content container */
 .nf-inner {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    max-width: 860px;
-    width: 100%;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 860px;
+  width: 100%;
 }
 
 /* "ERROR" eyebrow */
 .nf-eyebrow {
-    display: inline-block;
-    font-family: 'Outfit', sans-serif;
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    color: var(--primary);
-    background: rgba(244, 127, 32, 0.12);
-    padding: 4px 14px;
-    border-radius: 20px;
-    margin-bottom: 1.25rem;
-    border: 1px solid rgba(244, 127, 32, 0.25);
+  display: inline-block;
+  font-family: 'Outfit', sans-serif;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--primary);
+  background: rgba(244, 127, 32, 0.12);
+  padding: 4px 14px;
+  border-radius: 20px;
+  margin-bottom: 1.25rem;
+  border: 1px solid rgba(244, 127, 32, 0.25);
 }
 
 /* Giant "404" with gradient */
 .nf-number {
-    font-family: 'Outfit', sans-serif;
-    font-size: clamp(7rem, 20vw, 14rem);
-    font-weight: 800;
-    line-height: 0.9;
-    letter-spacing: -4px;
-    background: linear-gradient(135deg, #1a8c8c 0%, #f47f20 55%, #e0a060 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    color: transparent;
-    margin-bottom: 1.75rem;
-    animation: nf-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  font-family: 'Outfit', sans-serif;
+  font-size: clamp(7rem, 20vw, 14rem);
+  font-weight: 800;
+  line-height: 0.9;
+  letter-spacing: -4px;
+  background: linear-gradient(135deg, #1a8c8c 0%, #f47f20 55%, #e0a060 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  margin-bottom: 1.75rem;
+  animation: nf-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 @keyframes nf-pop {
-    from {
-        opacity: 0;
-        transform: scale(0.88);
-    }
+  from {
+    opacity: 0;
+    transform: scale(0.88);
+  }
 
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 /* Heading */
 .nf-heading {
-    font-family: 'Outfit', sans-serif;
-    font-size: clamp(1.4rem, 3vw, 2.1rem);
-    font-weight: 700;
-    color: var(--white);
-    max-width: 500px;
-    line-height: 1.3;
-    margin: 0 auto 1rem;
-    animation: nf-fade-up 0.5s 0.15s ease both;
+  font-family: 'Outfit', sans-serif;
+  font-size: clamp(1.4rem, 3vw, 2.1rem);
+  font-weight: 700;
+  color: var(--white);
+  max-width: 500px;
+  line-height: 1.3;
+  margin: 0 auto 1rem;
+  animation: nf-fade-up 0.5s 0.15s ease both;
 }
 
 /* Subtext */
 .nf-sub {
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 1.05rem;
-    line-height: 1.75;
-    max-width: 420px;
-    margin: 0 auto 2.5rem;
-    animation: nf-fade-up 0.5s 0.25s ease both;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 1.05rem;
+  line-height: 1.75;
+  max-width: 420px;
+  margin: 0 auto 2.5rem;
+  animation: nf-fade-up 0.5s 0.25s ease both;
 }
 
 @keyframes nf-fade-up {
-    from {
-        opacity: 0;
-        transform: translateY(14px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* CTA row */
 .nf-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-    margin-bottom: 3.5rem;
-    animation: nf-fade-up 0.5s 0.35s ease both;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 3.5rem;
+  animation: nf-fade-up 0.5s 0.35s ease both;
 }
 
 /* Ghost button for dark background */
 .nf-btn-ghost {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.6rem;
-    border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.9rem;
-    font-weight: 600;
-    text-decoration: none;
-    transition: border-color 0.2s, color 0.2s, background 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.6rem;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
 }
 
 .nf-btn-ghost:hover {
-    border-color: rgba(255, 255, 255, 0.5);
-    color: var(--white);
-    background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.5);
+  color: var(--white);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 /* Glasscard grid */
 .nf-cards {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.25rem;
-    justify-content: center;
-    width: 100%;
-    animation: nf-fade-up 0.5s 0.45s ease both;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+  justify-content: center;
+  width: 100%;
+  animation: nf-fade-up 0.5s 0.45s ease both;
 }
 
 .nf-card {
-    flex: 1 1 260px;
-    max-width: 360px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1.75rem 1.75rem 1.5rem;
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    text-align: left;
-    text-decoration: none;
-    color: var(--white);
-    position: relative;
-    overflow: hidden;
-    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
+  flex: 1 1 260px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.75rem 1.75rem 1.5rem;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  text-align: left;
+  text-decoration: none;
+  color: var(--white);
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
 }
 
 /* Teal-to-orange top accent slides in on hover */
 .nf-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, #1a8c8c, var(--primary));
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.3s ease;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #1a8c8c, var(--primary));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
 }
 
 .nf-card:hover::before {
-    transform: scaleX(1);
+  transform: scaleX(1);
 }
 
 .nf-card:hover {
-    transform: translateY(-5px);
-    background: rgba(255, 255, 255, 0.09);
-    border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.09);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Pill label */
 .nf-card-label {
-    display: inline-block;
-    font-size: 0.65rem;
-    font-weight: 700;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--primary);
-    background: rgba(244, 127, 32, 0.12);
-    border: 1px solid rgba(244, 127, 32, 0.2);
-    padding: 3px 10px;
-    border-radius: 20px;
-    align-self: flex-start;
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--primary);
+  background: rgba(244, 127, 32, 0.12);
+  border: 1px solid rgba(244, 127, 32, 0.2);
+  padding: 3px 10px;
+  border-radius: 20px;
+  align-self: flex-start;
 }
 
 .nf-card-title {
-    display: block;
-    font-size: 1.05rem;
-    font-weight: 700;
-    line-height: 1.35;
-    color: var(--white);
+  display: block;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--white);
 }
 
 .nf-card-cta {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.45);
-    transition: color 0.2s ease;
-    margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.45);
+  transition: color 0.2s ease;
+  margin-top: auto;
 }
 
 .nf-card:hover .nf-card-cta {
-    color: var(--primary);
+  color: var(--primary);
 }
 
 /* Mobile */
 @media (max-width: 540px) {
-    .nf-number {
-        letter-spacing: -2px;
-        margin-bottom: 1.25rem;
-    }
+  .nf-number {
+    letter-spacing: -2px;
+    margin-bottom: 1.25rem;
+  }
 
-    .nf-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
+  .nf-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
 
-    .nf-btn-ghost,
-    .nf-actions .button {
-        text-align: center;
-        justify-content: center;
-    }
+  .nf-btn-ghost,
+  .nf-actions .button {
+    text-align: center;
+    justify-content: center;
+  }
 
-    .nf-cards {
-        flex-direction: column;
-    }
+  .nf-cards {
+    flex-direction: column;
+  }
 
-    .nf-card {
-        max-width: 100%;
-    }
-}
+  .nf-card {
+    max-width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/devserver.out.log b/devserver.out.log
index 314010e930f0a1bc9966ff8efede561430b79506..9e1d77ac3335f93f1ab96dc441216ad9c264cfd1 100644
GIT binary patch
delta 12
TcmeCO{^78pOLnsW`#UB8B%=in

delta 7
Ocmez2&}F@$OBMhRE(28n