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

Soften header aesthetics and fog mask for a truly blurred and seamless edge

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 09:20:32 -07:00
parent c4a6225edf
commit 4687958125
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/UserHeader.tsx
View File

@ -214,21 +214,22 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
<> <>
<header className="sticky top-0 z-50 transition-colors duration-300 relative" style={{ <header className="sticky top-0 z-50 transition-colors duration-300 relative" style={{
background: theme === 'light' background: theme === 'light'
? 'rgba(255, 255, 255, 0.98)' ? 'rgba(255, 255, 255, 0.92)'
: 'rgba(10, 10, 20, 0.99)', : 'rgba(10, 10, 20, 0.94)',
backdropFilter: 'blur(16px)', backdropFilter: 'blur(20px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.12)' : '1px solid rgba(255,255,255,0.04)' WebkitBackdropFilter: 'blur(20px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
}}> }}>
{/* Cloudy/Foggy effect overlay with tight edge feathering */} {/* Cloudy/Foggy effect overlay with ultra-soft feathered edges for a blurred look */}
<div <div
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-500" className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-500"
style={{ style={{
maskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)', maskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 12%, black 25%, black 75%, rgba(0,0,0,0.4) 88%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)' WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 12%, black 25%, black 75%, rgba(0,0,0,0.4) 88%, transparent 100%)'
}} }}
> >
<div className="absolute inset-0 fog-layer-1 opacity-[0.25] dark:opacity-[0.2]" /> <div className="absolute inset-0 fog-layer-1 opacity-[0.18] dark:opacity-[0.15]" />
<div className="absolute inset-0 fog-layer-2 opacity-[0.18] dark:opacity-[0.15]" /> <div className="absolute inset-0 fog-layer-2 opacity-[0.12] dark:opacity-[0.1]" />
</div> </div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50"> <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">