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

Strengthen mobile navbar blur

Browse Source
This commit is contained in:
oimwiodev
2026-05-16 23:12:43 +01:00
parent cdd6f1b103
commit ec8812c6e2
3 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -18,6 +18,7 @@ All notable changes to the New Optic website will be documented in this file.
- Reduced the mobile gap between the reputation section and contact panel. - Reduced the mobile gap between the reputation section and contact panel.
- Let the mobile WhatsApp nav CTA stretch into available navbar space. - Let the mobile WhatsApp nav CTA stretch into available navbar space.
- Restored mobile glass blur and premium highlight layers instead of flattening glass surfaces. - Restored mobile glass blur and premium highlight layers instead of flattening glass surfaces.
- Added a dedicated stronger blur treatment for the mobile top navigation bar.
## [1.0.0] - 2026-05-16 ## [1.0.0] - 2026-05-16

16
app/globals.css
View File

@@ -116,6 +116,12 @@ a {
inset 18px 0 34px rgba(255, 255, 255, 0.12); inset 18px 0 34px rgba(255, 255, 255, 0.12);
} }
.nav-glass {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(30px) saturate(1.32);
-webkit-backdrop-filter: blur(30px) saturate(1.32);
}
.hairline { .hairline {
background: linear-gradient(90deg, transparent, rgba(17, 19, 23, 0.15), transparent); background: linear-gradient(90deg, transparent, rgba(17, 19, 23, 0.15), transparent);
height: 1px; height: 1px;
@@ -180,6 +186,16 @@ a {
-webkit-backdrop-filter: blur(18px) saturate(1.24); -webkit-backdrop-filter: blur(18px) saturate(1.24);
} }
.nav-glass {
background: rgba(255, 255, 255, 0.58);
border-color: rgba(255, 255, 255, 0.86);
box-shadow:
0 14px 36px rgba(17, 19, 23, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
backdrop-filter: blur(26px) saturate(1.38);
-webkit-backdrop-filter: blur(26px) saturate(1.38);
}
main > section { main > section {
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: 1px 780px; contain-intrinsic-size: 1px 780px;

2
components/Navbar.tsx
View File

@@ -27,7 +27,7 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
return ( return (
<header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 max-[374px]:px-2.5 sm:px-6"> <header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 max-[374px]:px-2.5 sm:px-6">
<nav className="glass premium-glass mx-auto flex max-w-7xl items-center justify-start gap-2 rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 md:justify-between sm:px-5" aria-label="Main navigation"> <nav className="glass premium-glass nav-glass relative mx-auto flex max-w-7xl items-center justify-start gap-2 overflow-hidden rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 md:justify-between sm:px-5" aria-label="Main navigation">
<a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex shrink-0 items-center gap-3" aria-label="New Optic home"> <a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex shrink-0 items-center gap-3" aria-label="New Optic home">
<span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm max-[374px]:size-9"> <span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm max-[374px]:size-9">
<Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority /> <Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />