[SR] - [MWPW-192883] - Rich Content Hero Jump Variant#5932
Conversation
…oor animation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
||
| .title-2, | ||
| .eyebrow { | ||
| max-width: 656px; |
There was a problem hiding this comment.
Is this meant to be fixed or does it map to a specific number of columns?
There was a problem hiding this comment.
Not sure, what do you think?
| Viewport | Content width | Max-width | Approx columns |
|---|---|---|---|
| 768px+ | 768 − 64 = 704px | 530px | 530/704 ≈ 9/12 |
| 1024px+ | 1024 − 80 = 944px | 656px | 656/944 ≈ 8.3/12 |
| 1440px+ | 1440 − 80 = 1360px | 656px | 656/1360 ≈ 5.8/12 |
| background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.8) 100%); | ||
| } | ||
|
|
||
| .section:not(.has-background):has(.rich-content.jump-link.hero) { | ||
| background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.8) 100%), var(--s2a-color-background-default); |
There was a problem hiding this comment.
Having specific colors in code might not be a good strategy for the long term. Can authoring be leveraged in any way here?
There was a problem hiding this comment.
We can but this is just to override the wave 1 linear background being applied also via code, if we changed it here it would make sense to change it for the wave 1 code and make it authorable, not sure if we should invest time into that currently, but I do agree we should do it at one point.
…nto rich-content-hero
| animation-composition: replace, add; | ||
| } | ||
|
|
||
| @keyframes dg-top-door { |
There was a problem hiding this comment.
dg = double garage door?
|
|
||
| picture, | ||
| img { | ||
| width: 24px; |
There was a problem hiding this comment.
here we should be able to use tokens
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| width: 12px; |
Adds rich-content jump-link hero variant with parallax double garage door animation
Resolves: MWPW-192883
Test URLs: