/* ========================================================= Riverdeck Villa — Serene Luxe (final) Palette: deep teal + forest green + antique gold + cream Type: Playfair Display (display) + Manrope (text) ========================================================= */ :root { --teal: #0F4C5C; --teal-deep: #0a3a47; --green: #15803D; --green-deep: #0f5f2c; --gold: #C9A227; --gold-soft: #e2c573; --sage: #A3B18A; --cream: #FBF7EE; --cream-2: #F4EEDD; --ink: #14252B; --ink-soft: #46585F; --muted: #7A8A8F; --line: rgba(20, 37, 43, 0.12); --line-gold: rgba(201, 162, 39, 0.35); --shadow-sm: 0 4px 14px rgba(15, 76, 92, 0.06); --shadow-md: 0 16px 40px rgba(15, 76, 92, 0.12); --shadow-lg: 0 30px 80px rgba(15, 76, 92, 0.18); --font-display: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --max: 1240px; --pad-x: clamp(20px, 4vw, 56px); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ---------- Lenis smooth-scroll (required setup) ---------- When Lenis is running it adds .lenis / .lenis-smooth to . These rules stop native smooth-scroll from fighting Lenis and keep the document height correct — without them scrolling feels "stuck". */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; font-family: var(--font-body); font-size: 17.5px; line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); } .section { padding: clamp(72px, 10vw, 140px) 0; position: relative; } .section + .section { border-top: 1px solid var(--line); } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: 16px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); } .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -0.012em; margin: 14px 0 0; color: var(--teal); } .h2 em { font-style: italic; color: var(--green); } .lede { font-size: clamp(18.5px, 1.8vw, 21.5px); color: var(--ink-soft); margin-top: 18px; max-width: 56ch; } .section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); } .section__lede { color: var(--ink-soft); margin-top: 14px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15.5px; letter-spacing: .01em; transition: transform .4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow .4s cubic-bezier(0.25, 1, 0.5, 1), background .4s cubic-bezier(0.25, 1, 0.5, 1), color .4s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .btn svg { width: 18px; height: 18px; } .btn--lg { padding: 16px 28px; font-size: 16.5px; } .btn--whatsapp { background: var(--green); color: #fff; box-shadow: 0 10px 24px -10px rgba(21,128,61,.6); position: relative; overflow: hidden; } .btn--whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); transition: left 0.6s ease; pointer-events: none; } .btn--whatsapp:hover::before { left: 100%; } .btn--whatsapp:hover { background: var(--green-deep); transform: translateY(-2.5px); box-shadow: 0 16px 32px -10px rgba(21,128,61,.55); } .btn--ghost { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); } .btn--ghost:hover { background: var(--teal); color: #fff; transform: translateY(-2px); } /* ---------- Brand ---------- */ .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--teal); } .brand__mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; object-fit: cover; image-rendering: -webkit-optimize-contrast; display: block; } .brand__word { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: .005em; line-height: 1; } .brand__sub { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 600; border-left: 1px solid var(--line-gold); padding-left: 10px; } .brand--lg .brand__word { font-size: 34px; } .brand--lg .brand__mark { width: 56px; height: 56px; } .nav { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: var(--max); z-index: 50; padding: 12px 28px; background: rgba(10, 58, 71, 0.72); /* Glassmorphic dark teal */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(10, 30, 35, 0.12); transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), padding 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .nav.is-scrolled { top: 12px; padding: 8px 24px; background: rgba(10, 58, 71, 0.88); border-color: rgba(201, 162, 39, 0.25); /* Subtle gold tint on scroll */ box-shadow: 0 12px 40px rgba(10, 30, 35, 0.25); } .nav__inner { width: 100%; display: flex; align-items: center; gap: 24px; } .nav .brand { color: #fff; /* Contrast with dark background */ } .nav .brand__word { color: #fff; } .nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); } .nav__links a { position: relative; padding: 6px 0; transition: color .3s cubic-bezier(0.25, 1, 0.5, 1); } .nav__links a:hover { color: var(--gold-soft); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(0.25, 1, 0.5, 1); } .nav__links a:hover::after { transform: scaleX(1); } .nav__cta { padding: 10px 18px; font-size: 14.5px; } .nav__cta svg { width: 16px; height: 16px; } .nav__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; } .nav__burger span { width: 22px; height: 1.6px; background: #fff; transition: transform .3s ease, opacity .3s ease; } .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; } .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 920px) { .nav { top: 16px; width: calc(100% - 32px); padding: 8px 18px; border-radius: 24px; } .nav.is-scrolled { top: 8px; padding: 6px 16px; } .nav__links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: center; gap: 0; background: rgba(10, 58, 71, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 0 24px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1), opacity .3s cubic-bezier(0.25, 1, 0.5, 1); } .nav__links a { padding: 14px 0; width: 100%; text-align: center; color: rgba(255, 255, 255, 0.85); } .nav__links a:hover { color: var(--gold-soft); } .nav.is-open .nav__links { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav__cta { display: none; } .nav__burger { display: flex; } } /* ---------- Intro overlay — Cinema Iris Spotlight (~2.4s) ---------- */ .intro { position: fixed; inset: 0; z-index: 200; background: transparent; color: var(--cream); overflow: hidden; visibility: visible; } .intro.is-hidden { visibility: hidden; } /* The iris layer holds everything visible and is clip-pathed open at the end */ .intro__iris { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; clip-path: circle(220vmax at 50% 50%); transition: clip-path .7s cubic-bezier(.65,0,.35,1); will-change: clip-path; } .intro.is-opening .intro__iris { clip-path: circle(0px at 50% 50%); } /* Soft warm vignette inside the spotlight */ .intro__iris::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(201,162,39,0.18) 0%, transparent 35%); pointer-events: none; } .intro__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; text-align: center; } .intro__mark { width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px); color: var(--cream); filter: drop-shadow(0 0 24px rgba(201,162,39,0.25)); } .intro__mark circle, .intro__mark path, .intro__mark line { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); animation: strokeDraw .8s cubic-bezier(.7,0,.3,1) forwards; } .intro.is-playing .intro__circle { --len: 190; animation-delay: 0ms; } .intro.is-playing .intro__river--1 { --len: 70; animation-delay: 240ms; } .intro.is-playing .intro__river--2 { --len: 70; animation-delay: 380ms; } .intro.is-playing .intro__rule { --len: 28; animation-delay: 560ms; } @keyframes strokeDraw { to { stroke-dashoffset: 0; } } /* Typewriter wordmark */ .intro__word { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 5.4vw, 56px); letter-spacing: 0.08em; margin: 4px 0 0; color: var(--cream); display: inline-flex; align-items: baseline; text-shadow: 0 4px 30px rgba(0,0,0,0.6); } .intro__word .t { opacity: 0; display: inline-block; transform: translateY(2px); transition: opacity .14s ease-out, transform .14s ease-out; } .intro.is-playing .intro__word .t { opacity: 1; transform: translateY(0); } .intro.is-playing .intro__word .t:nth-child(1) { transition-delay: 700ms; } .intro.is-playing .intro__word .t:nth-child(2) { transition-delay: 760ms; } .intro.is-playing .intro__word .t:nth-child(3) { transition-delay: 820ms; } .intro.is-playing .intro__word .t:nth-child(4) { transition-delay: 880ms; } .intro.is-playing .intro__word .t:nth-child(5) { transition-delay: 940ms; } .intro.is-playing .intro__word .t:nth-child(6) { transition-delay: 1000ms; } .intro.is-playing .intro__word .t:nth-child(7) { transition-delay: 1060ms; } .intro.is-playing .intro__word .t:nth-child(8) { transition-delay: 1120ms; } .intro.is-playing .intro__word .t:nth-child(9) { transition-delay: 1180ms; } /* Blinking gold caret next to the wordmark */ .intro__caret { display: inline-block; width: 2px; height: 0.9em; background: var(--gold); margin-left: 6px; opacity: 0; transform: translateY(2px); box-shadow: 0 0 12px rgba(201,162,39,0.6); } .intro.is-playing .intro__caret { opacity: 1; animation: caretBlink 0.7s steps(2) 700ms infinite; } @keyframes caretBlink { 50% { opacity: 0; } } .intro__tag { font-family: var(--font-display); font-size: clamp(13px, 1.4vw, 16px); color: var(--gold-soft); margin: 0; opacity: 0; transform: translateY(6px); letter-spacing: 0.02em; } .intro__tag em { font-style: italic; font-weight: 400; } .intro.is-playing .intro__tag { animation: introFade .6s ease-out 1450ms forwards; } @keyframes introFade { to { opacity: 1; transform: translateY(0); } } .intro__tag::after { content: ""; display: block; width: 0; height: 1px; margin: 14px auto 0; background: var(--gold); opacity: 0; } .intro.is-playing .intro__tag::after { animation: introRule .5s ease-out 1750ms forwards; } @keyframes introRule { to { width: 56px; opacity: 0.75; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; isolation: isolate; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* ambient horizontal drift on background video for living parallax */ .hero.is-revealed .hero__video { animation: heroParallax 16s ease-in-out infinite alternate; } @keyframes heroParallax { 0% { transform: scale(1.04) translateX(-1%); } 100% { transform: scale(1.04) translateX(1%); } } /* Split curtain panels (cover the hero, slide out on reveal) */ .hero__curtain { position: absolute; top: 0; bottom: 0; width: 52%; background: var(--cream); z-index: 3; pointer-events: none; will-change: transform; transition: transform 1.1s cubic-bezier(.7,0,.3,1); } .hero__curtain--left { left: 0; } .hero__curtain--right { right: 0; } .hero.is-revealed .hero__curtain--left { transform: translateX(-101%); } .hero.is-revealed .hero__curtain--right { transform: translateX(101%); } /* ---- Staged hero content (initial state hidden) ---- */ .hero__content > * { will-change: transform, opacity; } .hero__pill { opacity: 0; transform: translateX(-32px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.22,1,.36,1); transition-delay: 600ms; } .hero.is-revealed .hero__pill { opacity: 1; transform: translateX(0); } .hero__title .w { display: inline-block; opacity: 0; transform: translateX(-60px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,1,.36,1); /* Per-word stagger */ } .hero__title .w:nth-child(1) { transition-delay: 720ms; } .hero__title .w:nth-child(2) { transition-delay: 820ms; } .hero__title .w:nth-child(3) { transition-delay: 920ms; } .hero__title .w:nth-child(4) { transition-delay: 1020ms; } .hero__title .w:nth-child(5) { transition-delay: 1120ms; } .hero__title .w:nth-child(6) { transition-delay: 1220ms; } .hero.is-revealed .hero__title .w { opacity: 1; transform: translateX(0); } /* Gold underline drawn under italic "river" */ .hero__title em { position: relative; } .hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.22,1,.36,1); transition-delay: 1500ms; border-radius: 2px; box-shadow: 0 0 16px rgba(201,162,39,0.35); } .hero.is-revealed .hero__title em::after { transform: scaleX(1); } .hero__sub { opacity: 0; transform: translateX(40px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,1,.36,1); transition-delay: 1300ms; } .hero.is-revealed .hero__sub { opacity: 1; transform: translateX(0); } .hero__cta .btn { opacity: 0; transform: translateY(20px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.22,1,.36,1); } .hero__cta .btn:nth-child(1) { transition-delay: 1500ms; } .hero__cta .btn:nth-child(2) { transition-delay: 1700ms; } .hero.is-revealed .hero__cta .btn { opacity: 1; transform: translateY(0); } .hero__scroll { opacity: 0; transition: opacity .6s ease-out 2000ms; } .hero.is-revealed .hero__scroll { opacity: 1; } .hero__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 50% 20%, rgba(15,76,92,0.35), transparent 70%), linear-gradient(180deg, rgba(15,76,92,0.35) 0%, rgba(10,30,35,0.78) 100%); } .hero__content { text-align: center; padding: 140px var(--pad-x) 100px; max-width: 980px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.92); backdrop-filter: blur(8px); } .pill svg { color: var(--gold-soft); } .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(45px, 8.2vw, 108px); line-height: 1.02; letter-spacing: -0.018em; margin: 22px 0 18px; } .hero__title em { font-style: italic; font-weight: 400; color: var(--gold-soft); } .hero__sub { font-size: clamp(18px, 1.9vw, 21.5px); color: rgba(255,255,255,.85); max-width: 56ch; margin: 0 auto; } .hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } .hero .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } .hero .btn--ghost:hover { background: #fff; color: var(--teal); } .hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; display: flex; justify-content: center; } .hero__scroll span { width: 2px; height: 8px; background: #fff; margin-top: 6px; border-radius: 2px; animation: scroll 1.8s ease-in-out infinite; } @keyframes scroll { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ---------- Marquee ---------- */ .marquee { background: var(--teal); color: var(--cream); overflow: hidden; padding: 18px 0; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); } .marquee__track { display: inline-flex; gap: 28px; white-space: nowrap; font-family: var(--font-display); font-style: italic; font-size: 22px; animation: marquee 75s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span:nth-child(odd) { color: var(--cream); } .marquee__track span:nth-child(even) { color: var(--gold-soft); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- About ---------- */ .grid--split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; } @media (max-width: 880px) { .grid--split { grid-template-columns: 1fr; } } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); } .stat strong { display: block; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 38px); color: var(--teal); font-weight: 600; } .stat > span { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; } .stat strong [data-target] { font-family: var(--font-display); font-size: inherit; font-weight: inherit; color: inherit; } @media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } } .about__media { position: relative; } .about__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background: var(--cream-2); } .about__frame img { position: absolute; top: -7.5%; left: 0; width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--parallax-y, 0)) scale(1.02); will-change: transform; } .about__badge { position: absolute; left: -24px; bottom: -28px; background: var(--teal); color: var(--cream); width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 6px solid var(--cream); } .about__badge__num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--gold-soft); } .about__badge__lbl { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; text-align: center; margin-top: 4px; } @media (max-width: 880px) { .about__badge { left: auto; right: 16px; bottom: -22px; width: 120px; height: 120px; } .about__badge__num { font-size: 34px; } } /* ---------- Gallery ---------- */ .gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; } .gallery__item { margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius); background: var(--cream-2); position: relative; border: none; cursor: zoom-in; display: block; width: 100%; height: 100%; outline-offset: 4px; transition: transform .4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow .4s cubic-bezier(0.25, 1, 0.5, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .gallery__item img { position: absolute; top: -7.5%; left: 0; width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--parallax-y, 0)); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter .3s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; } .gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15,76,92,0.55) 100%); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .gallery__item:hover, .gallery__item:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); } .gallery__item:hover img, .gallery__item:focus-visible img { transform: translateY(var(--parallax-y, 0)) scale(1.06); filter: saturate(1.08); } .gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; } .gallery__item:focus-visible { outline: 2px solid var(--gold); } .gallery__zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 999px; background: rgba(15,76,92,0.85); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); transform: translateY(8px) scale(.92); opacity: 0; transition: transform .25s ease, opacity .25s ease, background .25s ease; pointer-events: none; } .gallery__zoom svg { width: 18px; height: 18px; } .gallery__item:hover .gallery__zoom, .gallery__item:focus-visible .gallery__zoom { transform: translateY(0) scale(1); opacity: 1; } .gallery__item--tall { grid-row: span 2; } .gallery__item--wide { grid-column: span 2; } @media (max-width: 820px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .gallery__item--wide { grid-column: span 2; } .gallery__item--tall { grid-row: span 2; } } /* Gallery reveal: lighter than the generic .reveal — no per-image blur (GPU-expensive), stagger delay applied via JS from --reveal-delay. */ .gallery__item.reveal { filter: none; transform: translateY(16px) scale(0.99); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } /* After entrance: restore the quick hover transition */ .gallery__item.reveal.is-in { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.65s ease; } /* ---------- Reels (4-card zig-zag diagonal) ---------- */ .reels { background: var(--cream-2); position: relative; overflow: hidden; } /* Faint gold diagonal scratch lines behind the cards for the "spark" feel */ .reels::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 0%, transparent 48%, rgba(201,162,39,0.10) 49%, rgba(201,162,39,0.10) 50%, transparent 51%, transparent 100%), linear-gradient(115deg, transparent 0%, transparent 28%, rgba(201,162,39,0.06) 29%, rgba(201,162,39,0.06) 30%, transparent 31%, transparent 100%); background-size: 100% 100%; pointer-events: none; z-index: 0; } .reels .container { position: relative; z-index: 1; } .reels__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); max-width: 1180px; margin: 36px auto 60px; padding: 40px 0; perspective: 1200px; } .reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; padding: 0; border: none; display: block; outline-offset: 4px; transition: transform .3s ease, box-shadow .3s ease; } .reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.1,1), filter .25s ease; } .reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,30,35,0.7) 100%); pointer-events: none; } .reel__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--teal); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform .25s ease, background .25s ease; z-index: 2; } .reel__play svg { width: 26px; height: 26px; margin-left: 3px; } .reel:focus-visible { outline: 2px solid var(--gold); } /* Zig-zag diagonal: alternate cards offset up/down and rotated +/- a few degrees */ .reels__row .reel { will-change: transform; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; } .reels__row .reel:nth-child(1) { transform: translateY(-28px) rotate(-3deg); } .reels__row .reel:nth-child(2) { transform: translateY(28px) rotate(2.5deg); } .reels__row .reel:nth-child(3) { transform: translateY(-28px) rotate(-2.5deg); } .reels__row .reel:nth-child(4) { transform: translateY(28px) rotate(3deg); } /* Hover: straighten + lift, like picking the card up off the desk */ .reels__row .reel:hover, .reels__row .reel:focus-visible { transform: translateY(-14px) rotate(0deg) scale(1.04); box-shadow: var(--shadow-lg); z-index: 5; } .reel:hover img, .reel:focus-visible img { transform: scale(1.05); filter: brightness(1.05); } .reel:hover .reel__play, .reel:focus-visible .reel__play { transform: scale(1.12); background: var(--gold); color: var(--teal-deep); } /* Caption tag visible at hover */ .reels__row .reel::before { content: ""; position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--teal-deep); font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(0,0,0,0.25); z-index: 3; opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .25s ease, transform .25s ease; } .reels__row .reel:nth-child(1)::before { content: "01"; } .reels__row .reel:nth-child(2)::before { content: "02"; } .reels__row .reel:nth-child(3)::before { content: "03"; } .reels__row .reel:nth-child(4)::before { content: "04"; } .reels__row .reel:hover::before, .reels__row .reel:focus-visible::before { opacity: 1; transform: translateY(0) scale(1); } /* Tablet — 2×2 grid, gentler zig-zag */ @media (max-width: 900px) { .reels__row { grid-template-columns: repeat(2, 1fr); max-width: 620px; gap: 24px; padding: 24px 0; } .reels__row .reel:nth-child(1) { transform: translateY(-14px) rotate(-2deg); } .reels__row .reel:nth-child(2) { transform: translateY(14px) rotate(2deg); } .reels__row .reel:nth-child(3) { transform: translateY(14px) rotate(2deg); } .reels__row .reel:nth-child(4) { transform: translateY(-14px) rotate(-2deg); } } /* Mobile — single column, no rotation (avoid horizontal overflow) */ @media (max-width: 540px) { .reels__row { grid-template-columns: 1fr; max-width: 320px; gap: 22px; padding: 0; } .reels__row .reel, .reels__row .reel:nth-child(n) { transform: none; } .reels__row .reel:hover, .reels__row .reel:focus-visible { transform: translateY(-6px) scale(1.02); } } /* ---------- Facilities ---------- */ .facilities__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .facility { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; cursor: default; position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease, background .35s ease; } /* Sheen sweep on hover */ .facility::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); opacity: 0; transition: opacity .35s ease; border-radius: inherit; z-index: 0; } .facility > * { position: relative; z-index: 1; } .facility svg { width: 40px; height: 40px; color: var(--teal); margin-bottom: 16px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), color .3s ease; } .facility h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 8px; color: #111; transition: color .3s ease; } .facility p { font-size: 14.5px; color: #333; font-weight: 500; margin: 0; line-height: 1.6; transition: color .3s ease; } /* Hover state */ .facility:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 50px rgba(15,76,92,0.22); border-color: var(--teal); } .facility:hover::before { opacity: 1; } .facility:hover svg { transform: scale(1.18) rotate(-8deg); color: var(--gold-soft); } .facility:hover h3 { color: #fff; font-weight: 800; } .facility:hover p { color: rgba(255,255,255,0.88); } @media (max-width: 920px) { .facilities__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .facilities__grid { grid-template-columns: 1fr; } } /* ---------- Food ---------- */ .food { background: var(--cream-2); } .menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .menu__card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; } .menu__card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--gold-soft); box-shadow: var(--shadow-md); } .menu__card--featured { background: var(--teal); color: var(--cream); border: none; box-shadow: var(--shadow-md); transform: translateY(-8px); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; } .menu__card--featured:hover { transform: translateY(-14px) scale(1.02); box-shadow: var(--shadow-lg); } .menu__card--featured .menu__head h3, .menu__card--featured .menu__no { color: var(--gold-soft); } .menu__card--featured .menu__time { color: rgba(255,255,255,.7); } .menu__card--featured .menu__list li { border-bottom-color: rgba(255,255,255,.12); } .menu__head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .menu__card--featured .menu__head { border-bottom-color: rgba(255,255,255,.18); } .menu__no { font-family: var(--font-display); font-size: 14px; color: var(--gold); letter-spacing: .12em; } .menu__head h3 { font-family: var(--font-display); font-size: 30px; margin: 0; font-weight: 500; color: var(--teal); } .menu__time { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .menu__list li { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 16px; font-weight: 600; color: var(--ink); } .menu__card--featured .menu__list li { color: var(--cream); } .menu__list li:last-child { border-bottom: none; } .menu__list em { font-style: italic; color: var(--gold); } .tag { display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(21,128,61,.12); color: var(--green); } /* Explicit veg badge — always green */ .tag--veg { background: rgba(21,128,61,.13); color: var(--green); } /* Non-veg badge — warm golden/amber */ .tag--nonveg { background: rgba(201,100,27,.13); color: #c9641b; } /* On the featured (teal) card, keep veg green readable and non-veg bright */ .menu__card--featured .tag--veg { background: rgba(100,220,130,.18); color: #72edaa; } .menu__card--featured .tag--nonveg { background: rgba(255,160,60,.18); color: #ffbf70; } .menu__card--featured .tag { background: rgba(201,162,39,.18); color: var(--gold-soft); } /* ---- Menu: 4-card layout (2x2 grid) ---- */ .menu--four { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 880px) { .menu--four { grid-template-columns: 1fr; } } /* BBQ availability badge — teal */ .tag--bbq { background: rgba(15,76,92,.12); color: var(--teal); font-weight: 700; } /* ---- Sweets sub-heading inside menu list ---- */ .menu__list__subhead { padding: 10px 0 4px; font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border-bottom: none !important; font-weight: 600; } /* ---- Payment rule highlight ---- */ .rules__list__payment { border-left: 3px solid var(--gold); padding-left: 14px; margin-top: 4px; color: var(--teal); } .food__note { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 13.5px; color: var(--ink-soft); font-style: italic; } .food__note svg { color: var(--gold); flex-shrink: 0; } @media (max-width: 880px) { .menu { grid-template-columns: 1fr; } .menu__card--featured { transform: none; } } /* ---------- Pricing ---------- */ .pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .price { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; } .price--featured { background: linear-gradient(170deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); border: none; box-shadow: var(--shadow-lg); transform: translateY(-12px); } .price__badge { position: absolute; top: 16px; right: 16px; background: var(--gold); color: var(--teal-deep); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 5px 12px; border-radius: 999px; } .price header { display: flex; flex-direction: column; gap: 4px; } .price__tag { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .price--featured .price__tag { color: var(--gold-soft); } .price h3 { font-family: var(--font-display); font-size: 32px; margin: 0; font-weight: 500; color: var(--teal); } .price--featured h3 { color: #fff; } .price__amount { font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1; color: var(--teal); } .price--featured .price__amount { color: #fff; } .price__amount .cur { font-size: 32px; vertical-align: top; margin-right: 4px; color: var(--gold); } .price__amount .per { font-family: var(--font-body); font-size: 15px; color: var(--muted); margin-left: 6px; font-weight: 400; letter-spacing: .04em; } .price--featured .price__amount .per { color: rgba(255,255,255,.65); } .price__list { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--ink-soft); } .price--featured .price__list { color: rgba(255,255,255,.85); } .price__list li { padding-left: 22px; position: relative; } .price__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 8px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-50deg); } .price--featured .price__list li::before { border-color: var(--gold-soft); } .price .btn { margin-top: auto; align-self: flex-start; } .price--featured .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } .price--featured .btn--whatsapp { background: var(--gold); color: var(--teal-deep); box-shadow: 0 10px 24px -10px rgba(201,162,39,.5); } .price--featured .btn--whatsapp:hover { background: var(--gold-soft); } @media (max-width: 880px) { .pricing__grid { grid-template-columns: 1fr; } .price--featured { transform: none; } } /* ---------- Timings ---------- */ .timings { background: var(--cream-2); } .sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 36px; } .session { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; } .session header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .session__sun { font-size: 22px; color: var(--gold); } .session h3 { font-family: var(--font-display); font-size: 24px; margin: 0; font-weight: 500; color: var(--teal); } .session__row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 15px; } .session__row strong { color: var(--teal); font-family: var(--font-display); font-size: 18px; font-weight: 500; } .session__row small { color: var(--muted); font-size: 12px; font-weight: 400; } .session__note { font-size: 13.5px; color: var(--ink-soft); font-style: italic; margin: 14px 0 0; } .hours { background: var(--teal); color: var(--cream); border-radius: var(--radius-lg); padding: 32px 36px; } .hours h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 18px; color: var(--gold-soft); font-weight: 500; letter-spacing: .04em; } .hours__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .hours__grid > div span { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; } .hours__grid > div strong { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--cream); } @media (max-width: 760px) { .sessions { grid-template-columns: 1fr; } .hours__grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Reviews ---------- */ .reviews { background: var(--cream-2); position: relative; overflow: hidden; } /* Subtle decorative background wave */ .reviews::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 40% at 10% 80%, rgba(15,76,92,0.05), transparent), radial-gradient(ellipse 50% 35% at 90% 20%, rgba(201,162,39,0.06), transparent); pointer-events: none; } .reviews .container { position: relative; z-index: 1; } /* Ticker strip — subtle social proof scroller */ .reviews__ticker-wrap { overflow: hidden; margin: 0 calc(-1 * var(--pad-x)) 48px; background: var(--teal); padding: 14px 0; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); } .reviews__ticker { display: inline-flex; gap: 24px; white-space: nowrap; font-family: var(--font-display); font-style: italic; font-size: 17px; animation: marquee 50s linear infinite; color: var(--cream); } .reviews__ticker span:nth-child(even) { color: var(--gold-soft); } /* 3-column masonry-style grid */ .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } /* Stagger first-row cards vertically for visual depth */ .reviews__grid .review__card:nth-child(odd) { transform: translateY(0); } .reviews__grid .review__card:nth-child(even) { transform: translateY(20px); } .review__card { position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px 24px; display: flex; flex-direction: column; gap: 16px; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; overflow: hidden; } .review__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); opacity: 0; transition: opacity .35s ease; border-radius: inherit; z-index: 0; } .review__card > * { position: relative; z-index: 1; } /* Featured card (first) — teal dark, slightly taller */ .review__card--featured { background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); border: none; box-shadow: var(--shadow-md); transform: translateY(-12px) !important; } .review__card--featured::before { display: none; } /* Hover */ .review__card:not(.review__card--featured):hover { transform: translateY(-10px) !important; box-shadow: 0 20px 50px rgba(15,76,92,0.18); border-color: var(--teal); } .review__card:not(.review__card--featured):hover::before { opacity: 1; } .review__card:not(.review__card--featured):hover .review__quote-mark, .review__card:not(.review__card--featured):hover blockquote p, .review__card:not(.review__card--featured):hover .review__name { color: #fff; } .review__card:not(.review__card--featured):hover .review__meta { color: rgba(255,255,255,.7); } .review__card:not(.review__card--featured):hover .review__stars svg { color: var(--gold-soft); } .review__card:not(.review__card--featured):hover .review__avatar { border-color: rgba(255,255,255,.3); } /* Big decorative quote mark */ .review__quote-mark { font-family: var(--font-display); font-size: 80px; line-height: 0.5; color: var(--gold-soft); opacity: 0.4; font-weight: 700; user-select: none; transition: color .3s ease, opacity .3s ease; } .review__card--featured .review__quote-mark { color: var(--gold-soft); opacity: 0.5; } blockquote { margin: 0; padding: 0; } blockquote p { font-family: var(--font-display); font-size: clamp(16px, 1.4vw, 18.5px); font-style: italic; line-height: 1.6; color: var(--ink); font-weight: 400; transition: color .3s ease; } .review__card--featured blockquote p { color: rgba(255,255,255,.92); } /* Footer row: avatar + name + stars */ .review__footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; } .review__card--featured .review__footer { border-top-color: rgba(255,255,255,.15); } .review__avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; border: 2px solid rgba(255,255,255,.2); transition: border-color .3s ease; } .review__avatar--1 { background: linear-gradient(135deg, #0F4C5C, #15803D); } .review__avatar--2 { background: linear-gradient(135deg, #1a6b7a, #0F4C5C); } .review__avatar--3 { background: linear-gradient(135deg, #C9A227, #e2a820); } .review__avatar--4 { background: linear-gradient(135deg, #0f5f2c, #15803D); } .review__avatar--5 { background: linear-gradient(135deg, #5C3D0F, #C9A227); } .review__avatar--6 { background: linear-gradient(135deg, #0F4C5C, #1a6b7a); } .review__name { display: block; font-size: 15px; font-weight: 700; color: var(--teal); transition: color .3s ease; } .review__card--featured .review__name { color: #fff; } .review__meta { display: block; font-size: 12px; color: var(--muted); letter-spacing: .02em; margin-top: 1px; transition: color .3s ease; } .review__card--featured .review__meta { color: rgba(255,255,255,.6); } .review__stars { display: flex; gap: 3px; margin-left: auto; } .review__stars svg { width: 14px; height: 14px; color: var(--gold); transition: color .3s ease; } .review__card--featured .review__stars svg { color: var(--gold-soft); } /* Aggregate row at the bottom */ .reviews__aggregate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 48px; padding: 28px 36px; background: var(--teal); border-radius: var(--radius-lg); color: var(--cream); } .reviews__agg-score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .reviews__agg-num { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 1; color: var(--gold-soft); } .reviews__agg-stars { display: flex; gap: 4px; } .reviews__agg-stars svg { width: 22px; height: 22px; color: var(--gold); } .reviews__agg-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 500; } @media (max-width: 980px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } .reviews__grid .review__card:nth-child(even) { transform: none; } .review__card--featured { transform: none !important; } } @media (max-width: 600px) { .reviews__grid { grid-template-columns: 1fr; } .reviews__grid .review__card:nth-child(n) { transform: none !important; } .reviews__aggregate { flex-direction: column; align-items: flex-start; } .reviews__aggregate .btn { align-self: stretch; justify-content: center; } } /* Dynamically-injected cards — override grid stagger, start at natural position */ .review__card--new { transform: none !important; } /* 'Add another review' button in success state */ .review-form__success .btn--ghost { margin-top: 8px; } /* ---------- Review submission form ---------- */ .review-form-wrap { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 52px); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Warm gold accent line at top */ .review-form-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal)); } .review-form__head { margin-bottom: 32px; } .review-form__head .eyebrow { margin-bottom: 10px; display: block; } .review-form__title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 500; color: var(--teal); margin: 0 0 8px; line-height: 1.2; } .review-form__sub { font-size: 14px; color: var(--muted); margin: 0; } /* Form layout */ .review-form { display: flex; flex-direction: column; gap: 22px; } .review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .review-form__row { grid-template-columns: 1fr; } } .review-form__field { display: flex; flex-direction: column; gap: 8px; position: relative; } .review-form__label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } /* Inputs & textarea */ .review-form__input { font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; outline: none; width: 100%; transition: border-color .25s ease, box-shadow .25s ease, background .2s ease; appearance: none; -webkit-appearance: none; } .review-form__input::placeholder { color: var(--muted); } .review-form__input:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(15,76,92,.10); } .review-form__input.is-error { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.10); } .review-form__textarea { resize: vertical; min-height: 110px; line-height: 1.6; } .review-form__count { font-size: 12px; color: var(--muted); text-align: right; margin-top: -4px; } /* Select wrapper */ .review-form__select-wrap { position: relative; } .review-form__select { padding-right: 40px; cursor: pointer; } .review-form__chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--teal); pointer-events: none; stroke-width: 2; } /* ---- Interactive star picker ---- */ .star-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .star-picker__star { width: 40px; height: 40px; padding: 0; background: none; border: none; cursor: pointer; color: var(--line); transition: color .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1); display: flex; align-items: center; justify-content: center; } .star-picker__star svg { width: 32px; height: 32px; fill: currentColor; display: block; } /* Hover: light up this star + all before it */ .star-picker:hover .star-picker__star { color: rgba(201,162,39,.3); } .star-picker__star:hover, .star-picker__star:hover ~ .star-picker__star { color: rgba(201,162,39,.3); } /* This feels inverted — we override with JS class approach */ .star-picker__star:hover { color: var(--gold) !important; transform: scale(1.2); } /* Selected stars (filled via JS class) */ .star-picker__star.is-filled { color: var(--gold); } .star-picker__star.is-filled:hover { transform: scale(1.2); } .star-picker__label { font-size: 13px; color: var(--muted); font-style: italic; margin-left: 6px; transition: color .2s ease; } /* Error */ .review-form__error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.25); border-radius: var(--radius-sm); color: #c0392b; font-size: 14px; padding: 10px 14px; margin: 0; } /* Submit button — full width on mobile */ .review-form__submit { align-self: flex-start; padding: 15px 28px; font-size: 16px; } @media (max-width: 480px) { .review-form__submit { align-self: stretch; justify-content: center; } } /* Success state */ .review-form__success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 20px 0; animation: successFade .45s ease-out; } @keyframes successFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .review-form__success-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(21,128,61,.1); display: flex; align-items: center; justify-content: center; color: var(--green); } .review-form__success-icon svg { width: 44px; height: 44px; } .review-form__success h4 { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--teal); margin: 0; } .review-form__success p { color: var(--ink-soft); font-size: 16px; max-width: 44ch; margin: 0; } /* ---------- Rules ---------- */ .rules__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; font-size: 15.5px; color: var(--ink-soft); } .rules__list li { position: relative; padding-left: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .rules__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold)); box-shadow: 0 0 0 4px rgba(201,162,39,.12); } .rules__list strong { color: var(--teal); font-weight: 600; } @media (max-width: 760px) { .rules__list { grid-template-columns: 1fr; } } /* ---------- Location ---------- */ .location__map { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); } /* ---------- Contact ---------- */ .contact { background: linear-gradient(165deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); position: relative; overflow: hidden; } .contact::before, .contact::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(80px); opacity: .25; pointer-events: none; } .contact::before { background: var(--green); left: -120px; top: -120px; } .contact::after { background: var(--gold); right: -120px; bottom: -160px; opacity: .15; } .contact .eyebrow { color: var(--gold-soft); } .contact .eyebrow::before { background: var(--gold-soft); } .contact .h2 { color: #fff; } .contact p { color: rgba(255,255,255,.78); max-width: 50ch; } .contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; position: relative; z-index: 1; } @media (max-width: 880px) { .contact__inner { grid-template-columns: 1fr; } } .contact__cards { display: flex; flex-direction: column; gap: 14px; } .contact__card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); transition: transform .25s ease, background .25s ease, border-color .25s ease; } .contact__card svg { width: 24px; height: 24px; color: var(--gold-soft); flex-shrink: 0; } .contact__lbl { display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); } .contact__val { display: block; font-family: var(--font-display); font-size: 24px; color: #fff; font-weight: 500; margin-top: 2px; } .contact__card:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: var(--gold-soft); } .contact__card--primary { background: var(--green); border-color: var(--green-deep); } .contact__card--primary svg { color: #fff; } .contact__card--primary:hover { background: var(--green-deep); } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: rgba(251,247,238,.72); padding-top: 72px; } .footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(40px, 6vw, 80px); padding-bottom: 56px; } .footer__brand .brand { color: var(--cream); } .footer__brand .brand__sub { color: var(--gold-soft); border-color: rgba(201,162,39,.4); } .footer__tag { margin-top: 18px; font-size: 14px; line-height: 1.7; color: rgba(251,247,238,.55); } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer__cols h5 { font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 16px; font-weight: 500; } .footer__cols a { display: block; padding: 6px 0; font-size: 14px; color: rgba(251,247,238,.7); transition: color .2s ease, transform .2s ease; } .footer__cols a:hover { color: var(--cream); transform: translateX(3px); } .footer__bar { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 12.5px; } .footer__bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(251,247,238,.45); } .footer__credit { display: inline-flex; align-items: center; gap: 10px; } .footer__credit__mark { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(226,197,115,0.08)); border: 1px solid rgba(201,162,39,0.4); color: var(--gold-soft); } .footer__credit__mark strong { font-family: var(--font-body); font-weight: 800; letter-spacing: .22em; font-size: 11.5px; color: var(--gold-soft); text-shadow: 0 0 14px rgba(201,162,39,0.35); } .footer__credit__mark svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,0.5)); } @media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: repeat(2, 1fr); } } /* ---------- Floating WhatsApp ---------- */ .fab-group { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 40; } .fab { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(21,128,61,.45); transition: transform .25s ease, box-shadow .25s ease; position: relative; } .fab svg { width: 26px; height: 26px; } .fab:hover { transform: scale(1.08); box-shadow: 0 18px 40px rgba(21,128,61,.55); } .fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); animation: pulse 2s infinite; } .fab--secondary { background: var(--teal); box-shadow: 0 10px 28px rgba(15,76,92,.45); } .fab--secondary:hover { box-shadow: 0 16px 36px rgba(15,76,92,.55); } .fab--secondary::after { border-color: var(--teal); } @keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(8px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, filter; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .reveal.is-in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); will-change: auto; } .reveal--delay { transition-delay: .15s; } /* Entrance animations stay on even under reduced-motion preference — they're brief, one-shot, and the site relies on them. We only silence the truly continuous motion loops below. */ @media (prefers-reduced-motion: reduce) { /* Silence continuous / looping motion only */ .hero__particles { display: none !important; } .hero.is-revealed .hero__video { animation: none !important; } .hero__chip__dot { animation: none !important; } .hero__title em::before { animation: none !important; opacity: 0 !important; } .marquee__track { animation: none !important; } .fab::after { animation: none !important; } .hero__scroll span { animation: none !important; } /* Show ALL content at its final visible state instantly — never leave transition-driven elements stuck or hidden under reduced motion. */ .reveal, .reveal--delay { opacity: 1 !important; transform: none !important; } .reveal-clip { opacity: 1 !important; clip-path: none !important; } .reveal-clip img { transform: none !important; } .split .char { opacity: 1 !important; transform: none !important; } .cascade > * { opacity: 1 !important; transform: none !important; } .hero__pill, .hero__title .w, .hero__sub, .hero__cta .btn, .hero__scroll { opacity: 1 !important; transform: none !important; } .hero.is-revealed .hero__chip { animation: none !important; opacity: 1 !important; transform: none !important; } .hero__title em::after { transform: scaleX(1) !important; } .hero__curtain { transform: translateX(-101%) !important; } .hero__curtain--right { transform: translateX(101%) !important; } .hero__content { opacity: 1 !important; transform: none !important; filter: none !important; } .day__row::after { transform: none !important; } .about__frame img, .gallery__item img { transform: none !important; } } /* ---------- Living Camera: firefly particles ---------- */ .hero__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero__particle { position: absolute; left: var(--x, 50%); bottom: -10%; width: var(--size, 3px); height: var(--size, 3px); border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 10px rgba(201,162,39,0.65); opacity: 0; filter: blur(0.5px); animation: floatUp var(--dur, 22s) linear var(--delay, 0s) infinite; will-change: transform, opacity; } @keyframes floatUp { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: var(--op, 0.6); } 90% { opacity: var(--op, 0.6); } 100% { transform: translate3d(var(--dx, 0), -110vh, 0); opacity: 0; } } /* Vignette breathing pulse on the hero veil */ .hero.is-revealed .hero__veil { animation: vignettePulse 6.5s ease-in-out infinite; } @keyframes vignettePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } } /* Blinking caret next to the italic "river" */ .hero__title em::before { content: ""; position: absolute; right: -10px; top: 12%; width: 3px; height: 0.74em; background: var(--gold-soft); box-shadow: 0 0 14px rgba(201,162,39,0.6); opacity: 0; border-radius: 1px; } .hero.is-revealed .hero__title em::before { opacity: 1; animation: caretBlink 1s steps(2) 1700ms infinite; } /* Floating "Now booking" chip — bottom-right of hero */ .hero__chip { position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(70px, 8vh, 110px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: rgba(255,255,255,0.92); font-size: 12.5px; letter-spacing: .08em; font-weight: 500; opacity: 0; transform: translateY(14px); transition: opacity .6s ease-out 2200ms, transform .6s cubic-bezier(.22,1,.36,1) 2200ms; z-index: 4; pointer-events: none; } .hero.is-revealed .hero__chip { opacity: 1; transform: translateY(0); animation: floatChip 6s ease-in-out 2.8s infinite; } .hero__chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(21,128,61,0.6); animation: dotPulse 2s ease-in-out infinite; } @keyframes floatChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,0.6); } 50% { box-shadow: 0 0 0 6px rgba(21,128,61,0); } } @media (max-width: 640px) { .hero__chip { bottom: 84px; right: 14px; font-size: 11px; padding: 8px 12px; } } /* ---------- A Day at Riverdeck — timeline ---------- */ .day { background: var(--cream); } .day__list { list-style: none; margin: 0; padding: 0; max-width: 760px; margin: 0 auto; position: relative; } .day__row { display: grid; grid-template-columns: 76px 36px 1fr; gap: 24px; align-items: start; padding: 22px 0 28px; position: relative; } .day__row::after { content: ""; position: absolute; left: calc(76px + 24px + 18px); top: 56px; bottom: -6px; width: 1px; background: linear-gradient(180deg, var(--gold) 0%, rgba(201,162,39,0.2) 100%); transform-origin: top center; transform: scaleY(var(--row-progress, 0)); will-change: transform; } .day__row--last::after { display: none; } .day__time { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--gold); text-align: right; padding-top: 10px; letter-spacing: .02em; } .day__node { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--teal); margin-top: 6px; box-shadow: 0 6px 18px rgba(15,76,92,0.08); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease; } .day__node svg { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.34,1.56,0.64,1); } .day__row:hover .day__node { transform: scale(1.15); background: var(--teal); color: var(--gold-soft); } .day__row:hover .day__node svg { transform: scale(1.1) rotate(-8deg); } .day__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 4px; color: var(--teal); } .day__body p { font-size: 15px; color: var(--ink-soft); margin: 0; } @media (max-width: 600px) { .day__row { grid-template-columns: 56px 32px 1fr; gap: 16px; } .day__row::after { left: calc(56px + 16px + 16px); } .day__time { font-size: 15px; padding-top: 8px; } .day__node { width: 32px; height: 32px; } .day__node svg { width: 16px; height: 16px; } .day__body h3 { font-size: 19px; } } /* ---------- Price calculator ---------- */ .estimator { background: var(--cream-2); padding-bottom: 0; } .calc { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); } @media (max-width: 880px) { .calc { grid-template-columns: 1fr; } } .calc__form { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 22px; } .calc__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); } .calc__row:last-child { border-bottom: none; padding-bottom: 0; } .calc__label { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--teal); } .calc__label small { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; } /* Stepper */ .stepper { display: inline-flex; align-items: center; gap: 0; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .stepper__btn { width: 38px; height: 38px; font-size: 18px; font-weight: 600; color: var(--teal); transition: background .2s ease, color .2s ease; } .stepper__btn:hover { background: var(--teal); color: var(--gold-soft); } .stepper__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .stepper input { width: 52px; height: 38px; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--teal); background: transparent; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); -moz-appearance: textfield; appearance: textfield; } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper input:focus { outline: none; background: var(--cream); } /* Segmented control */ .segmented { display: inline-flex; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; } .segmented label { position: relative; cursor: pointer; } .segmented input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .segmented label > span { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: background .25s ease, color .25s ease; } .segmented label > span small { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted); margin-top: 1px; } .segmented input:checked + span { background: var(--teal); color: var(--cream); } .segmented input:checked + span small { color: var(--gold-soft); } .segmented input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; } /* Total card */ .calc__total-card { background: linear-gradient(165deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .calc__total-card::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--gold); filter: blur(80px); opacity: 0.12; top: -100px; right: -100px; pointer-events: none; } .calc__total-tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); font-weight: 600; } .calc__total { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 56px); color: #fff; line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; } .calc__total-sub { font-size: 12.5px; color: rgba(251,247,238,0.65); margin: 0 0 10px; letter-spacing: .04em; } .calc__breakdown { font-size: 13.5px; color: rgba(251,247,238,0.85); margin: 0 0 18px; font-style: italic; } .calc__warning { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gold-soft); margin: 0 0 14px; padding: 10px 14px; background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.35); border-radius: 12px; } .calc__warning[hidden] { display: none; } .calc__warning svg { flex-shrink: 0; color: var(--gold); } .calc__cta { align-self: stretch; justify-content: center; margin-top: auto; } .estimator.is-over .calc__cta { background: var(--gold); color: var(--teal-deep); box-shadow: 0 10px 24px -10px rgba(201,162,39,0.6); } .estimator.is-over .calc__cta:hover { background: var(--gold-soft); } /* Pricing gets a tighter top spacing since estimator sits above */ #pricing { padding-top: clamp(48px, 6vw, 80px); } /* ---------- Scroll cinematics: progress bar + split + cascade ---------- */ .progress-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%); z-index: 49; transform-origin: left center; transform: scaleX(0); pointer-events: none; will-change: transform; } .split { display: inline; } .split .word { display: inline-block; white-space: nowrap; } .split .char { display: inline-block; opacity: 0; transform: translateY(0.65em) scale(0.98); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .split.is-in .char { opacity: 1; transform: translateY(0) scale(1); } /* Release GPU layers once the entrance has played — keeps scrolling light */ .split.is-in .char { will-change: auto; } .cascade > * { transition-delay: 0ms; } .cascade.is-in > *:nth-child(1) { transition-delay: 0ms; } .cascade.is-in > *:nth-child(2) { transition-delay: 90ms; } .cascade.is-in > *:nth-child(3) { transition-delay: 180ms; } .cascade.is-in > *:nth-child(4) { transition-delay: 270ms; } .cascade.is-in > *:nth-child(5) { transition-delay: 360ms; } .cascade.is-in > *:nth-child(6) { transition-delay: 450ms; } .cascade.is-in > *:nth-child(7) { transition-delay: 540ms; } .cascade.is-in > *:nth-child(8) { transition-delay: 630ms; } /* When the cascade enters view, force any unrevealed children to be in */ .cascade.is-in > * { opacity: 1; transform: none; } /* Premium Shutter/Curtain Clip Reveal */ .reveal-clip { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: clip-path, opacity; } .reveal-clip.is-in { opacity: 1; clip-path: inset(0 0 0 0); will-change: auto; } .reveal-clip img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-clip.is-in img { transform: scale(1); } /* Section Head Underline & Eyebrow Animations */ .section__head { position: relative; padding-bottom: 24px; } .section__head::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--gold-soft); opacity: 0.8; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } .section__head.is-in::after { width: 120px; } .reveal .eyebrow { letter-spacing: 0.08em; transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-in .eyebrow { letter-spacing: 0.22em; } .reveal .eyebrow::before { width: 0; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-in .eyebrow::before { width: 28px; } /* Subtle Shimmer Sweep on Golden Titles */ .hero__title em, .h2 em { position: relative; background: linear-gradient(120deg, var(--gold) 35%, var(--gold-soft) 50%, var(--gold) 65%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer-text 6s linear infinite; display: inline-block; } @keyframes shimmer-text { to { background-position: 200% center; } } /* Stats counter: keep tabular numerals so width doesn't jump */ .stats .stat strong { font-variant-numeric: tabular-nums; } .stats .stat strong [data-target] { display: inline-block; min-width: 1ch; } /* (Reduced-motion overrides consolidated into the single block above) */ /* ---------- Lightbox ---------- */ .lb { position: fixed; inset: 0; z-index: 100; display: flex; visibility: hidden; opacity: 0; transition: opacity .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s; } .lb.is-open { visibility: visible; opacity: 1; transition: opacity .26s cubic-bezier(.16,1,.3,1); } body.lb-lock { overflow: hidden; } .lb__backdrop { position: absolute; inset: 0; background: rgba(8, 26, 31, 0.86); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .lb__shell { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(14px, 2vw, 28px); gap: 12px; color: #fff; } .lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .lb__counter { display: inline-flex; align-items: center; padding: 8px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; font-weight: 600; backdrop-filter: blur(8px); } .lb__close { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease, border-color .2s ease; } .lb__close svg { width: 20px; height: 20px; } .lb__close:hover, .lb__close:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--teal-deep); transform: rotate(90deg); outline: none; } .lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; } .lb__img, .lb__video { display: none; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.5); background: rgba(255,255,255,0.04); transform: scale(0.96); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1); } .lb.is-ready .lb__img, .lb.is-ready .lb__video { transform: scale(1); opacity: 1; } .lb[data-mode="image"] .lb__img { display: block; } .lb[data-mode="video"] .lb__video { display: block; } .lb__video { background: #000; } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease; z-index: 2; } .lb__nav svg { width: 22px; height: 22px; } .lb__nav:hover, .lb__nav:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--teal-deep); outline: none; } .lb__nav--prev { left: clamp(14px, 2vw, 28px); } .lb__nav--next { right: clamp(14px, 2vw, 28px); } .lb__nav--prev:hover { transform: translateY(-50%) translateX(-2px); } .lb__nav--next:hover { transform: translateY(-50%) translateX(2px); } .lb[data-mode="video"] .lb__nav { display: none; } .lb.is-single .lb__nav { display: none; } .lb__caption { text-align: center; font-size: 13.5px; color: rgba(255,255,255,0.85); font-family: var(--font-display); font-style: italic; letter-spacing: .02em; min-height: 22px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } @media (max-width: 640px) { .lb__shell { padding: 10px; gap: 8px; } .lb__nav { width: 40px; height: 40px; } .lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; } .lb__close { width: 40px; height: 40px; } .lb__counter { padding: 6px 12px; font-size: 11px; } .lb__img, .lb__video { border-radius: var(--radius-sm); width: 100%; height: 100%; } .lb__caption { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .lb, .lb__img, .lb__video, .lb__close, .lb__nav { transition: none !important; } .lb__img, .lb__video { transform: none; opacity: 1; } } /* ---------- Legal pages (privacy/terms) ---------- */ .legal { padding: 140px 0 80px; max-width: 800px; margin: 0 auto; } .legal h1 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); color: var(--teal); font-weight: 500; margin: 0 0 8px; } .legal .updated { color: var(--muted); font-size: 13.5px; margin-bottom: 36px; } .legal h2 { font-family: var(--font-display); font-size: 24px; color: var(--teal); margin: 36px 0 12px; font-weight: 500; } .legal p, .legal li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; } .legal ul { list-style: disc; padding-left: 22px; margin: 8px 0 20px; } .legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }