andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(site): hero blur as a horizontal frosted band (blur 100->0 outward, grain veil)

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 19:06:17 +01:00
1 parent b2b736734e
commit 938347779c
1 file changed
+20 -10
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+20 -10
View File
@@ -628,20 +628,30 @@ section[id] {
z-index: 2; z-index: 2;
} }
/* Gradient blur: the hero photo is blurred hardest behind the text (the middle) /* Frosted band: the hero photo is blurred at full strength along a horizontal
and sharpens smoothly outward — a backdrop blur masked by a radial gradient. line through the text and fades to sharp (0) outward, up and down — a backdrop
The layer sits behind the text (z-index -1 in the container's stacking blur masked by a vertical gradient. ::before is the blur, ::after the frost:
context) and above the photo and its overlays. */ a faint white veil plus fine grain, same mask. Both sit behind the text
.hero-section .container::before { (z-index -1 in the container's stacking context) and above the photo. */
.hero-section .container::before,
.hero-section .container::after {
content: ''; content: '';
position: absolute; /* the container is static, so this fills the hero */ position: absolute; /* the container is static, so these fill the hero */
inset: 0; inset: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
-webkit-backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%);
backdrop-filter: blur(18px); mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%);
-webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%); }
mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%); .hero-section .container::before {
-webkit-backdrop-filter: blur(22px) saturate(1.1);
backdrop-filter: blur(22px) saturate(1.1);
}
.hero-section .container::after {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.2'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.2'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.34'/%3E%3C/svg%3E") 0 0 / 180px 180px,
linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
background-blend-mode: overlay, normal;
} }
.hero-text { .hero-text {