From 8ee36fd3ebebe6eab8be4eed65ba4a2c387c6852 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Tue, 7 Jul 2026 02:49:25 +0200
Subject: [PATCH] Keep the grain texture off content cards, only on page
 background/bands

The fixed full-viewport overlay painted grain over everything,
including cards, buttons, and the FAQ accordion that should stay
plain. Back to plain background-image on .page-texture plus a new
.grain-band class for the two structural full-width stripe sections
on the homepage - cards keep their own opaque background, which
naturally blocks it without any extra work.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/components/PublicLayout.jsx |  1 -
 hifi-src/src/index.css                   | 37 ++++++++++--------------
 hifi-src/src/pages/public/Home.jsx       |  4 +--
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/hifi-src/src/components/PublicLayout.jsx b/hifi-src/src/components/PublicLayout.jsx
index 1c6c169..57e87c1 100644
--- a/hifi-src/src/components/PublicLayout.jsx
+++ b/hifi-src/src/components/PublicLayout.jsx
@@ -64,7 +64,6 @@ export default function PublicLayout() {
       <MaintenanceProvider value={{ ...status, bypass }}>
         <SiteSettingsProvider value={siteSettings}>
           <div className="page-texture flex min-h-screen flex-col text-neutral-900 dark:text-neutral-100">
-            <div className="grain-overlay" aria-hidden="true" />
             {bypass && status.global.enabled && <MaintenanceBypassBanner />}
             <ScrollProgress />
             <Navbar />
diff --git a/hifi-src/src/index.css b/hifi-src/src/index.css
index fe71885..96be5c9 100644
--- a/hifi-src/src/index.css
+++ b/hifi-src/src/index.css
@@ -11,32 +11,27 @@ html {
   mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
 }
 
-/* Grundflaeche der Seite - die eigentliche Koernung kommt separat vom .grain-overlay,
-   damit sie ueber JEDEM Abschnitt sichtbar bleibt, auch ueber Bereichen mit eigener
-   deckender Hintergrundfarbe (z.B. bg-neutral-50 Baendern). */
+/* Papierkorn nur auf der Seiten-Grundflaeche und den grauen "Band"-Abschnitten
+   (.grain-band) - NICHT als Overlay ueber allem, damit Karten/Akkordeons/Buttons
+   weiterhin schlicht bleiben (die haben ihre eigene deckende Hintergrundfarbe, die
+   das Korn ohnehin verdecken wuerde, aber ganz ohne Overlay ist das unabhaengig vom
+   Stapelkontext garantiert). */
 .page-texture {
   background-color: #f6f5f0;
-}
-
-.dark .page-texture {
-  background-color: #0a0b07;
-}
-
-/* Papierkorn als fixierter Ueberzug ueber der gesamten Seite statt als Hintergrundbild
-   eines einzelnen Elements, damit es ueber JEDER Sektion sichtbar bleibt (auch ueber
-   Baendern mit eigener deckender bg-neutral-50-Farbe). Normale Alpha-Transparenz statt
-   mix-blend-mode: "overlay"/"soft-light" haben auf Hintergruende nahe Weiss/Schwarz (wie
-   unsere Basisfarben) fast keinen sichtbaren Effekt, da die Blend-Mathematik dort kaum
-   noch Kontrast erzeugt - reine Deckkraft-Ueberlagerung funktioniert unabhaengig davon. */
-.grain-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 180px 180px;
 }
 
-.dark .grain-overlay {
+.dark .page-texture {
+  background-color: #0a0b07;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+.grain-band {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 180px 180px;
+}
+
+.dark .grain-band {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
diff --git a/hifi-src/src/pages/public/Home.jsx b/hifi-src/src/pages/public/Home.jsx
index 2845435..8aaeaf5 100644
--- a/hifi-src/src/pages/public/Home.jsx
+++ b/hifi-src/src/pages/public/Home.jsx
@@ -228,7 +228,7 @@ export default function Home() {
         </Reveal>
       </section>
 
-      <section className="border-y border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/40">
+      <section className="grain-band border-y border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/40">
         <div className="mx-auto max-w-6xl space-y-16 overflow-hidden px-4 sm:px-6">
           <div className="grid items-center gap-8 md:grid-cols-2">
             <Reveal direction="left" shine className="rounded-xl shadow-lg">
@@ -295,7 +295,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="border-y border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/40">
+      <section className="grain-band border-y border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/40">
         <div className="mx-auto max-w-6xl px-4 sm:px-6">
           <Reveal className="mb-10 text-center">
             <div className="mb-2 flex items-center justify-center gap-2">