oimwiodev/New-Optic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Improve mobile performance

Browse Source
This commit is contained in:
OpenCode
2026-05-16 00:15:21 +01:00
parent 2fddb47166
commit 19661417a6
2 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -25,6 +25,8 @@ All notable changes to the New Optic website will be documented in this file.
### Changed
- Optimized mobile rendering by disabling heavy blur, fixed backgrounds, ambient animations, and WebGL glass below desktop widths.
- Changed mobile CSS to reference only the compressed mobile background by default, keeping the full PNG desktop-only.
- Added mobile `content-visibility` containment so offscreen sections do less rendering work on low-end devices.
- Reworked collection cards from abstract placeholders to image-led product cards.
- Improved dark-section heading contrast.
- Corrected French typography and accents.

38
app/globals.css
View File

@@ -20,10 +20,8 @@ body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(180deg, rgba(251, 250, 248, 0.86) 0%, rgba(246, 245, 242, 0.92) 45%, rgba(255, 255, 255, 0.94) 100%),
url('/assets/New-optic-BG.png') center top / cover fixed,
radial-gradient(circle at top left, rgba(49, 95, 143, 0.13), transparent 34rem),
radial-gradient(circle at 82% 12%, rgba(216, 221, 229, 0.9), transparent 24rem),
linear-gradient(180deg, rgba(251, 250, 248, 0.9) 0%, rgba(246, 245, 242, 0.94) 45%, rgba(255, 255, 255, 0.96) 100%),
url('/assets/New-optic-BG-mobile.webp') center top / cover scroll,
linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
color: var(--ink);
font-family: var(--font-sans), system-ui, sans-serif;
@@ -137,13 +135,6 @@ a {
}
@media (max-width: 1023px) {
body {
background:
linear-gradient(180deg, rgba(251, 250, 248, 0.9) 0%, rgba(246, 245, 242, 0.94) 45%, rgba(255, 255, 255, 0.96) 100%),
url('/assets/New-optic-BG-mobile.webp') center top / cover scroll,
linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
}
body::before,
body::after {
display: none;
@@ -164,6 +155,20 @@ a {
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 10px 30px rgba(17, 19, 23, 0.07);
}
main > section {
content-visibility: auto;
contain-intrinsic-size: 1px 780px;
}
main > section:first-child {
content-visibility: visible;
contain-intrinsic-size: auto;
}
* {
transition-duration: 160ms !important;
}
}
@media (max-width: 767px) {
@@ -172,3 +177,14 @@ a {
box-shadow: 0 10px 24px rgba(17, 19, 23, 0.08) !important;
}
}
@media (min-width: 1024px) {
body {
background:
linear-gradient(180deg, rgba(251, 250, 248, 0.86) 0%, rgba(246, 245, 242, 0.92) 45%, rgba(255, 255, 255, 0.94) 100%),
url('/assets/New-optic-BG.png') center top / cover fixed,
radial-gradient(circle at top left, rgba(49, 95, 143, 0.13), transparent 34rem),
radial-gradient(circle at 82% 12%, rgba(216, 221, 229, 0.9), transparent 24rem),
linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
}
}