diff --git a/CHANGELOG.md b/CHANGELOG.md index 5488d7c..7f02198 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ All notable changes to the New Optic website will be documented in this file. ### Changed +- Fixed desktop hero image visibility by removing liquid glass from image-bearing containers, while applying liquid glass to navbar/buttons and adding a stronger CSS glass fallback. - Re-enabled liquid glass on desktop PCs using user-agent and pointer capability detection, while keeping it disabled on phones and tablets. - Changed trust stat label accent from blue to a softer neutral white tone. - Refined contact and trust UI: stat labels are now accented above values, French WhatsApp CTA says "Discuter sur WhatsApp", hours information is emphasized, and mobile navbar shows WhatsApp without opening the menu. diff --git a/app/globals.css b/app/globals.css index b2d2c26..25d1896 100644 --- a/app/globals.css +++ b/app/globals.css @@ -83,6 +83,32 @@ a { backdrop-filter: blur(24px); } +.premium-glass::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.2)), + radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.55), transparent 34%), + radial-gradient(circle at 82% 100%, rgba(49, 95, 143, 0.12), transparent 38%); + opacity: 0.72; + mix-blend-mode: screen; +} + +.premium-glass::after { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + pointer-events: none; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.8), + inset 0 -18px 32px rgba(49, 95, 143, 0.08), + inset 18px 0 34px rgba(255, 255, 255, 0.12); +} + .hairline { background: linear-gradient(90deg, transparent, rgba(17, 19, 23, 0.15), transparent); height: 1px; @@ -156,6 +182,11 @@ a { box-shadow: 0 10px 30px rgba(17, 19, 23, 0.07); } + .premium-glass::before, + .premium-glass::after { + display: none; + } + main > section { content-visibility: auto; contain-intrinsic-size: 1px 780px; diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx index 09db017..b3bccb9 100644 --- a/components/HeroSection.tsx +++ b/components/HeroSection.tsx @@ -65,7 +65,7 @@ export default function HeroSection({ t, whatsappUrl }: { t: Messages; whatsappU className="relative mx-auto w-full max-w-xl lg:max-w-none lg:will-change-transform" >
-
+
{t.hero.imageAlt} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 2a1d134..0c9cfea 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -24,7 +24,7 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc return (
-