averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten header fog mask to extreme edges for better header coverage

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 09:13:44 -07:00
parent a8348a2b14
commit 38fc84e57c
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/UserHeader.tsx
View File

@ -219,16 +219,16 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
backdropFilter: 'blur(16px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
}}>
{/* Cloudy/Foggy effect overlay with ultra-smooth feathered edges */}
{/* Cloudy/Foggy effect overlay with tight edge feathering */}
<div
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-700"
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-500"
style={{
maskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0.4) 15%, black 40%, black 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.02) 98%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0.4) 15%, black 40%, black 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.02) 98%, transparent 100%)'
maskImage: 'linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%)'
}}
>
<div className="absolute inset-0 fog-layer-1 opacity-[0.2] dark:opacity-[0.15]" />
<div className="absolute inset-0 fog-layer-2 opacity-[0.12] dark:opacity-[0.1]" />
<div className="absolute inset-0 fog-layer-1 opacity-[0.25] dark:opacity-[0.2]" />
<div className="absolute inset-0 fog-layer-2 opacity-[0.18] dark:opacity-[0.15]" />
</div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">