max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Keep the grain texture off content cards, only on page background/bands

Browse source 
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>
This commit is contained in:
Maaxxs 2026-07-07 02:49:25 +02:00
parent ec84b438ca
commit 8ee36fd3eb
3 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
hifi-src/src/components/PublicLayout.jsx
View file

@ -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 />

37
hifi-src/src/index.css
View file

@ -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");
}

4
hifi-src/src/pages/public/Home.jsx
View file

@ -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">