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>
This commit is contained in:
parent
6863f5022d
commit
32e0f688d1
4 changed files with 8 additions and 25 deletions
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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' }}
|
||||
|
|
|
|||
|
|
@ -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' }}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue