Kirubel-Kibru-Yaltopia
4ca1a4d497
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
1178 lines
29 KiB
CSS
1178 lines
29 KiB
CSS
@import "tailwindcss";
|
|
@import "@fontsource-variable/google-sans-flex/wght.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--font-sans: var(--font-body);
|
|
--font-display: var(--font-display);
|
|
--font-wordmark: "Google Sans Flex Variable", system-ui, sans-serif;
|
|
--font-hero-serif: var(--font-hero-serif);
|
|
--color-brand-green: #1a5c38;
|
|
--color-brand-green-dark: #0d3d26;
|
|
--color-brand-gold: #ffb300;
|
|
--color-brand-blue: #1f3d7e;
|
|
--color-brand-navy: #0f0404;
|
|
--color-surface-muted: #f7f7f7;
|
|
--color-text-muted: #767676;
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--background: #ffffff;
|
|
--foreground: #0d3d26;
|
|
--card: #ffffff;
|
|
--card-foreground: #0d3d26;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #0d3d26;
|
|
/* Primary: brand green · Secondary: white */
|
|
--primary: #1a5c38;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ffffff;
|
|
--secondary-foreground: #1a5c38;
|
|
--muted: #f0f5f2;
|
|
--muted-foreground: #5a6b62;
|
|
--accent: #ffb300;
|
|
--accent-foreground: #0d3d26;
|
|
--destructive: #dc2626;
|
|
--border: #dce8e0;
|
|
--input: #dce8e0;
|
|
--ring: #1a5c38;
|
|
--hero: #0d3d26;
|
|
--section-muted: #f0f5f2;
|
|
--section-inverse: #1a5c38;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family: var(--font-body), system-ui, sans-serif;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-family: var(--font-display), system-ui, sans-serif;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-wordmark {
|
|
font-family: var(--font-wordmark);
|
|
font-weight: 900;
|
|
font-variation-settings: "wght" 900;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.font-hero-serif {
|
|
font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
|
|
}
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
.section-inverse {
|
|
background-color: #1a5c38;
|
|
color: #fafafa;
|
|
}
|
|
.section-green {
|
|
background-color: #1a5c38;
|
|
color: #fafafa;
|
|
}
|
|
|
|
@keyframes geometric-mess-drift {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(0.4%, -0.3%) scale(1.008);
|
|
}
|
|
100% {
|
|
transform: translate(-0.3%, 0.2%) scale(1.004);
|
|
}
|
|
}
|
|
.geometric-mess-layer {
|
|
animation: geometric-mess-drift 56s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.grain {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* White-section contour lines — slow parallax drift */
|
|
@keyframes wavy-contour-drift-a {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(2.5%, -1.2%) scale(1.03);
|
|
}
|
|
100% {
|
|
transform: translate(-1.5%, 0.8%) scale(1.01);
|
|
}
|
|
}
|
|
@keyframes wavy-contour-drift-b {
|
|
0% {
|
|
transform: translate(0, 0) scale(1.02);
|
|
}
|
|
50% {
|
|
transform: translate(-2%, 1%) scale(1.04);
|
|
}
|
|
100% {
|
|
transform: translate(1.8%, -0.6%) scale(1.01);
|
|
}
|
|
}
|
|
.wavy-contour-layer--primary {
|
|
animation: wavy-contour-drift-a 48s ease-in-out infinite alternate;
|
|
}
|
|
.wavy-contour-layer--secondary {
|
|
animation: wavy-contour-drift-b 62s ease-in-out infinite alternate-reverse;
|
|
}
|
|
|
|
/* Full-page atmosphere — brand wash drift (behind grain + lines) */
|
|
@keyframes backdrop-bloom-a {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(4%, -3%) scale(1.08);
|
|
}
|
|
}
|
|
@keyframes backdrop-bloom-b {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(-5%, 4%) scale(1.06);
|
|
}
|
|
}
|
|
.backdrop-bloom-a {
|
|
animation: backdrop-bloom-a 32s ease-in-out infinite;
|
|
}
|
|
.backdrop-bloom-b {
|
|
animation: backdrop-bloom-b 38s ease-in-out infinite;
|
|
}
|
|
|
|
/* Seamless horizontal pan — valley / ocean line bands */
|
|
@keyframes valley-pan-slow {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.valley-pan-slow {
|
|
animation: valley-pan-slow 140s linear infinite;
|
|
}
|
|
.valley-pan-slower {
|
|
animation: valley-pan-slow 220s linear infinite;
|
|
}
|
|
.valley-pan-medium {
|
|
animation: valley-pan-slow 95s linear infinite;
|
|
}
|
|
.valley-pan-slower-reverse {
|
|
animation: valley-pan-slow 220s linear infinite reverse;
|
|
}
|
|
.marquee {
|
|
animation: marquee 40s linear infinite;
|
|
}
|
|
.marquee-winners {
|
|
animation: marquee 55s linear infinite;
|
|
}
|
|
.marquee-winners:hover {
|
|
animation-play-state: paused;
|
|
}
|
|
.marquee-winners-paused {
|
|
animation-play-state: paused !important;
|
|
}
|
|
|
|
@keyframes winner-impact-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
|
|
@keyframes winner-impact-glow {
|
|
0%,
|
|
100% {
|
|
color: #0d3d26;
|
|
text-shadow: 0 0 0 transparent;
|
|
}
|
|
50% {
|
|
color: #1a5c38;
|
|
text-shadow: 0 0 14px rgba(74, 173, 110, 0.45);
|
|
}
|
|
}
|
|
|
|
.winner-impact-value {
|
|
display: block;
|
|
max-width: 50%;
|
|
margin-inline: auto;
|
|
animation:
|
|
winner-impact-pulse 2.4s ease-in-out infinite,
|
|
winner-impact-glow 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.marquee,
|
|
.marquee-winners {
|
|
animation: none;
|
|
}
|
|
.winner-impact-value {
|
|
animation: none;
|
|
}
|
|
.backdrop-bloom-a,
|
|
.backdrop-bloom-b,
|
|
.valley-pan-slow,
|
|
.valley-pan-slower,
|
|
.valley-pan-medium,
|
|
.valley-pan-slower-reverse {
|
|
animation: none;
|
|
}
|
|
}
|
|
.ticket-notch::before,
|
|
.ticket-notch::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
transform: translateX(-50%);
|
|
border-radius: 9999px;
|
|
background: var(--section-inverse, #0a0a0a);
|
|
}
|
|
.ticket-notch::before {
|
|
top: -0.75rem;
|
|
}
|
|
.ticket-notch::after {
|
|
bottom: -0.75rem;
|
|
}
|
|
|
|
/* Admission ticket — side notches + rounded body */
|
|
.ticket-admission {
|
|
border-radius: 1rem;
|
|
--ticket-notch-fill: var(--section-inverse, #1a5c38);
|
|
}
|
|
.ticket-admission[data-ticket-notch="light"] {
|
|
--ticket-notch-fill: #f0f5f2;
|
|
}
|
|
.ticket-admission::before,
|
|
.ticket-admission::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 2;
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
border-radius: 9999px;
|
|
background: var(--ticket-notch-fill);
|
|
transform: translateY(-50%);
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.ticket-admission::before {
|
|
left: -0.675rem;
|
|
}
|
|
.ticket-admission::after {
|
|
right: -0.675rem;
|
|
}
|
|
|
|
/* Rift topography tokens */
|
|
:root {
|
|
--rift-scroll: 0;
|
|
--rift-canvas: #fbfdfb;
|
|
--rift-stroke: rgba(26, 92, 56, 0.18);
|
|
--rift-stroke-minor: rgba(26, 92, 56, 0.26);
|
|
--rift-stroke-inverse: rgba(255, 255, 255, 0.25);
|
|
--rift-accent: #ffb300;
|
|
--rift-channel: #1a5c38;
|
|
}
|
|
|
|
.rift-profile-partners .rift-contour-minor,
|
|
.rift-profile-terrace-dense .rift-terrace-line {
|
|
opacity: 1.15;
|
|
}
|
|
.rift-profile-privacy .rift-contour-path,
|
|
.rift-profile-contact .rift-contour-path {
|
|
opacity: 0.85;
|
|
}
|
|
.rift-profile-pitch .rift-channel-inner {
|
|
stroke: var(--rift-accent);
|
|
}
|
|
.rift-profile-payment .rift-channel-outer {
|
|
stroke: var(--rift-accent);
|
|
}
|
|
|
|
.rift-ambient-pulse .rift-contour-path {
|
|
animation: rift-contour-pulse 5s ease-in-out infinite;
|
|
}
|
|
|
|
.rift-channel-open {
|
|
background: radial-gradient(
|
|
ellipse 12% 35% at 50% 45%,
|
|
rgba(255, 179, 0, 0.08) 0%,
|
|
transparent 65%
|
|
);
|
|
opacity: 0;
|
|
}
|
|
.rift-hero-intro .rift-channel-open {
|
|
animation: rift-channel-open 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-settled .rift-channel-open,
|
|
.rift-hero-static .rift-channel-open {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes rift-channel-open {
|
|
0%,
|
|
28% {
|
|
opacity: 0;
|
|
transform: scaleY(0.2);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
.rift-line-draw path {
|
|
transition:
|
|
stroke 0.85s ease,
|
|
opacity 0.85s ease,
|
|
stroke-dashoffset 0.2s ease-out;
|
|
}
|
|
.valley-pan-slow {
|
|
animation-duration: calc(140s - 55s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-slower {
|
|
animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-medium {
|
|
animation-duration: calc(95s - 40s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-slower-reverse {
|
|
animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
|
|
}
|
|
|
|
/* Navbar tickets CTA — glow + text + arrow */
|
|
@keyframes ticket-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 10px rgba(255, 179, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ticket-text-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
@keyframes ticket-arrow-nudge {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
.ticket-cta-pulse {
|
|
animation: ticket-glow 2.2s ease-in-out infinite;
|
|
}
|
|
.ticket-cta-text {
|
|
display: inline-block;
|
|
animation: ticket-text-pulse 2.2s ease-in-out infinite;
|
|
}
|
|
.ticket-cta-arrow {
|
|
animation: ticket-arrow-nudge 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ticket-card-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.ticket-card-enter {
|
|
animation: ticket-card-enter 0.6s ease-out both;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ticket-cta-pulse,
|
|
.ticket-cta-text,
|
|
.ticket-cta-arrow,
|
|
.ticket-card-enter {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile menu tickets — continuous right-to-left scroll */
|
|
@keyframes ticket-menu-marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.ticket-menu-marquee {
|
|
animation: ticket-menu-marquee 11s linear infinite;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ticket-menu-marquee {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Hero rift cinematic (10s intro) ─── */
|
|
.font-hero-serif,
|
|
.rift-hero-heading {
|
|
font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
|
|
}
|
|
|
|
/* ─── mainwhite.svg: hero (green tint) · footer (white on green) ─── */
|
|
.topo-tone-light .topo-pattern-asset {
|
|
mix-blend-mode: multiply;
|
|
filter: sepia(0.35) saturate(2.6) hue-rotate(92deg) brightness(0.92) contrast(1.2);
|
|
}
|
|
|
|
/* Hero — gentle fill in/out on contour lines (no pan, shake, or slide) */
|
|
.rift-hero-topo .topo-hero-pattern-img {
|
|
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.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.2;
|
|
mix-blend-mode: multiply;
|
|
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: radial-gradient(
|
|
ellipse 80% 60% at 50% 55%,
|
|
rgba(45, 122, 82, 0.14) 0%,
|
|
rgba(26, 92, 56, 0.06) 45%,
|
|
transparent 72%
|
|
);
|
|
mix-blend-mode: soft-light;
|
|
opacity: 0.5;
|
|
animation: topo-hero-shimmer-breathe 11s ease-in-out infinite;
|
|
}
|
|
|
|
.topo-hero-channel-glow {
|
|
background: radial-gradient(
|
|
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.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.16) 0%,
|
|
rgba(45, 122, 82, 0.06) 28%,
|
|
transparent 48%
|
|
);
|
|
mix-blend-mode: soft-light;
|
|
opacity: 0;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.rift-hero-topo--hover .topo-hero-water-flow-img {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rift-hero-topo--hover .topo-hero-water-shimmer {
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.rift-hero-topo--hover .topo-hero-channel-glow {
|
|
opacity: 0.68;
|
|
}
|
|
|
|
.rift-hero-topo--hover .topo-hero-water-spotlight {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.rift-hero-topo--hover .topo-hero-pattern-img {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes topo-hero-fill-breathe {
|
|
0%,
|
|
100% {
|
|
opacity: 0.36;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes topo-hero-fill-pulse {
|
|
0%,
|
|
100% {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Footer — white pattern at bottom only */
|
|
.topo-footer-pattern .topo-footer-pattern-asset {
|
|
opacity: 0.34;
|
|
filter: brightness(0) invert(1);
|
|
mix-blend-mode: soft-light;
|
|
}
|
|
|
|
.topo-content-layer {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Landing hero — topography only, no contour-line overlay */
|
|
[data-section-hero] .wavy-contour-lines {
|
|
display: none;
|
|
}
|
|
|
|
/* Readable brand-green copy on all white sections */
|
|
.section-white {
|
|
color: #0d3d26;
|
|
}
|
|
|
|
.section-white .topo-content-layer,
|
|
.section-white .topo-card-surface,
|
|
.section-white [data-slot="card"] {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.section-white .topo-content-layer,
|
|
.section-white .topo-content-readable,
|
|
.section-white .topo-content-layer :is(h1, h2, h3, h4, h5, h6, p, li, label, summary),
|
|
.section-white .topo-content-readable :is(h1, h2, h3, h4, h5, h6, p, li, label, summary),
|
|
.section-white .topo-content-layer a:not([data-slot="button"]),
|
|
.section-white .topo-content-readable a:not([data-slot="button"]) {
|
|
color: #0d3d26;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.section-white .topo-content-layer .text-foreground,
|
|
.section-white .topo-content-readable .text-foreground {
|
|
color: #1a5c38;
|
|
}
|
|
|
|
.section-white .topo-content-layer .text-muted-foreground,
|
|
.section-white .topo-content-readable .text-muted-foreground {
|
|
color: #3d5248;
|
|
}
|
|
|
|
.section-white .topo-prose-surface-light :is(h1, h2, h3, h4, p, li, span) {
|
|
color: #0d3d26;
|
|
}
|
|
|
|
.section-white .topo-prose-surface-light .text-muted-foreground {
|
|
color: #3d5248;
|
|
}
|
|
|
|
.section-white .topo-card-surface,
|
|
.section-white .topo-card-surface :is(h1, h2, h3, h4, p, span, li, label, a),
|
|
.section-white .bg-white.topo-card-surface :is(h1, h2, h3, h4, p, span),
|
|
.section-white [data-slot="card"],
|
|
.section-white [data-slot="card"] :is(h1, h2, h3, h4, p, span, li, label) {
|
|
color: #1a5c38;
|
|
}
|
|
|
|
.section-white .topo-card-surface .text-muted-foreground,
|
|
.section-white [data-slot="card"] .text-muted-foreground,
|
|
.section-white .bg-white .text-muted-foreground {
|
|
color: #3d5248;
|
|
}
|
|
|
|
.section-white [data-slot="accordion-trigger"] {
|
|
color: #0d3d26;
|
|
}
|
|
|
|
.section-white [data-slot="button"][data-variant="outline"],
|
|
.section-white [data-slot="button"][data-variant="ghost"],
|
|
.section-white [data-slot="button"][data-variant="link"] {
|
|
color: #1a5c38;
|
|
}
|
|
|
|
.section-white [data-slot="button"][data-variant="outline"] {
|
|
border-color: rgba(26, 92, 56, 0.35);
|
|
}
|
|
|
|
.section-white [data-slot="button"][data-variant="ghost"]:hover,
|
|
.section-white [data-slot="button"][data-variant="link"]:hover {
|
|
color: #0d3d26;
|
|
background-color: rgba(26, 92, 56, 0.06);
|
|
}
|
|
|
|
header.section-white {
|
|
color: #0d3d26;
|
|
}
|
|
|
|
header.section-white .text-muted-foreground {
|
|
color: #3d5248;
|
|
}
|
|
|
|
.section-white:has(.topo-curvy-extend) {
|
|
overflow: visible;
|
|
}
|
|
|
|
.topo-curvy-extend {
|
|
overflow: visible;
|
|
}
|
|
|
|
.topo-prose-surface-light {
|
|
background: #ffffff;
|
|
border: 1px solid rgba(26, 92, 56, 0.12);
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.topo-prose-surface-green {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.topo-prose-surface {
|
|
border-radius: 1rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.topo-prose-surface {
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
}
|
|
|
|
.topo-card-layer,
|
|
[data-slot="card"] {
|
|
position: relative;
|
|
z-index: 20;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Copy sitting directly on green */
|
|
.section-green .topo-on-green-bg,
|
|
.section-green .topo-on-green-bg :is(h1, h2, h3, h4, p, li, label) {
|
|
color: #ffffff;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg .text-muted-foreground {
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
/* Muted copy on green (outside white cards) → white, not grey */
|
|
.section-green
|
|
.topo-content-layer
|
|
:not([data-slot="card"]):not([data-slot="card"] *)
|
|
.text-muted-foreground {
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
/* White cards / surfaces inside green sections → brand green text */
|
|
.section-green .topo-card-surface,
|
|
.section-green .topo-card-surface :is(h1, h2, h3, h4, p, span, li, label, a),
|
|
.section-green .bg-white,
|
|
.section-green .bg-white :is(h1, h2, h3, h4, p, span, li, label),
|
|
.section-green [data-slot="card"],
|
|
.section-green [data-slot="card"] :is(h1, h2, h3, h4, p, span, li, label, a) {
|
|
color: #1a5c38;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.section-green .topo-card-surface .text-muted-foreground,
|
|
.section-green .bg-white .text-muted-foreground,
|
|
.section-green [data-slot="card"] .text-muted-foreground,
|
|
.section-green [data-slot="card"] [data-slot="card-description"],
|
|
.section-green .topo-card-surface [data-slot="card-description"] {
|
|
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;
|
|
}
|
|
.topo-card-link:hover,
|
|
.topo-card-link:hover svg {
|
|
color: #0d3d26;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="outline"] {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
background-color: transparent;
|
|
color: #ffffff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="outline"]:hover {
|
|
background-color: rgba(255, 255, 255, 0.14);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Ghost/link buttons on the green band (outside white cards) */
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="ghost"],
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="link"],
|
|
.section-green > .topo-content-layer > div:not(:has([data-slot="card"])) [data-slot="button"][data-variant="outline"] {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="ghost"]:hover {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Ghost/link/outline actions inside white cards on green sections */
|
|
.section-green .topo-card-surface .topo-card-link,
|
|
.section-green [data-slot="card"] .topo-card-link,
|
|
.section-green .topo-card-surface .text-foreground,
|
|
.section-green [data-slot="card"] .text-foreground,
|
|
.section-green [data-slot="card"] [data-slot="button"],
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="ghost"],
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="link"],
|
|
.section-green .topo-card-surface [data-slot="button"],
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="ghost"],
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="link"],
|
|
.section-green .bg-white [data-slot="button"][data-variant="ghost"],
|
|
.section-green .bg-white [data-slot="button"][data-variant="link"] {
|
|
color: #1a5c38;
|
|
}
|
|
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="ghost"]:hover,
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="link"]:hover,
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="ghost"]:hover,
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="link"]:hover {
|
|
color: #0d3d26;
|
|
background-color: rgba(26, 92, 56, 0.06);
|
|
}
|
|
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="outline"],
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="outline"],
|
|
.section-green .bg-white [data-slot="button"][data-variant="outline"] {
|
|
border-color: rgba(26, 92, 56, 0.4);
|
|
color: #1a5c38;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.section-green [data-slot="card"] [data-slot="button"][data-variant="outline"]:hover,
|
|
.section-green .topo-card-surface [data-slot="button"][data-variant="outline"]:hover {
|
|
border-color: rgba(26, 92, 56, 0.55);
|
|
color: #0d3d26;
|
|
background-color: rgba(26, 92, 56, 0.06);
|
|
}
|
|
|
|
.section-green [data-slot="card"] [data-slot="button"] svg,
|
|
.section-green .topo-card-surface [data-slot="button"] svg {
|
|
color: currentColor;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]) {
|
|
background-color: #ffb300;
|
|
color: #0f0404;
|
|
}
|
|
|
|
.section-green .topo-on-green-bg [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]):hover {
|
|
background-color: #e6a200;
|
|
color: #0f0404;
|
|
}
|
|
|
|
.topo-pattern-clearance-section {
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
|
|
transparent 0%,
|
|
transparent 34%,
|
|
rgba(0, 0, 0, 0.18) 50%,
|
|
rgba(0, 0, 0, 0.62) 72%,
|
|
#000 100%
|
|
);
|
|
mask-image: radial-gradient(
|
|
ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
|
|
transparent 0%,
|
|
transparent 34%,
|
|
rgba(0, 0, 0, 0.18) 50%,
|
|
rgba(0, 0, 0, 0.62) 72%,
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
.topo-pattern-clearance-header {
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
|
|
transparent 0%,
|
|
transparent 38%,
|
|
rgba(0, 0, 0, 0.22) 56%,
|
|
rgba(0, 0, 0, 0.68) 78%,
|
|
#000 100%
|
|
);
|
|
mask-image: radial-gradient(
|
|
ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
|
|
transparent 0%,
|
|
transparent 38%,
|
|
rgba(0, 0, 0, 0.22) 56%,
|
|
rgba(0, 0, 0, 0.68) 78%,
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
|
|
.rift-crack-line {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 179, 0, 0.15) 20%,
|
|
rgba(255, 200, 100, 0.95) 50%,
|
|
rgba(255, 179, 0, 0.15) 80%,
|
|
transparent
|
|
);
|
|
box-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
|
|
transform-origin: center;
|
|
opacity: 0;
|
|
}
|
|
|
|
.rift-floor-glow {
|
|
background: radial-gradient(
|
|
ellipse 40% 18% at 50% 100%,
|
|
rgba(255, 179, 0, 0.12) 0%,
|
|
rgba(255, 179, 0, 0.04) 40%,
|
|
transparent 70%
|
|
);
|
|
opacity: 0;
|
|
}
|
|
|
|
.rift-plate-left,
|
|
.rift-plate-right {
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.rift-ridge-draw,
|
|
.rift-edge-draw {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
}
|
|
|
|
.rift-contour-path {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
}
|
|
|
|
@keyframes rift-hero-crack {
|
|
0%,
|
|
8% {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
18% {
|
|
opacity: 0.6;
|
|
transform: scaleX(0.08);
|
|
}
|
|
32% {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0.35;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-floor {
|
|
0%,
|
|
25% {
|
|
opacity: 0;
|
|
transform: scale(0.6);
|
|
}
|
|
45% {
|
|
opacity: 0.7;
|
|
}
|
|
70%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-split-left {
|
|
0%,
|
|
30% {
|
|
transform: translateX(0);
|
|
}
|
|
65%,
|
|
100% {
|
|
transform: translateX(-6%);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-split-right {
|
|
0%,
|
|
30% {
|
|
transform: translateX(0);
|
|
}
|
|
65%,
|
|
100% {
|
|
transform: translateX(6%);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-draw {
|
|
0%,
|
|
20% {
|
|
stroke-dashoffset: 1;
|
|
opacity: 0;
|
|
}
|
|
55% {
|
|
stroke-dashoffset: 0.15;
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-title-in {
|
|
0%,
|
|
58% {
|
|
opacity: 0;
|
|
transform: translateY(16px) scale(0.98);
|
|
}
|
|
78%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-contour-drift {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateX(6px) translateY(-3px);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-contour-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.12;
|
|
}
|
|
50% {
|
|
opacity: 0.28;
|
|
}
|
|
}
|
|
|
|
@keyframes rift-river-shimmer {
|
|
0%,
|
|
100% {
|
|
opacity: 0.35;
|
|
stroke-width: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.75;
|
|
stroke-width: 1.6;
|
|
}
|
|
}
|
|
|
|
.rift-hero-intro .rift-floor-glow {
|
|
animation: rift-hero-floor 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-plate-left {
|
|
animation: rift-hero-split-left 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-plate-right {
|
|
animation: rift-hero-split-right 10s cubic-bezier(0.22, 0.2, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-ridge-draw,
|
|
.rift-hero-intro .rift-edge-draw {
|
|
animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-contour-path,
|
|
.rift-hero-intro .rift-channel-inner {
|
|
animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-hero-title {
|
|
animation: rift-hero-title-in 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-settled .rift-contour-morph {
|
|
animation: rift-contour-drift 14s ease-in-out infinite;
|
|
}
|
|
.rift-hero-settled .rift-contour-path,
|
|
.rift-hero-settled .rift-channel-outer,
|
|
.rift-hero-settled .rift-channel-inner {
|
|
animation: rift-contour-pulse 5s ease-in-out infinite;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.rift-hero-settled .rift-channel-inner {
|
|
animation: rift-river-shimmer 4s ease-in-out infinite;
|
|
}
|
|
.rift-hero-settled .rift-floor-glow {
|
|
opacity: 0.5;
|
|
}
|
|
.rift-hero-settled .rift-hero-title {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Static final frame — reduced motion */
|
|
.rift-hero-static .rift-floor-glow {
|
|
opacity: 0.45;
|
|
}
|
|
.rift-hero-static .rift-contour-path,
|
|
.rift-hero-static .rift-channel-outer,
|
|
.rift-hero-static .rift-channel-inner {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
.rift-hero-static .rift-hero-title {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Site-wide pulsing curved lines */
|
|
@keyframes rift-pulse-opacity {
|
|
0%,
|
|
100% {
|
|
opacity: 0.14;
|
|
}
|
|
50% {
|
|
opacity: calc(0.22 + var(--rift-scroll, 0) * 0.35);
|
|
}
|
|
}
|
|
|
|
.rift-pulse-animate {
|
|
animation: rift-pulse-opacity 4.5s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wavy-contour-layer--primary,
|
|
.wavy-contour-layer--secondary,
|
|
.wavy-contour-layer,
|
|
.geometric-mess-layer {
|
|
animation: none !important;
|
|
}
|
|
|
|
.rift-hero-intro .rift-floor-glow,
|
|
.rift-hero-intro .rift-channel-open,
|
|
.rift-hero-intro .rift-contour-path,
|
|
.rift-hero-intro .rift-channel-outer,
|
|
.rift-hero-intro .rift-channel-inner,
|
|
.rift-hero-intro .rift-hero-title,
|
|
.rift-hero-settled .rift-contour-morph,
|
|
.rift-hero-settled .rift-contour-path,
|
|
.rift-hero-settled .rift-channel-inner,
|
|
.rift-ambient-pulse .rift-contour-path,
|
|
.rift-pulse-animate,
|
|
.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-channel-glow,
|
|
.rift-hero-topo .topo-hero-water-spotlight {
|
|
animation: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
}
|