diff --git a/app/globals.css b/app/globals.css index 0d9ba3d..7120d15 100644 --- a/app/globals.css +++ b/app/globals.css @@ -395,133 +395,119 @@ filter: sepia(0.35) saturate(2.6) hue-rotate(92deg) brightness(0.92) contrast(1.2); } - /* Hero — water flowing through contour channels (vertical, not side shake) */ + /* Hero — gentle fill in/out on contour lines (no pan, shake, or slide) */ .rift-hero-topo .topo-hero-pattern-img { - opacity: 0.48; + opacity: 0.42; mix-blend-mode: multiply; filter: sepia(0.35) saturate(2.6) hue-rotate(92deg) brightness(0.92) contrast(1.2); - transform: scale(1.08); - animation: topo-hero-base-flow 20s linear infinite; + transform: scale(1.06); + object-position: 50% 50%; + animation: topo-hero-fill-breathe 9s ease-in-out infinite; } .rift-hero-topo .topo-hero-water-flow-img { - opacity: 0.34; + opacity: 0.2; mix-blend-mode: multiply; - filter: sepia(0.35) saturate(3) hue-rotate(92deg) brightness(1.12) contrast(1.18); - transform: scale(1.12); - animation: topo-hero-water-stream 11s linear infinite; + filter: sepia(0.35) saturate(2.8) hue-rotate(92deg) brightness(1.05) contrast(1.15); + transform: scale(1.06); + object-position: 50% 50%; + animation: topo-hero-fill-pulse 9s ease-in-out infinite; + animation-delay: -4.5s; } .topo-hero-water-shimmer { - background: linear-gradient( - to top, - transparent 0%, - rgba(26, 92, 56, 0.05) 12%, - rgba(45, 122, 82, 0.18) 28%, - rgba(140, 220, 175, 0.38) 42%, - rgba(80, 160, 120, 0.32) 52%, - rgba(45, 122, 82, 0.22) 62%, - rgba(26, 92, 56, 0.08) 78%, - transparent 100% + background: radial-gradient( + ellipse 80% 60% at 50% 55%, + rgba(45, 122, 82, 0.14) 0%, + rgba(26, 92, 56, 0.06) 45%, + transparent 72% ); - background-size: 120% 320%; mix-blend-mode: soft-light; - opacity: 0.65; - animation: topo-hero-shimmer-rise 8s ease-in-out infinite; + opacity: 0.5; + animation: topo-hero-shimmer-breathe 11s ease-in-out infinite; } .topo-hero-channel-glow { background: radial-gradient( - ellipse 28% 18% at 50% var(--flow-y, 60%), - rgba(120, 200, 160, 0.45) 0%, - rgba(45, 122, 82, 0.2) 35%, - transparent 70% + ellipse 70% 50% at 50% 58%, + rgba(120, 200, 160, 0.2) 0%, + rgba(45, 122, 82, 0.08) 50%, + transparent 75% ); mix-blend-mode: soft-light; - opacity: 0.7; - animation: topo-hero-channel-glow 8s ease-in-out infinite; + opacity: 0.55; + animation: topo-hero-glow-breathe 13s ease-in-out infinite; } .topo-hero-water-spotlight { background: radial-gradient( circle at var(--topo-hover-x, 50%) var(--topo-hover-y, 50%), - rgba(120, 200, 160, 0.28) 0%, - rgba(45, 122, 82, 0.12) 22%, - transparent 52% + rgba(120, 200, 160, 0.16) 0%, + rgba(45, 122, 82, 0.06) 28%, + transparent 48% ); mix-blend-mode: soft-light; opacity: 0; - transition: opacity 0.45s ease; + transition: opacity 0.6s ease; } .rift-hero-topo--hover .topo-hero-water-flow-img { - opacity: 0.52; - animation-duration: 5.5s; + opacity: 0.3; } .rift-hero-topo--hover .topo-hero-water-shimmer { - opacity: 1; - animation-duration: 4s; + opacity: 0.62; } .rift-hero-topo--hover .topo-hero-channel-glow { - opacity: 1; - animation-duration: 4.5s; + opacity: 0.68; } .rift-hero-topo--hover .topo-hero-water-spotlight { - opacity: 1; + opacity: 0.85; } .rift-hero-topo--hover .topo-hero-pattern-img { - opacity: 0.56; - animation-duration: 12s; + opacity: 0.5; } - @keyframes topo-hero-base-flow { - 0% { - object-position: 50% 100%; - } + @keyframes topo-hero-fill-breathe { + 0%, 100% { - object-position: 50% 0%; - } - } - - @keyframes topo-hero-water-stream { - 0% { - object-position: 46% 100%; - opacity: 0.22; - } - 40% { - opacity: 0.42; - } - 100% { - object-position: 54% 0%; - opacity: 0.26; - } - } - - @keyframes topo-hero-shimmer-rise { - 0% { - background-position: 40% 110%; - } - 100% { - background-position: 60% -15%; - } - } - - @keyframes topo-hero-channel-glow { - 0% { - --flow-y: 95%; - opacity: 0.35; + opacity: 0.36; } 50% { - --flow-y: 35%; - opacity: 0.85; + opacity: 0.5; } + } + + @keyframes topo-hero-fill-pulse { + 0%, 100% { - --flow-y: -5%; - opacity: 0.4; + opacity: 0.14; + } + 50% { + opacity: 0.28; + } + } + + @keyframes topo-hero-shimmer-breathe { + 0%, + 100% { + opacity: 0.38; + } + 50% { + opacity: 0.58; + } + } + + @keyframes topo-hero-glow-breathe { + 0%, + 100% { + opacity: 0.42; + } + 50% { + opacity: 0.62; } } @@ -691,6 +677,17 @@ color: #3d5248; } + .section-green .ticket-admission, + .section-green .ticket-admission :is(h1, h2, h3, h4, p, span, li, label) { + color: #1a5c38; + text-shadow: none; + } + + .section-green .ticket-admission .text-muted-foreground, + .section-green .ticket-admission p { + color: #3d5248; + } + .topo-card-link, .topo-card-link svg { color: #1a5c38; @@ -1056,16 +1053,16 @@ .rift-hero-settled .rift-channel-inner, .rift-ambient-pulse .rift-contour-path, .rift-pulse-animate, - .rift-hero-topo .topo-hero-pattern-img, - .rift-hero-topo .topo-hero-water-flow-img, - .rift-hero-topo .topo-hero-water-shimmer, - .rift-hero-topo .topo-hero-channel-glow { + .rift-hero-topo .topo-hero-pattern-img { animation: none !important; + opacity: 0.44 !important; } + .rift-hero-topo .topo-hero-water-flow-img, .rift-hero-topo .topo-hero-water-shimmer, - .rift-hero-topo .topo-hero-water-spotlight, - .rift-hero-topo .topo-hero-channel-glow { + .rift-hero-topo .topo-hero-channel-glow, + .rift-hero-topo .topo-hero-water-spotlight { + animation: none !important; opacity: 0 !important; } } diff --git a/app/layout.tsx b/app/layout.tsx index 452ac3c..5e85dbf 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import { Syne, DM_Sans, Playfair_Display } from "next/font/google"; import { RiftPageFlow } from "@/components/brand/RiftPageFlow"; import { JsonLd } from "@/components/seo/JsonLd"; import { SiteHeader } from "@/components/layout/SiteHeader"; +import { SiteEntryPrompt } from "@/components/layout/SiteEntryPrompt"; import { SiteFooter } from "@/components/layout/SiteFooter"; import { rootMetadata } from "@/lib/seo"; import "./globals.css"; @@ -41,6 +42,7 @@ export default function RootLayout({