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

style(site): green frost tint on the hero band, discreet text shadow on the h1

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:07:01 +01:00
1 parent 938347779c
commit 3d30f09bb3
1 file changed
+4 -3
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+4 -3
View File
@@ -631,7 +631,7 @@ section[id] {
/* Frosted band: the hero photo is blurred at full strength along a horizontal /* Frosted band: the hero photo is blurred at full strength along a horizontal
line through the text and fades to sharp (0) outward, up and down — a backdrop line through the text and fades to sharp (0) outward, up and down — a backdrop
blur masked by a vertical gradient. ::before is the blur, ::after the frost: blur masked by a vertical gradient. ::before is the blur, ::after the frost:
a faint white veil plus fine grain, same mask. Both sit behind the text a faint brand-colour (green) veil plus fine grain, same mask. Both sit behind the text
(z-index -1 in the container's stacking context) and above the photo. */ (z-index -1 in the container's stacking context) and above the photo. */
.hero-section .container::before, .hero-section .container::before,
.hero-section .container::after { .hero-section .container::after {
@@ -650,7 +650,7 @@ section[id] {
.hero-section .container::after { .hero-section .container::after {
background: 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, 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)); linear-gradient(rgba(var(--fitme-accent-rgb), .16), rgba(var(--fitme-accent-rgb), .16)); /* brand-colour frost tint */
background-blend-mode: overlay, normal; background-blend-mode: overlay, normal;
} }
@@ -665,7 +665,8 @@ section[id] {
font-size: clamp(1.75rem, calc(.7444rem + 4.0741vw), 3.8rem); font-size: clamp(1.75rem, calc(.7444rem + 4.0741vw), 3.8rem);
font-weight: 900; font-weight: 900;
color: #fff; color: #fff;
text-shadow: 0 2px 40px rgba(0, 0, 0, .5); /* tight + soft shadow so the lettering separates from the frosted band */
text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 3px 14px rgba(0, 0, 0, .35), 0 2px 40px rgba(0, 0, 0, .3);
line-height: 1.05; line-height: 1.05;
letter-spacing: -.5px; letter-spacing: -.5px;
} }