From 32e0f688d1804423c2d5d479fef6c35e0057dd52 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Thu, 28 May 2026 16:35:15 +0100
Subject: [PATCH] fix(header,sliders): solid green header + fix coverflow
 overflow clipping

- Header: remove liquid-glass transparency; solid #396817 background so header
  no longer bleeds orange from the hero background
- GallerySlider/DinoGallery/DyvoLisGallery: change overflow-hidden to
  overflowX:clip so side cards in 3D coverflow are visible

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/layout/HeaderClient.tsx     | 23 +++-------------------
 src/components/sections/DinoGallery.tsx    |  2 +-
 src/components/sections/DyvoLisGallery.tsx |  6 +++---
 src/components/sections/GallerySlider.tsx  |  2 +-
 4 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/src/components/layout/HeaderClient.tsx b/src/components/layout/HeaderClient.tsx
index 907a959..e823a16 100644
--- a/src/components/layout/HeaderClient.tsx
+++ b/src/components/layout/HeaderClient.tsx
@@ -39,23 +39,10 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
       <div
         className="relative mx-auto max-w-[1204px] rounded-b-[20px]"
         style={{
-          // Liquid-glass: heavy blur + saturate + thin dark-green wash.
-          // Webkit prefix kept for Safari < 18.
-          backgroundColor: 'rgba(34, 62, 13, 0.42)',
-          backdropFilter: 'blur(22px) saturate(160%)',
-          WebkitBackdropFilter: 'blur(22px) saturate(160%)',
-          boxShadow: 'inset 0 1px 0 0 rgba(255,255,255,0.18), 0 1px 0 0 rgba(57,104,23,0.18)',
+          backgroundColor: '#396817',
+          boxShadow: '0 4px 20px rgba(0,0,0,0.18)',
         }}
       >
-        {/* Highlight sheen (top edge) — gives the glass-y look from Figma */}
-        <span
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-0 h-[34px]"
-          style={{
-            background: 'linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0))',
-          }}
-        />
-
         <div className="relative flex h-[60px] items-center justify-between px-[20px] lg:h-[120px] lg:px-[30px]">
           {/* Logo */}
           <Link href="/" aria-label="Шуміленд — на головну" className="shrink-0">
@@ -152,11 +139,7 @@ export function HeaderClient({ navLinks, ctaLabel, ctaHref, logo }: HeaderClient
       {menuOpen && (
         <div
           className="mx-auto mt-1 max-w-[1204px] rounded-[20px] px-6 py-5 lg:hidden"
-          style={{
-            backgroundColor: 'rgba(57,104,23,0.85)',
-            backdropFilter: 'blur(22px) saturate(160%)',
-            WebkitBackdropFilter: 'blur(22px) saturate(160%)',
-          }}
+          style={{ backgroundColor: '#2d5414' }}
         >
           <ul className="m-0 flex list-none flex-col gap-5 p-0">
             {navLinks.map((link) => (
diff --git a/src/components/sections/DinoGallery.tsx b/src/components/sections/DinoGallery.tsx
index dd9db9f..7736c95 100644
--- a/src/components/sections/DinoGallery.tsx
+++ b/src/components/sections/DinoGallery.tsx
@@ -26,7 +26,7 @@ export function DinoGallery({ images }: DinoGalleryProps) {
   }
 
   return (
-    <section className="overflow-hidden py-14 lg:py-20" style={{ background: '#f1fbeb' }}>
+    <section className="py-14 lg:py-20" style={{ background: '#f1fbeb', overflowX: 'clip' }}>
       <div
         className="relative mx-auto h-[260px] max-w-[1204px] lg:h-[420px]"
         style={{ perspective: '1100px' }}
diff --git a/src/components/sections/DyvoLisGallery.tsx b/src/components/sections/DyvoLisGallery.tsx
index eeb94ac..7e39800 100644
--- a/src/components/sections/DyvoLisGallery.tsx
+++ b/src/components/sections/DyvoLisGallery.tsx
@@ -55,8 +55,8 @@ export function DyvoLisGallery({
 
   return (
     <section
-      className="flex flex-col items-center overflow-hidden"
-      style={{ background: '#f1fbeb' }}
+      className="flex flex-col items-center"
+      style={{ background: '#f1fbeb', overflowX: 'clip' }}
     >
       {/* Quote banner */}
       <div className="relative w-full py-10 lg:py-14" style={{ background: '#396817' }}>
@@ -69,7 +69,7 @@ export function DyvoLisGallery({
       </div>
 
       {/* 3D Coverflow */}
-      <div className="relative w-full overflow-hidden py-14 lg:py-20">
+      <div className="relative w-full py-14 lg:py-20" style={{ overflowX: 'clip' }}>
         <div
           className="relative mx-auto h-[260px] max-w-[1204px] lg:h-[400px]"
           style={{ perspective: '1100px' }}
diff --git a/src/components/sections/GallerySlider.tsx b/src/components/sections/GallerySlider.tsx
index 4af5f34..fc9d55d 100644
--- a/src/components/sections/GallerySlider.tsx
+++ b/src/components/sections/GallerySlider.tsx
@@ -47,7 +47,7 @@ export function GallerySlider({ images }: GallerySliderProps) {
   return (
     <>
       {/* 3D Coverflow */}
-      <div className="overflow-hidden">
+      <div style={{ overflowX: 'clip', overflowY: 'visible' }}>
         <div className="relative mx-auto h-[260px] lg:h-[420px]" style={{ perspective: '1100px' }}>
           {images.map((img, i) => {
             const d = getOffset(i)