fix(styles): background-color of body is static to match bg images

[marissahuysentruyt]

Description

Possible Safari bug with the picture/image BG after an image update. We specifically use loading="eager" and sizes="auto" on our light-mode image element, which might be clashing with Safari's support for size="auto", where they are specifically looking for lazy loaded image elements. 🤷‍♀️

https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/

Version 27.0.1 (the bg image is sort of centered, but if you inspect the element, it still spans the whole screen.

This might be a temp fix. This PR is merging early just so the site isn't broken-looking on new versions of Safari all weekend. This doesn't change doesn't produce any any visible side effect on Chrome or Firefox.

Screenshots (if applicable)

Type of change

• Bug fix
• New feature / block
• Refactor
• Docs / content
• Chore (deps, config, tooling)

Related issue(s)

• fixes [Issue Number]

Validation steps

• This PR has visual elements, so it was reviewed by a designer.
• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).
• This PR affects existing pages, so automated E2E tests were run (see below).
• This PR has new code, so new tests were added or updated, and they pass.
• This PR has copy changes, so copy was proofread and approved.
• The content of this PR requires documentation, so a detailed description of the component's purpose, requirements, quirks, and instructions for use by designers and developers was added, along with accessibility information if pertinent.

To Validate

URL for testing:
https://safari-bg--spectrum-hub--adobe.aem.live/

• Make sure all PR Checks have passed
• Pull down the branch locally or visit the branch preview
• Run npm test and confirm all tests pass
• Run npm run lint and confirm no linting errors
• Verified in browser with aem up

Accessibility testing checklist

• Keyboard

1. Go here
2. Do this action
3. Expect this result

• Screen reader

1. Go here
2. Do this action
3. Expect this result

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 51844ac ✅ (latest)
• 3d64361 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/

[marissahuysentruyt]

merging with known contrast issues for the se-textarea (unused in this repo) and se-input (it's the contrast between the default gray-300 border of the textfield and the f7f7f7 bg color)