/* ========================================================================== FLUID DESIGN SYSTEM Type scale generated between a 320px and a 1600px viewport using a 1.2 (mobile) → 1.25 (desktop) modular ratio, expressed with clamp() so every size interpolates smoothly instead of jumping at breakpoints. rem-based, so it still honours the user's browser font-size setting. ========================================================================== */ :root { --fs-2xs: clamp(0.625rem, 0.594rem + 0.156vw, 0.75rem); /* 10 → 12 */ --fs-xs: clamp(0.75rem, 0.719rem + 0.156vw, 0.875rem); /* 12 → 14 */ --fs-sm: clamp(0.875rem, 0.844rem + 0.156vw, 1rem); /* 14 → 16 */ --fs-base: clamp(1rem, 0.969rem + 0.156vw, 1.125rem); /* 16 → 18 */ --fs-md: clamp(1.0625rem,1.016rem + 0.234vw, 1.25rem); /* 17 → 20 */ --fs-lg: clamp(1.1875rem,1.125rem + 0.313vw, 1.4375rem); /* 19 → 23 */ --fs-xl: clamp(1.375rem, 1.25rem + 0.625vw, 1.875rem); /* 22 → 30 */ --fs-2xl: clamp(1.625rem, 1.406rem + 1.094vw, 2.5rem); /* 26 → 40 */ /* the three display tiers are serif-only (every t-h2/t-h2-alt/t-display in the templates is paired with .font-serif) and carry ~8% to offset Cormorant's small eye — the text tiers above stay on the original scale */ --fs-3xl: clamp(2rem, 1.609rem + 1.953vw, 3.625rem); /* 32 → 58 */ --fs-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 4.25rem); /* 36 → 68 */ --fs-display: clamp(2.5rem, 1.641rem + 4.297vw, 6rem); /* 40 → 96 */ /* Fluid vertical rhythm + gutters */ --space-section: clamp(4.5rem, 3rem + 7vw, 9rem); --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 3rem); } body { background-color: #FDFBF9; color: #1A1A1A; overflow-x: hidden; font-size: var(--fs-base); line-height: 1.6; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } /* Cormorant Garamond is a small-on-the-em old-style face: at a given font-size it reads noticeably smaller than a geometric sans, and its 400 weight goes wispy against this site's dark oxblood panels. Headings therefore run at 500 by default, and the three display tiers are sized up to compensate (see --fs-3xl and above). Its italic is the calligraphic "twist" — used for accent words. */ /* Element selector only (specificity 0,0,1) so the 14 font-bold and the one font-light heading in the templates still win — this is a floor, not an override. Accent italics inherit their heading's weight. */ h1, h2, h3, h4 { font-weight: 500; } .font-serif em, .font-serif i { font-style: italic; font-weight: inherit; } /* NOTE: do not set overflow-x:hidden on — it makes the root element its own scroll container, which breaks position:sticky for descendants (kills #scroll-video-track and #camera-reveal-track). body's overflow-x below already guards against horizontal scroll. */ /* Nothing may ever push the page sideways on a narrow phone */ img, svg, video { max-width: 100%; } /* --- Fluid type utilities (used instead of breakpoint-stepped font sizes) --- */ .t-eyebrow { font-size: var(--fs-2xs); line-height: 1.5; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; } .t-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.015em; } .t-h2 { font-size: var(--fs-4xl); line-height: 1.08; letter-spacing: -0.012em; } /* Slightly smaller display size for long headlines inside cards/panels */ .t-h2-alt { font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.012em; } .t-h3 { font-size: var(--fs-2xl); line-height: 1.14; letter-spacing: -0.01em; } .t-h4 { font-size: var(--fs-xl); line-height: 1.2; } .t-lg { font-size: var(--fs-lg); line-height: 1.5; } .t-lead { font-size: var(--fs-md); line-height: 1.7; } .t-body { font-size: var(--fs-base); line-height: 1.7; } .t-sm { font-size: var(--fs-sm); line-height: 1.65; } .t-xs { font-size: var(--fs-xs); line-height: 1.6; } .t-2xs { font-size: var(--fs-2xs); line-height: 1.5; } /* Headlines break on sense, body copy avoids orphans */ .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } /* Fluid section padding + gutters */ .section-y { padding-top: var(--space-section); padding-bottom: var(--space-section); } .gutter { padding-left: var(--gutter); padding-right: var(--gutter); } /* Tap targets stay finger-friendly on touch devices */ @media (hover: none) and (pointer: coarse) { a[class*="rounded-full"], button { min-height: 44px; } } /* Custom selection color */ ::selection { background-color: #761709; color: white; } /* Utility class for scroll animations */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Header runs on the brand's oxblood, so the nav reads cream at rest and gold on hover — burgundy-on-burgundy would have no contrast left to give. */ .nav-link { position: relative; color: rgba(253, 251, 249, 0.85); transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; width: 100%; height: 1.5px; bottom: -6px; left: 0; background: linear-gradient(90deg, #D9A05B, #E5D5C5); transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover { color: #E5D5C5; } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } .nav-link.active { color: #E5D5C5; } .nav-link.active::after { transform: scaleX(1); transform-origin: left; } /* Custom masking for images to match reference style */ .hero-img-mask { border-radius: 12rem 12rem 0 0; } .btn-hover-effect { position: relative; overflow: hidden; } .btn-hover-effect::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.3s ease; } .btn-hover-effect:hover::after { transform: translateY(0); } /* ========================================================= Hero — editorial revamp: line reveals, flourish, badge, depth ========================================================= */ .hero-watermark { position: absolute; top: 16%; left: -2%; font-size: clamp(7rem, 17vw, 16rem); line-height: 1; color: rgba(118, 23, 9, 0.035); user-select: none; letter-spacing: -0.02em; } /* Fine film grain over the cream backdrop */ .hero-grain { position: absolute; inset: 0; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } /* Drifting golden bokeh dust */ .hero-bokeh { position: absolute; border-radius: 9999px; background: radial-gradient(circle, rgba(217, 160, 91, 0.5), transparent 70%); filter: blur(1px); animation: heroFloat 12s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-28px); opacity: 0.9; } } /* Masked headline line reveals (padding hack keeps descenders unclipped) */ .hero-line-mask { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } .hero-line { display: block; transform: translateY(112%); animation: heroLineUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; } .hero-line-b { animation-delay: 0.3s; } @keyframes heroLineUp { to { transform: translateY(0); } } /* Hand-drawn gold flourish under "Story" */ .hero-flourish { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.26em; overflow: visible; } .hero-flourish path { stroke-dasharray: 230; stroke-dashoffset: 230; animation: heroFlourish 0.9s ease-out 1.05s forwards; } @keyframes heroFlourish { to { stroke-dashoffset: 0; } } /* Editorial aside — Cormorant's calligraphic italic carries the script flavour without dropping into an actual handwriting face */ .hero-script { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1rem, 0.85rem + 1.2vw, 1.4rem); color: rgba(118, 23, 9, 0.85); line-height: 1.35; } /* Rotating circular-text badge */ .hero-badge { opacity: 0; animation: heroFadeIn 0.8s ease 0.7s forwards; will-change: transform; } @keyframes heroFadeIn { to { opacity: 1; } } .hero-badge-text { font-family: 'Urbanist', system-ui, sans-serif; font-size: 7.8px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(26, 26, 26, 0.6); } /* Hero image slider — crossfading slides + line-indicator nav */ .hero-slider { overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1); } .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-slider-nav { position: absolute; left: 1rem; bottom: 1rem; z-index: 20; display: flex; align-items: center; gap: 0.5rem; } .hero-slider-nav--center { left: 50%; bottom: 1.5rem; transform: translateX(-50%); } @media (min-width: 1024px) { .hero-slider-nav--center { left: 50%; bottom: 2.5rem; transform: translateX(-50%); } } .hero-slider-nav--right { left: auto; right: 1.5rem; bottom: 1.5rem; transform: none; } @media (min-width: 768px) { .hero-slider-nav--right { right: 2.5rem; bottom: 2rem; } } @media (min-width: 1024px) { .hero-slider-nav--right { right: 3.5rem; bottom: 2.25rem; } } .hero-slider-dot { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; box-sizing: border-box; width: 1.5rem; height: 3px; min-width: 0; min-height: 0; margin: 0; border-radius: 999px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, width 0.3s ease; } .hero-slider-dot:hover { background: rgba(255, 255, 255, 0.7); } .hero-slider-dot.is-active { width: 2.25rem; background: #D9A05B; } .hero-slider-dot:focus-visible { outline: 2px solid #D9A05B; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .hero-slide { transition-duration: 0.01ms; } } .ani-delay-600 { animation-delay: 600ms; } .ani-delay-700 { animation-delay: 700ms; } @media (prefers-reduced-motion: reduce) { .hero-line { transform: none; animation: none; } .hero-flourish path { stroke-dashoffset: 0; animation: none; } .hero-badge { opacity: 1; animation: none; } .hero-badge svg, .hero-bokeh { animation: none; } .animate-load-fade-in-up, .animate-load-scale-in { opacity: 1; animation: none; transform: none; } } /* Scroll-bound video portal — GPU compositing + stable mobile viewport */ /* 240vh of track = 140vh of actual scrub travel. The old 130vh left only 30vh for the entire open → play → dissolve sequence, which is why it snapped past. This is the one number that sets the pace — entry/hold/exit are proportions of it, so they retune themselves whenever it changes. */ #scroll-video-track { height: 240vh; /* fallback */ height: 240svh; /* stable against mobile URL-bar resize */ } #scroll-video-sticky { height: 100vh; /* fallback */ height: 100svh; } @keyframes scrollDotBounce { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(6px); opacity: 0.3; } } .animate-scroll-dot { animation: scrollDotBounce 1.8s infinite ease-in-out; } #video-container, #scroll-video { transform-origin: center center; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint; } #video-outro { will-change: opacity, transform; } #video-outro .outro-item { opacity: 0; /* JS-driven staggered reveal */ will-change: opacity, transform, filter; } /* Warm radial glow so the frame never reads as blank white */ .outro-glow { position: absolute; top: 50%; left: 50%; width: min(95vw, 1000px); height: min(95vw, 1000px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(118, 23, 9, 0.10) 0%, rgba(229, 213, 197, 0.14) 38%, rgba(253, 251, 249, 0) 70%); filter: blur(18px); pointer-events: none; } .outro-glow-dark { background: radial-gradient(circle, rgba(217, 160, 91, 0.18) 0%, rgba(118, 23, 9, 0.25) 40%, rgba(18, 5, 4, 0) 75%) !important; filter: blur(30px) !important; } /* ========================================================================= CINEMA CANVAS (SLAB 2) - THE 4 ACTS EXPANDING PILLARS MATRIX ========================================================================= */ .cinema-section { position: relative; background-color: #090202; overflow: hidden; } /* Atmospheric Glows */ .cinema-glow { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform, opacity; } .cinema-glow--primary { top: 20%; left: -8%; width: 36rem; height: 36rem; background: radial-gradient(circle, rgba(118, 23, 9, 0.25) 0%, rgba(118, 23, 9, 0) 70%); filter: blur(120px); } .cinema-glow--accent { bottom: 10%; right: -8%; width: 36rem; height: 36rem; background: radial-gradient(circle, rgba(217, 160, 91, 0.16) 0%, rgba(217, 160, 91, 0) 70%); filter: blur(130px); } /* Pillars Container */ .cinema-pillars-matrix { display: flex; width: 100%; } /* Base Pillar */ .cinema-act-pillar { position: relative; overflow: hidden; background-color: #000000; transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; will-change: flex, transform; } /* Desktop Accordion Behavior */ @media (min-width: 1024px) { .cinema-act-pillar { flex: 1 1 0%; min-width: 0; height: 100%; } .cinema-act-pillar.is-active { flex: 3.4 1 0%; border-color: rgba(217, 160, 91, 0.5) !important; box-shadow: 0 25px 65px rgba(0, 0, 0, 0.9), 0 0 40px rgba(118, 23, 9, 0.3) !important; } .cinema-act-pillar:not(.is-active) { cursor: pointer; } .cinema-act-pillar:not(.is-active):hover { border-color: rgba(255, 255, 255, 0.35); transform: translateY(-2px); } .cinema-act-pillar:not(.is-active):hover .cinema-act-scrim { opacity: 0.35; } /* Collapsed & Expanded visibility on Desktop */ .cinema-act-pillar:not(.is-active) .cinema-pillar-expanded { opacity: 0; pointer-events: none; transform: scale(0.95); } .cinema-act-pillar.is-active .cinema-pillar-expanded { opacity: 1; pointer-events: auto; transform: scale(1); } .cinema-act-pillar:not(.is-active) .cinema-pillar-collapsed { opacity: 1; pointer-events: none; } .cinema-act-pillar.is-active .cinema-pillar-collapsed { opacity: 0; pointer-events: none; } .cinema-act-pillar:not(.is-active) .cinema-act-scrim { opacity: 0.65; } .cinema-act-pillar.is-active .cinema-act-scrim { opacity: 0.15; } } /* Mobile & Tablet Layout */ @media (max-width: 1023px) { .cinema-act-pillar { height: 360px; width: 100%; } .cinema-act-pillar .cinema-pillar-collapsed { display: none !important; } .cinema-act-pillar .cinema-pillar-expanded { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } .cinema-act-pillar .cinema-sprocket-edge { display: none !important; } } /* Rotating Vertical Text */ .cinema-vertical-title { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } /* Play Button Pulse Ring */ .cinema-act-halo { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(217, 160, 91, 0.45); animation: cinemaHaloPulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite; pointer-events: none; } @keyframes cinemaHaloPulse { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } /* Page Hero Video Background Controls */ .page-hero { position: relative; overflow: hidden; } .page-hero-video-bg { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; } .page-hero-video-bg video { width: 100% !important; height: 100% !important; object-fit: cover !important; } .page-hero-content, .page-hero .relative.z-10 { position: relative !important; z-index: 10 !important; } @keyframes floatCardA { 0%, 100% { transform: translateY(0px) rotate(-5deg) scale(1); } 50% { transform: translateY(-12px) rotate(-3deg) scale(1.01); } } @keyframes floatCardB { 0%, 100% { transform: translateY(0px) rotate(4deg) scale(1); } 50% { transform: translateY(-14px) rotate(6deg) scale(1.015); } } @keyframes floatCardC { 0%, 100% { transform: translateY(0px) rotate(5deg) scale(1); } 50% { transform: translateY(-10px) rotate(3deg) scale(1.01); } } @keyframes floatCardD { 0%, 100% { transform: translateY(0px) rotate(-4deg) scale(1); } 50% { transform: translateY(-13px) rotate(-6deg) scale(1.015); } } .float-card-a { animation: floatCardA 7s ease-in-out infinite; } .float-card-b { animation: floatCardB 8s ease-in-out infinite 1s; } .float-card-c { animation: floatCardC 7.5s ease-in-out infinite 0.5s; } .float-card-d { animation: floatCardD 8.5s ease-in-out infinite 1.5s; } .outro-photo-card { box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85); } /* Giant monogram watermark behind the copy */ .outro-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); font-size: min(62vh, 46rem); line-height: 1; color: rgba(118, 23, 9, 0.04); user-select: none; pointer-events: none; letter-spacing: -0.02em; } /* Drawn underline flourish under the emphasised word */ .outro-emph { position: relative; white-space: nowrap; } .outro-emph::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 2px; background: linear-gradient(90deg, transparent, #761709 20%, #761709 80%, transparent); opacity: 0.75; } @media (prefers-reduced-motion: reduce) { #video-outro .outro-item { opacity: 1 !important; filter: none !important; transform: none !important; } #video-container { transform: scale(0.9, 0.85) !important; } #scroll-video { transform: scale(1.1778, 1.2471) !important; } } /* ---- Our Services: interactive editorial grid ---- */ .svc-bg-word { position: absolute; top: -1.5rem; right: -1rem; z-index: 0; font-size: clamp(6rem, 24vw, 22rem); line-height: 1; color: rgba(118, 23, 9, 0.03); pointer-events: none; user-select: none; } .svc-grid { position: relative; } .svc-grid::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, -200px) var(--my, -200px), rgba(118, 23, 9, 0.07), transparent 68%); opacity: 0; transition: opacity 0.45s ease; } .svc-grid:hover::before { opacity: 1; } /* ---- Service card: an editorial plate. At rest the photograph is graded back under a burgundy wash so the six cards read as one set; on hover the grade lifts and the picture blooms into full colour. No 3D tilt — the card lives in a travelling rail, and an inline perspective transform there would fight both .reveal and the rail. ---- */ .svc-card { position: relative; display: block; isolation: isolate; overflow: hidden; height: 22rem; border-radius: 1.5rem; cursor: pointer; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85); /* opacity/transform are listed so .reveal's entrance still animates — this rule comes after .reveal in the cascade and would otherwise replace it */ transition: box-shadow 0.55s ease, opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1); } @media (min-width: 640px) { .svc-card { height: 24rem; } } @media (min-width: 1280px) { .svc-card { height: 26rem; } } .svc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* graded back at rest, full colour on hover */ filter: saturate(0.45) contrast(1.06) brightness(0.82); transition: filter 0.7s ease; } /* burgundy grade that recedes as the photograph comes up */ .svc-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(118, 23, 9, 0.30) 0%, rgba(118, 23, 9, 0.55) 100%); mix-blend-mode: multiply; opacity: 1; transition: opacity 0.7s ease; } /* separate, always-on scrim so the type stays legible either way */ .svc-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(8, 2, 2, 0.92) 0%, rgba(8, 2, 2, 0.45) 38%, rgba(8, 2, 2, 0.05) 70%); } .svc-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)' opacity='0.06'/%3E%3C/svg%3E"); } /* hairline that warms to gold on hover */ .svc-ring { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: box-shadow 0.55s ease; } /* ghost plate number, set in the display serif */ .svc-index { position: absolute; top: 0.4rem; right: 1.25rem; z-index: 3; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; font-weight: 500; color: rgba(253, 251, 249, 0.13); pointer-events: none; transition: color 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .svc-body { position: absolute; inset: auto 0 0 0; z-index: 4; /* right padding reserves the corner affordance's column so the copy can never run underneath it */ padding: 1.75rem 4.5rem 1.75rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 1024px) { .svc-body { padding: 2rem 4.75rem 2rem 1.85rem; } } .svc-icon { font-size: 1.35rem; color: #E5D5C5; margin-bottom: 0.7rem; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .svc-title { font-size: var(--fs-xl); line-height: 1.16; font-weight: 400; color: #FDFBF9; } .svc-title em { font-style: italic; } .svc-rule { display: block; height: 1px; width: 2rem; margin-top: 0.85rem; background: linear-gradient(90deg, #D9A05B, rgba(217, 160, 91, 0)); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* real height reveal rather than a fade — the card grows into the copy */ .svc-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .svc-reveal > .svc-desc { min-height: 0; overflow: hidden; font-size: var(--fs-xs); font-weight: 300; line-height: 1.6; color: rgba(253, 251, 249, 0.82); max-width: 17rem; opacity: 0; transition: opacity 0.45s ease; } /* corner affordance */ .svc-go { position: absolute; right: 1.35rem; bottom: 1.6rem; z-index: 5; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(229, 213, 197, 0.35); color: #E5D5C5; background: rgba(12, 4, 3, 0.35); backdrop-filter: blur(4px); opacity: 0; transform: scale(0.7); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease; } @media (hover: hover) and (pointer: fine) { .svc-card:hover { box-shadow: 0 32px 60px -24px rgba(0, 0, 0, 0.95); } .svc-card:hover .svc-photo { filter: saturate(1) contrast(1) brightness(1); } .svc-card:hover .svc-wash { opacity: 0.15; } .svc-card:hover .svc-ring { box-shadow: inset 0 0 0 1px rgba(229, 213, 197, 0.5); } .svc-card:hover .svc-index { color: rgba(229, 213, 197, 0.4); transform: translateY(-4px); } .svc-card:hover .svc-icon { transform: translateY(-3px); } .svc-card:hover .svc-rule { width: 4.5rem; } .svc-card:hover .svc-reveal { grid-template-rows: 1fr; } .svc-card:hover .svc-reveal > .svc-desc { opacity: 1; } .svc-card:hover .svc-go { opacity: 1; transform: scale(1); background: #E5D5C5; border-color: #E5D5C5; color: #140604; } } /* Touch devices can't hover: show the resolved state outright */ @media (hover: none) { .svc-photo { filter: saturate(0.85) brightness(0.9); } .svc-wash { opacity: 0.4; } .svc-rule { width: 4.5rem; } .svc-reveal { grid-template-rows: 1fr; } .svc-reveal > .svc-desc { opacity: 1; } .svc-go { opacity: 1; transform: scale(1); } } /* Immediate load animations for Hero */ .animate-load-fade-in-up { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .animate-load-scale-in { opacity: 0; transform: scale(0.96) rotate(0.001deg); animation: scaleIn 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* Custom Animation Delays */ .ani-delay-100 { animation-delay: 100ms; } .ani-delay-200 { animation-delay: 200ms; } .ani-delay-300 { animation-delay: 300ms; } .ani-delay-400 { animation-delay: 400ms; } .ani-delay-500 { animation-delay: 500ms; } /* Animated Hamburger Icon */ .hamburger-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.06); background-color: rgba(253, 251, 249, 0.7); /* bglight shade */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; outline: none; z-index: 60; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hamburger-btn:hover, .hamburger-btn:focus { border-color: rgba(118, 23, 9, 0.2); background-color: rgba(118, 23, 9, 0.05); } .hamburger-line { width: 20px; height: 2px; background-color: #1A1A1A; /* matches textdark */ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin: center; } /* Morphing hamburger lines to 'X' */ .hamburger-btn.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: #761709; /* primary */ } .hamburger-btn.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger-btn.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: #761709; /* primary */ } /* Mobile Left-Side Drawer custom shadows and slide transition */ /* deeper now the drawer is oxblood on a dark backdrop — an 0.08 shadow had nothing left to separate against */ #mobile-menu-drawer { box-shadow: 24px 0 90px rgba(0, 0, 0, 0.65); } /* Mobile Drawer Links Slide & Fade stagger anim */ .drawer-link { opacity: 0; transform: translateY(15px); transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .drawer-open .drawer-link { opacity: 1; transform: translateY(0); } /* Staggered animation delays for the mobile drawer links */ .drawer-delay-1 { transition-delay: 100ms; } .drawer-delay-2 { transition-delay: 150ms; } .drawer-delay-3 { transition-delay: 200ms; } .drawer-delay-4 { transition-delay: 250ms; } .drawer-delay-5 { transition-delay: 300ms; } .drawer-delay-6 { transition-delay: 350ms; } .drawer-delay-7 { transition-delay: 400ms; } .drawer-delay-8 { transition-delay: 450ms; } /* Header chrome — deep oxblood with a gold hairline rather than a white bar, so it belongs to the brand instead of interrupting it. Defined here rather than in utility classes so every page and both scroll states share one source of truth. */ #header { position: relative; background-color: rgba(20, 6, 4, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Sticky Scrolled Header styles */ .scrolled-header { background-color: rgba(20, 6, 4, 0.95) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } /* the hairline itself: a gold thread that fades out at both ends */ #header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(217, 160, 91, 0.55) 22%, rgba(229, 213, 197, 0.75) 50%, rgba(217, 160, 91, 0.55) 78%, transparent); transition: opacity 0.5s ease; } #header.scrolled-header::after { opacity: 1; } /* Homepage only: header floats 100% transparent over full-bleed hero until hovered or scrolled */ #header.home-header:not(.scrolled-header) { background-color: transparent !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; } /* Glass frosted color appears smoothly when hovering over header on homepage */ #header.home-header:not(.scrolled-header):hover { background-color: rgba(20, 6, 4, 0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .home-header:not(.scrolled-header) .logo-text, .home-header:not(.scrolled-header) nav, .home-header:not(.scrolled-header) .nav-link, .home-header:not(.scrolled-header) .nav-link.active { color: #fff; } /* Hamburger sits on the same dark chrome */ .hamburger-btn { border-color: rgba(255, 255, 255, 0.14) !important; background-color: rgba(255, 255, 255, 0.07) !important; } .hamburger-btn:hover, .hamburger-btn:focus { border-color: rgba(229, 213, 197, 0.45) !important; background-color: rgba(229, 213, 197, 0.14) !important; } .hamburger-line { background-color: #FDFBF9; } .hamburger-btn.open .hamburger-line { background-color: #E5D5C5 !important; } /* Continuous Ken Burns slow-pan photography animation */ @keyframes kenBurnsSlow { 0% { transform: scale(1.03) translate(0, 0); } 50% { transform: scale(1.10) translate(-1.5%, -1%); } 100% { transform: scale(1.03) translate(0, 0); } } .ken-burns-slow { animation: kenBurnsSlow 24s ease-in-out infinite; } /* Shifting warm golden hour lens flare leak */ @keyframes lightShimmer { 0% { opacity: 0.1; transform: translate(-15%, -15%) scale(1); } 50% { opacity: 0.35; transform: translate(5%, 5%) scale(1.08); } 100% { opacity: 0.1; transform: translate(-15%, -15%) scale(1); } } .light-shimmer { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle at center, rgba(229, 213, 197, 0.3) 0%, transparent 60%); mix-blend-mode: overlay; pointer-events: none; z-index: 25; animation: lightShimmer 16s ease-in-out infinite; } /* Tactile organic scroll reveal (tilt & stand upright) overrides */ .reveal.value-card-reveal-left { transform: translateY(60px) rotate(-1.8deg); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); } .reveal.value-card-reveal-right { transform: translateY(60px) rotate(1.8deg); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1); } .reveal.value-card-reveal-left.active, .reveal.value-card-reveal-right.active { transform: translateY(0) rotate(0deg); } /* Breathing pulse ring animation for play button overlay */ @keyframes playPulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 0.3; } 100% { transform: scale(1.3); opacity: 0; } } .play-ring-pulse { position: absolute; inset: -6px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 9999px; animation: playPulse 2s infinite ease-out; } /* ========================================================= The Reel — a filmstrip threading through a projector gate ========================================================= */ #camera-reveal-track { /* 300vh of scrub + 100vh "overlap" the testimonials curtain rises through */ height: 400vh; /* fallback */ height: 400svh; /* stable against mobile URL-bar resize */ background: #1b0503; position: relative; z-index: 1; /* sits UNDER the testimonials curtain */ } #camera-reveal-sticky { height: 100vh; height: 100svh; /* dark oxblood — deep version of brand burgundy #761709 */ background: radial-gradient(125% 85% at 50% 4%, #5a1109 0%, #360b06 46%, #1b0503 100%); } /* ---- Backdrop atmosphere ---- */ .cr-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .cr-glow { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: min(120vw, 1100px); height: 70vh; border-radius: 50%; background: radial-gradient(circle, rgba(168,42,20,0.55) 0%, rgba(229,213,197,0.12) 40%, transparent 72%); filter: blur(34px); } .cr-rays { position: absolute; inset: -20% -10% auto -10%; height: 120%; background: linear-gradient(115deg, transparent 42%, rgba(229,213,197,0.06) 47%, transparent 52%), linear-gradient(125deg, transparent 60%, rgba(255,255,255,0.04) 64%, transparent 68%); mix-blend-mode: screen; } .cr-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: min(65vh, 38rem); height: min(65vh, 38rem); object-fit: contain; opacity: 0.035; user-select: none; pointer-events: none; } .cr-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.55); } /* blend the bottom seam into the oxblood testimonials section below */ .cr-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; background: linear-gradient(to bottom, rgba(27,5,3,0) 0%, #1b0503 100%); } /* keep heading legible even if a Polaroid rises behind it */ .cr-head { text-shadow: 0 2px 24px rgba(15,4,3,0.65); } .cr-head::before { content: ''; position: absolute; top: -6vh; left: 50%; transform: translateX(-50%); width: min(150%, 900px); height: 46vh; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 40%, rgba(20,5,3,0.74), rgba(20,5,3,0.30) 55%, transparent 78%); filter: blur(6px); } /* ---- Layout: copy column + strip stage ---- */ .reel-layout { position: relative; z-index: 10; height: 100%; max-width: 1500px; margin: 0 auto; padding: clamp(5.5rem, 12vh, 7.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.5rem, 5vh, 3rem); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(0.75rem, 2.5vh, 1.75rem); } @media (min-width: 1024px) { .reel-layout { grid-template-rows: none; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); padding-top: 0; padding-bottom: 0; align-items: center; } } .reel-copy { position: relative; z-index: 12; align-self: center; } /* ---- Projector beam + drifting dust ---- */ .reel-beam { position: absolute; top: 50%; left: -6%; z-index: 2; width: 80%; height: clamp(240px, 46vh, 430px); transform: translateY(-50%); background: linear-gradient(90deg, rgba(255,206,150,0.16), rgba(255,190,120,0.05) 55%, transparent 82%); filter: blur(30px); mix-blend-mode: screen; pointer-events: none; } .reel-mote { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,226,190,0.9), transparent 70%); animation: reelDrift 15s ease-in-out infinite; } .reel-mote-1 { width: 5px; height: 5px; top: 38%; left: 21%; } .reel-mote-2 { width: 3px; height: 3px; top: 57%; left: 33%; animation-delay: -5s; } .reel-mote-3 { width: 6px; height: 6px; top: 46%; left: 11%; animation-delay: -9.5s; } @keyframes reelDrift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.22; } 50% { transform: translate3d(28px, -34px, 0); opacity: 0.75; } } /* ---- Live read-out of the frame in the gate ---- */ .reel-readout { margin-top: clamp(1.15rem, 3vh, 2.25rem); display: flex; align-items: center; gap: 0.9rem; } .reel-readout-rule { display: block; width: 2.25rem; height: 1px; flex: none; background: linear-gradient(90deg, rgba(217,160,91,0.85), transparent); } .reel-readout-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 0.95rem + 1vw, 1.65rem); line-height: 1.15; color: #D9A05B; transition: opacity 0.32s ease, transform 0.32s ease; } .reel-readout-text.is-swapping { opacity: 0; transform: translateY(7px); } /* ---- The stage the strip runs through ---- */ .reel-stage { position: relative; height: 100%; min-height: 0; perspective: 1600px; overflow: hidden; /* fade the strip itself at the stage edges — painting a flat colour over it instead would band against the section's gradient */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 83%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 83%, transparent 100%); } .reel-tilt { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 2.4vw, 30px); transform-style: preserve-3d; } @media (min-width: 1024px) { .reel-tilt { transform: rotateY(9deg) rotateZ(-2.2deg); } } /* ---- The filmstrip itself ---- */ .reel-rail { position: relative; flex: none; padding: 26px 13px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(180deg, #120705, #1d0e09 50%, #120705); box-shadow: 0 0 70px rgba(0,0,0,0.55); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* the two rails run opposite ways; the second sits back a little so the pair reads as depth rather than as two equal columns */ .reel-rail--a { width: clamp(150px, 40vw, 205px); } .reel-rail--b { width: clamp(116px, 31vw, 165px); opacity: 0.58; } @media (min-width: 1024px) { .reel-rail { padding: 34px 17px; gap: 28px; } .reel-rail--a { width: clamp(210px, 19vw, 292px); } .reel-rail--b { width: clamp(158px, 14vw, 214px); opacity: 0.52; } } /* sprocket perforations — they travel with the strip, which sells the mechanism */ .reel-rail::before, .reel-rail::after { content: ''; position: absolute; top: 0; bottom: 0; width: 13px; background: repeating-linear-gradient(to bottom, rgba(255,238,214,0.85) 0 10px, transparent 10px 28px); opacity: 0.42; pointer-events: none; } .reel-rail::before { left: 0; } .reel-rail::after { right: 0; } @media (min-width: 1024px) { .reel-rail::before, .reel-rail::after { width: 17px; } } .reel-frame { position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #0d0605; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .reel-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .reel-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,3,2,0.92), rgba(22,6,4,0.86)); opacity: 0.82; will-change: opacity; } /* ---- The gate: a stationary lit band the strip passes through ---- */ .reel-gate { position: absolute; left: 0; right: 0; top: 50%; z-index: 6; height: clamp(190px, 38vh, 330px); transform: translateY(-50%); pointer-events: none; } /* radii fade to transparent inside the box, so the glow has no visible edge */ .reel-gate-glow { position: absolute; inset: -22% 0; background: radial-gradient(50% 46% at 50% 50%, rgba(255,206,150,0.26), rgba(255,180,110,0.08) 48%, transparent 72%); filter: blur(14px); opacity: 0.5; will-change: opacity; } .reel-gate-line { position: absolute; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,213,197,0.45), transparent); } .reel-gate-line--t { top: 0; } .reel-gate-line--b { bottom: 0; } @media (max-width: 1023px) { .reel-beam { display: none; } .reel-copy { text-align: center; } .reel-readout { justify-content: center; } .cr-fade-bottom { height: 140px; } } /* Reduced motion — no pin, no scrub: the frames simply lay out as a lit grid */ @media (prefers-reduced-motion: reduce) { #camera-reveal-track { height: auto; } #camera-reveal-sticky { position: static; height: auto; } .reel-layout { grid-template-columns: none; grid-template-rows: none; padding-bottom: 5rem; } .reel-stage { height: auto; overflow: visible; perspective: none; margin-top: 3rem; -webkit-mask-image: none; mask-image: none; } .reel-tilt { position: static; display: block; transform: none; } .reel-rail { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; background: none; box-shadow: none; padding: 0; gap: 1rem; } .reel-rail::before, .reel-rail::after { display: none; } /* keep only the first pass of the primary rail: one copy of each photo, each still carrying its real alt text */ .reel-rail--b { display: none; } .reel-frame[aria-hidden="true"] { display: none; } .reel-frame { width: clamp(130px, 30%, 210px); } .reel-veil { opacity: 0; } .reel-gate, .reel-beam, .reel-readout { display: none; } .reel-mote { animation: none; } /* `body` prefix: the base #testimonials rule is later in this file and would otherwise win on source order, leaving the curtain over the reel */ body #testimonials { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; } } @keyframes zoom { 0% { transform: scale(1.1); } 100% { transform: scale(1.22); } } /* ========================================================= Testimonials — parallax wedding backdrop + frosted cards ========================================================= */ #testimonials { background: #1b0503; /* oxblood — continues out of the camera section */ isolation: isolate; position: relative; z-index: 2; /* curtain — rides UP over the pinned camera */ /* pull up one viewport so it rises over the still-pinned camera section */ margin-top: -100vh; margin-top: -100svh; border-top-left-radius: 2.75rem; border-top-right-radius: 2.75rem; box-shadow: 0 -50px 90px -18px rgba(0,0,0,0.6); } #testimonials::after { /* thin top highlight — reads as a lifted panel edge */ content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(229,213,197,0.5), transparent); pointer-events: none; } /* Everything after the curtain has to share the curtain's plane. #camera-reveal-track carries z-index:1, while the CTA and the footer are positioned with z-index:auto — so the reel painted OVER them despite coming earlier in the document, and the still-parked filmstrip bled through the top of the CTA. Later siblings at the same z-index win on document order. */ #portfolio-download, #contact-cta, body > footer { position: relative; z-index: 2; background-color: #140604; } .testi-bg { position: absolute; top: -20%; left: 0; right: 0; height: 140%; z-index: 0; will-change: transform; backface-visibility: hidden; } .testi-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .testi-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #1b0503 0%, rgba(27,5,3,0.62) 22%, rgba(20,4,3,0.70) 60%, #1b0503 100%), radial-gradient(120% 80% at 50% 40%, rgba(118,23,9,0.30), transparent 70%); box-shadow: inset 0 0 220px 50px rgba(0,0,0,0.55); } .testi-watermark { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); z-index: 2; font-size: min(38vw, 26rem); line-height: 1; color: rgba(229,213,197,0.06); pointer-events: none; user-select: none; } /* Wedding invitation-style love-note cards — solid card stock, gold seal, no glass */ .testi-card { position: relative; background: #FDFBF9; border: 1px solid rgba(217,160,91,0.45); border-radius: 1.4rem; padding: clamp(2.2rem, 1.8rem + 1.6vw, 2.6rem) clamp(1.35rem, 0.9rem + 2vw, 2rem) clamp(1.5rem, 1.1rem + 1.8vw, 2rem); box-shadow: 0 30px 60px -22px rgba(0,0,0,0.55); overflow: visible; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.8s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s ease, border-color 0.6s ease; } .testi-card::before { /* inset hairline — reads as double-bordered invite card */ content: ''; position: absolute; inset: 7px; border: 1px solid rgba(118,23,9,0.12); border-radius: 1rem; pointer-events: none; } .testi-card:hover { transform: translateY(-8px); border-color: rgba(217,160,91,0.85); box-shadow: 0 40px 80px -24px rgba(0,0,0,0.65); } /* Gold wax-seal badge straddling the card's top edge */ .testi-seal { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: linear-gradient(155deg, #D9A05B, #A9752F); border: 3px solid #FDFBF9; box-shadow: 0 6px 16px rgba(118,23,9,0.35); display: flex; align-items: center; justify-content: center; color: #FDFBF9; font-size: 1rem; z-index: 2; } .testi-mark { position: absolute; top: 1.2rem; right: 1.5rem; font-size: 2rem; color: rgba(118,23,9,0.15); } .testi-stars { display: flex; gap: 0.28rem; color: #C9862E; font-size: 0.9rem; margin-bottom: 1.1rem; margin-top: 0.4rem; } .testi-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: #3a1108; font-size: var(--fs-md); line-height: 1.62; margin-bottom: 1.6rem; } /* Gold diamond divider — a small mangalsutra-style flourish before the couple's names */ .testi-divider { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.2rem; } .testi-divider::before, .testi-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,160,91,0.6)); } .testi-divider::after { background: linear-gradient(90deg, rgba(217,160,91,0.6), transparent); } .testi-divider span { width: 6px; height: 6px; background: #D9A05B; transform: rotate(45deg); flex-shrink: 0; } .testi-person { display: flex; align-items: center; gap: 0.9rem; } .testi-avatar { width: 3.1rem; height: 3.1rem; border-radius: 9999px; object-fit: cover; border: 2px solid #D9A05B; box-shadow: 0 6px 16px rgba(118,23,9,0.2); flex-shrink: 0; } .testi-name { font-family: 'Cormorant Garamond', Georgia, serif; color: #761709; font-size: 1.06rem; line-height: 1.2; } .testi-meta { color: #9c6b3d; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.35rem; } @media (prefers-reduced-motion: reduce) { .testi-bg { transform: none !important; } } /* ========================================================= Contact CTA — full-width dark brand band ========================================================= */ .cta-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(85% 65% at 50% 0%, rgba(214,86,40,0.34), transparent 60%), linear-gradient(165deg, #7d1a0b 0%, #5a1106 46%, #360b05 100%); } .cta-rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 44%, rgba(229,213,197,0.06) 48%, transparent 52%), linear-gradient(128deg, transparent 62%, rgba(255,255,255,0.04) 66%, transparent 70%); } .cta-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; width: min(34vw, 22rem); height: auto; opacity: 0.06; pointer-events: none; user-select: none; } /* Fine gold dot lattice — cardstock texture behind the invitation panel */ .cta-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(229,213,197,0.10) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); } /* ---- Nepali nimto (निम्तो) invitation card ---- */ .cta-card { position: relative; z-index: 1; /* Fluid padding — a 3.5rem inset starves the copy on a 360px phone */ padding: clamp(3.5rem, 2.5rem + 4vw, 5rem) clamp(1.25rem, 0.2rem + 4.6vw, 3.5rem) clamp(2.25rem, 1.5rem + 2.5vw, 3rem); border: 1px solid rgba(217, 160, 91, 0.22); border-radius: 1.75rem; background: linear-gradient(180deg, rgba(253, 251, 249, 0.03) 0%, rgba(20, 5, 3, 0.35) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease, box-shadow 0.6s ease; } .cta-card:hover { transform: translateY(-4px); border-color: rgba(217, 160, 91, 0.45); box-shadow: 0 30px 60px rgba(118, 23, 9, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4); } .cta-card::before { /* inset hairline — double-bordered card stock */ content: ''; position: absolute; inset: 12px; border: 1px solid rgba(217, 160, 91, 0.12); border-radius: 1.25rem; pointer-events: none; transition: border-color 0.6s ease, inset 0.6s ease; } .cta-card:hover::before { border-color: rgba(217, 160, 91, 0.25); } /* Mandala halo — slow ceremonial rotation behind the seal */ .cta-mandala { position: absolute; top: -2.6rem; left: 50%; margin-left: -2.75rem; width: 5.5rem; height: 5.5rem; z-index: 1; opacity: 0.35; pointer-events: none; animation: ctaMandalaSpin 60s linear infinite; transition: opacity 0.6s ease; } .cta-card:hover .cta-mandala { opacity: 0.55; } @keyframes ctaMandalaSpin { to { transform: rotate(360deg); } } /* Kalash seal — the auspicious vessel motif printed atop classic invitation cards */ .cta-seal { position: absolute; top: -1.45rem; left: 50%; transform: translateX(-50%); width: 2.9rem; height: 2.9rem; border-radius: 9999px; z-index: 3; background: linear-gradient(135deg, #FDFBF9 0%, #D9A05B 50%, #A9752F 100%); border: 3px solid #3a0d05; box-shadow: 0 8px 24px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease; } .cta-card:hover .cta-seal { transform: translateX(-50%) scale(1.06); box-shadow: 0 10px 28px rgba(217, 160, 91, 0.3); } .cta-seal svg { width: 1.25rem; height: 1.45rem; } /* Silk tassel swinging beneath the seal */ .cta-tassel { position: absolute; top: 1.35rem; left: 50%; margin-left: -0.6rem; width: 1.2rem; height: 2.2rem; z-index: 2; pointer-events: none; transform-origin: 50% 0; animation: ctaTasselSway 4s ease-in-out infinite; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cta-card:hover .cta-tassel { transform: translateY(2px); } .cta-tassel svg { width: 100%; height: 100%; } @keyframes ctaTasselSway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } } /* Paisley mehndi corners */ .cta-paisley { position: absolute; width: 2.3rem; height: 2.3rem; opacity: 0.55; pointer-events: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cta-paisley svg { width: 100%; height: 100%; } .cta-paisley-tl { top: 1.2rem; left: 1.2rem; } .cta-paisley-tr { top: 1.2rem; right: 1.2rem; transform: scaleX(-1); } .cta-paisley-bl { bottom: 1.2rem; left: 1.2rem; transform: scaleY(-1); } .cta-paisley-br { bottom: 1.2rem; right: 1.2rem; transform: scale(-1, -1); } .cta-card:hover .cta-paisley { opacity: 0.85; } .cta-card:hover .cta-paisley-tl { transform: translate(-3px, -3px); } .cta-card:hover .cta-paisley-tr { transform: translate(3px, -3px) scaleX(-1); } .cta-card:hover .cta-paisley-bl { transform: translate(-3px, 3px) scaleY(-1); } .cta-card:hover .cta-paisley-br { transform: translate(3px, 3px) scale(-1, -1); } /* Gold-foil sweep on the key word */ .cta-foil { background: linear-gradient(100deg, #D9A05B 20%, #F7E2B0 40%, #E5A94B 55%, #D9A05B 80%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ctaFoilSweep 5.5s ease-in-out infinite; } @keyframes ctaFoilSweep { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Specific buttons animations and overrides */ .cta-btn-primary { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cta-btn-primary:hover { transform: translateY(-2px); background-color: #D9A05B !important; /* gold accent */ color: #3a0d05 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(217, 160, 91, 0.25) !important; } .cta-btn-primary:active { transform: translateY(0); } .cta-btn-secondary { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cta-btn-secondary:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, 0.06); border-color: #D9A05B !important; color: #D9A05B !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important; } .cta-btn-secondary:active { transform: translateY(0); } .cta-card:hover .cta-divider span { filter: drop-shadow(0 0 4px rgba(217, 160, 91, 0.45)); } /* Scalloped deckle edge along the card foot */ .cta-scallop { position: absolute; left: 2rem; right: 2rem; bottom: 8px; height: 6px; pointer-events: none; opacity: 0.35; background-image: radial-gradient(circle at 50% 100%, transparent 2.5px, rgba(217,160,91,0.45) 3px, transparent 3.5px); background-size: 10px 6px; background-repeat: repeat-x; transition: opacity 0.6s ease; } .cta-card:hover .cta-scallop { opacity: 0.6; } @media (max-width: 640px) { .cta-card { padding: 4rem 1.5rem 2.5rem; } .cta-card::before { inset: 8px; } .cta-paisley { width: 2.1rem; height: 2.1rem; } .cta-paisley-tl { top: 0.8rem; left: 0.8rem; } .cta-paisley-tr { top: 0.8rem; right: 0.8rem; } .cta-paisley-bl { bottom: 0.8rem; left: 0.8rem; } .cta-paisley-br { bottom: 0.8rem; right: 0.8rem; } } @media (prefers-reduced-motion: reduce) { .cta-mandala, .cta-tassel, .cta-foil { animation: none; } } /* ========================================================= Footer — light editorial ========================================================= */ /* Links: gold hairline expand from left on hover */ /* Links: gold hairline expand from left on hover */ .footer-link { position: relative; display: inline-block; color: rgba(253, 251, 249, 0.85); transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .footer-link::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: #D9A05B; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .footer-link:hover { color: #E5D5C5; } .footer-link:hover::after { transform: scaleX(1); transform-origin: left; } /* Light footer fallback if footer has bg-bglight */ footer.bg-bglight .footer-link { color: #555555; } footer.bg-bglight .footer-link:hover { color: #761709; } /* Group hover for contact items to animate text underline and scale icon synchronously */ .contact-group { display: flex; align-items: start; text-decoration: none; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .contact-group i { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; } .contact-group:hover i { transform: scale(1.15) translateY(-1px); color: #D9A05B; } .contact-group:hover .footer-link { color: #E5D5C5; } .contact-group:hover .footer-link::after { transform: scaleX(1); transform-origin: left; } /* Tagline — Cormorant italic */ .tagline-script { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.25rem; color: #761709; line-height: 1.35; display: inline-block; } /* Specific styling for social links with micro-interactions */ .footer-social-btn { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .footer-social-btn:hover { background-color: #761709; color: #FDFBF9 !important; border-color: #761709 !important; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(118, 23, 9, 0.15); } /* Back to top button styling */ .back-to-top-btn { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .back-to-top-btn:hover { background-color: #761709; color: #FDFBF9 !important; border-color: #761709 !important; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(118, 23, 9, 0.15); } /* ========================================================================== HERO — social proof strip ========================================================================== */ .hero-proof { display: flex; align-items: center; gap: clamp(0.85rem, 2vw, 1.25rem); flex-wrap: wrap; } .hero-proof-avatars { display: flex; align-items: center; } .hero-proof-avatars img { width: clamp(2rem, 4.5vw, 2.375rem); height: clamp(2rem, 4.5vw, 2.375rem); border-radius: 9999px; object-fit: cover; border: 2px solid #FDFBF9; box-shadow: 0 2px 8px rgba(26, 6, 3, 0.16); } .hero-proof-avatars img + img { margin-left: -0.7rem; } .hero-proof-divider { width: 1px; height: 26px; background: linear-gradient(to bottom, transparent, rgba(26, 26, 26, 0.16), transparent); } .hero-proof-stars { color: #C9862E; display: flex; gap: 0.15rem; } /* ========================================================================== FEATURED FILMS — editorial film cards ========================================================================== */ .films-grid { position: relative; } .film-card { position: relative; display: block; isolation: isolate; overflow: hidden; background: #170906; border-radius: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); box-shadow: 0 20px 55px -26px rgba(26, 6, 3, 0.55); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* Fluid card height — never taller than the phone screen, never squat on desktop */ height: clamp(24rem, 68vw, 30rem); } .film-card--featured { height: clamp(24rem, 72vw, 41.5rem); } .film-card--carousel { height: clamp(26rem, 50vh, 32rem) !important; } @media (min-width: 1024px) { .film-card:not(.film-card--carousel) { height: 100%; min-height: 20rem; } } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-none::-webkit-scrollbar { display: none; } /* Carousel Dot Indicators */ .films-dot { display: inline-block !important; width: 10px !important; height: 10px !important; min-height: 10px !important; max-height: 10px !important; padding: 0 !important; margin: 0 !important; border: none !important; outline: none !important; border-radius: 9999px !important; background-color: rgba(0, 0, 0, 0.18) !important; cursor: pointer; flex-shrink: 0 !important; transition: width 0.3s ease, background-color 0.3s ease; appearance: none !important; -webkit-appearance: none !important; } .films-dot:hover { background-color: rgba(118, 23, 9, 0.5) !important; } .films-dot.is-active { width: 28px !important; height: 10px !important; background-color: #761709 !important; } .film-card:hover { transform: translateY(-10px); box-shadow: 0 46px 90px -30px rgba(26, 6, 3, 0.62); } .film-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .film-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease; filter: saturate(0.96); } .film-card:hover .film-media img { transform: scale(1.09); filter: saturate(1.05); } /* Two-stage scrim: neutral at rest, brand burgundy on hover */ .film-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(9, 3, 2, 0.94) 0%, rgba(9, 3, 2, 0.55) 34%, rgba(9, 3, 2, 0.08) 68%, rgba(9, 3, 2, 0.22) 100%); transition: opacity 0.7s ease; } .film-scrim-brand { position: absolute; inset: 0; z-index: 2; opacity: 0; background: linear-gradient(to top, rgba(118, 23, 9, 0.94) 0%, rgba(118, 23, 9, 0.5) 42%, rgba(118, 23, 9, 0.05) 78%); transition: opacity 0.7s ease; } .film-card:hover .film-scrim-brand { opacity: 1; } /* Film-strip sprocket rail down the left edge */ .film-sprocket { position: absolute; top: 0; bottom: 0; left: 0; width: 16px; z-index: 3; background: rgba(9, 3, 2, 0.45); backdrop-filter: blur(2px); opacity: 0; transform: translateX(-100%); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .film-sprocket::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent 0 10px, rgba(253, 251, 249, 0.72) 10px 20px, transparent 20px 30px ); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); width: 6px; left: 5px; right: auto; border-radius: 2px; } .film-card:hover .film-sprocket { opacity: 1; transform: translateX(0); } /* Viewfinder corner ticks */ .film-frame { position: absolute; inset: clamp(0.75rem, 1.6vw, 1.25rem); z-index: 6; pointer-events: none; } .film-frame span { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(229, 213, 197, 0.55); opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .film-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; transform: translate(6px, 6px); } .film-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; transform: translate(-6px, 6px); } .film-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; transform: translate(6px, -6px); } .film-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; transform: translate(-6px, -6px); } .film-card:hover .film-frame span { opacity: 1; transform: translate(0, 0); } /* Top meta row: index + runtime pill */ .film-top { position: absolute; top: clamp(1.15rem, 2.4vw, 1.9rem); left: clamp(1.15rem, 2.4vw, 1.9rem); right: clamp(1.15rem, 2.4vw, 1.9rem); z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .film-index { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-sm); letter-spacing: 0.18em; color: rgba(253, 251, 249, 0.72); } .film-index em { font-style: italic; color: #E5D5C5; } .film-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.72rem; border-radius: 9999px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #FDFBF9; background: rgba(253, 251, 249, 0.12); border: 1px solid rgba(253, 251, 249, 0.22); backdrop-filter: blur(8px); white-space: nowrap; } .film-pill--gold { background: rgba(201, 134, 46, 0.92); border-color: rgba(229, 213, 197, 0.5); color: #1A0A05; } /* Centre play control */ .film-play { position: absolute; /* Sits above the text block, not on top of it — the copy grows from the bottom */ top: 38%; left: 50%; z-index: 30; transform: translate(-50%, -50%); width: clamp(3.75rem, 8vw, 5rem); height: clamp(3.75rem, 8vw, 5rem); display: flex; align-items: center; justify-content: center; pointer-events: none; } .film-play-ring { position: absolute; inset: 0; border-radius: 9999px; border: 1px dashed rgba(253, 251, 249, 0.35); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s ease; } .film-card:hover .film-play-ring { transform: rotate(180deg) scale(1.12); border-color: rgba(229, 213, 197, 0.75); } .film-play-core { position: relative; width: 54%; height: 54%; border-radius: 9999px; background: #FDFBF9; color: #761709; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(9, 3, 2, 0.7); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .film-card:hover .film-play-core { transform: scale(1.14); } .film-card--featured .film-play { top: 46%; } /* Bottom content block */ .film-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: clamp(1.4rem, 3vw, 2.4rem); color: #FDFBF9; transform: translateY(0); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .film-cat { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #E5D5C5; display: block; margin-bottom: 0.55rem; } .film-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-2xl); line-height: 1.1; font-weight: 400; } .film-card--featured .film-title { font-size: var(--fs-3xl); } .film-title em { font-style: italic; } .film-rule { height: 1px; width: 2.5rem; margin: 0.95rem 0 0; background: linear-gradient(to right, rgba(229, 213, 197, 0.9), rgba(229, 213, 197, 0)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .film-card:hover .film-rule { width: min(100%, 16rem); } .film-desc { font-size: var(--fs-sm); font-weight: 300; line-height: 1.65; color: rgba(253, 251, 249, 0.88); max-width: 34ch; margin-top: 0.85rem; /* Collapse cleanly instead of leaving a gap when hidden */ display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, margin-top 0.6s ease; } .film-desc > span { overflow: hidden; } .film-card:hover .film-desc { grid-template-rows: 1fr; opacity: 1; } .film-cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #FDFBF9; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.08s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; } .film-cta i { transition: transform 0.4s ease; } .film-card:hover .film-cta { opacity: 1; transform: translateY(0); } .film-card:hover .film-cta i { transform: translateX(4px); } /* Touch devices get no hover — reveal the detail permanently instead */ @media (hover: none) { .film-desc { grid-template-rows: 1fr; opacity: 1; } .film-cta { opacity: 1; transform: none; } .film-rule { width: 5rem; } .film-card:hover { transform: none; } /* Copy is permanently expanded on touch, so lift the play control further */ .film-play { top: 30%; } .film-card--featured .film-play { top: 40%; } } @media (prefers-reduced-motion: reduce) { .film-card, .film-media img, .film-play-ring, .film-play-core, .film-desc, .film-cta, .film-rule { transition: none; } } /* ========================================================================== STATS BAR — compact editorial ledger, photo-grounded (not a floating void) ========================================================================== */ .stats-band { position: relative; overflow: hidden; background: #2c0904; padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); } .stats-band::before, .stats-band::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; z-index: 3; background: linear-gradient(to right, transparent, rgba(229, 213, 197, 0.5), transparent); } .stats-band::before { top: 0; } .stats-band::after { bottom: 0; } .stats-bg { position: absolute; inset: 0; z-index: 0; } .stats-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.06); filter: saturate(0.85); } .stats-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 120% at 15% 15%, rgba(90, 17, 6, 0.55) 0%, transparent 60%), linear-gradient(115deg, rgba(20, 5, 3, 0.96) 0%, rgba(58, 13, 5, 0.93) 48%, rgba(20, 5, 3, 0.97) 100%); } .stats-watermark { position: absolute; top: 50%; right: 4%; transform: translateY(-50%); width: clamp(11rem, 22vw, 18rem); opacity: 0.05; pointer-events: none; filter: brightness(0) invert(1); z-index: 1; } /* Bordered glass panel — grounds the content instead of letting it float */ .stats-panel { position: relative; background: rgba(20, 6, 3, 0.38); border: 1px solid rgba(229, 213, 197, 0.16); border-radius: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); } .stats-vrule { width: 1px; height: 100%; min-height: 8rem; margin-inline: auto; background: linear-gradient(to bottom, transparent, rgba(229, 213, 197, 0.3), transparent); } .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem); } .stat-item { position: relative; display: flex; align-items: center; gap: 0.9rem; text-align: left; } .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(2.4rem, 2rem + 1vw, 2.85rem); height: clamp(2.4rem, 2rem + 1vw, 2.85rem); border-radius: 9999px; color: #E5D5C5; background: rgba(253, 251, 249, 0.08); border: 1px solid rgba(229, 213, 197, 0.24); font-size: 1rem; flex-shrink: 0; } .stat-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-3xl); line-height: 1; color: #FDFBF9; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.06em; font-variant-numeric: tabular-nums; } .stat-suffix { color: #E5D5C5; font-style: italic; font-size: 0.62em; } .stat-label { margin-top: 0.3rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(253, 251, 249, 0.68); line-height: 1.4; } /* ========================================================================== INNER PAGES — shared editorial components (about / team / blog / blog-single — keeps every page speaking the same visual language as the homepage instead of drifting into generic-template territory: fluid type, hairline framing, numbered index marks, real photos instead of icon-in-a-circle placeholders.) ========================================================================== */ /* --- Breadcrumb --------------------------------------------------------- */ .crumb { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(118, 23, 9, 0.55); } .crumb a { color: #761709; transition: opacity 0.25s ease; } .crumb a:hover { opacity: 0.65; } .crumb i { font-size: 0.65rem; opacity: 0.5; } .crumb span[aria-current] { color: rgba(26, 26, 26, 0.55); font-weight: 500; letter-spacing: 0.1em; text-transform: none; } /* --- Page hero ---------------------------------------------------------- Centered editorial header used by about/team/blog. A large faded serif initial sits behind the heading so the section reads as "a page", not a copy-pasted SaaS banner. */ .page-hero { position: relative; padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); overflow: hidden; } .page-hero-mark, .page-hero-logo-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(320px, 45vw); max-height: 260px; object-fit: contain; opacity: 0.022; pointer-events: none; user-select: none; z-index: 0; } .outro-watermark-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, 50vw); max-height: 280px; object-fit: contain; opacity: 0.025; pointer-events: none; user-select: none; z-index: 0; } /* :not() bumps specificity above .page-hero-mark so that container children don't get dragged back into normal flow by position:relative */ .page-hero > *:not(.page-hero-mark):not(.page-hero-logo-mark) { position: relative; z-index: 1; } /* --- Numbered principle / philosophy cards ------------------------------- Replaces the icon-in-a-colored-circle card that was copy-pasted across about.php and team.php. A ghost serif index number is the visual anchor instead — matches the "/ 01" numbering language used on the homepage service + film cards. */ .num-card { position: relative; background: #FDFBF9; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease; } .num-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(26, 6, 3, 0.22); border-color: rgba(118, 23, 9, 0.16); } .num-card-index { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-3xl); line-height: 1; color: rgba(118, 23, 9, 0.16); display: block; margin-bottom: 1rem; transition: color 0.5s ease; } .num-card:hover .num-card-index { color: rgba(118, 23, 9, 0.32); } .num-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-xl); color: #1A1A1A; margin-bottom: 0.6rem; } .num-card-desc { font-size: var(--fs-sm); font-weight: 300; line-height: 1.7; color: #666666; } .num-card-tag { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #761709; } /* --- Dossier card (leadership / founder spotlight) ---------------------- Real photo + framed caption instead of a monogram-in-a-circle. */ .dossier-card { position: relative; display: flex; align-items: stretch; gap: 0; background: #FDFBF9; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.75rem; overflow: hidden; transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .dossier-card:hover { box-shadow: 0 28px 60px -28px rgba(26, 6, 3, 0.25); transform: translateY(-4px); } .dossier-photo { position: relative; width: clamp(6.5rem, 5.5rem + 5vw, 9rem); flex-shrink: 0; overflow: hidden; } .dossier-photo img { width: 100%; height: 100%; object-fit: cover; } .dossier-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, rgba(253, 251, 249, 0.5)); } .dossier-body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); flex: 1; min-width: 0; } .dossier-role { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #761709; display: block; margin-bottom: 0.35rem; } .dossier-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-xl); color: #1A1A1A; margin-bottom: 0.5rem; } .dossier-desc { font-size: var(--fs-sm); font-weight: 300; line-height: 1.6; color: #666666; } /* --- Brand CTA band (about/blog closing banners) ------------------------- One consistent close-out band instead of each page inventing its own plain centered text block. */ .brand-cta { position: relative; overflow: hidden; border-radius: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); background: radial-gradient(90% 140% at 85% 0%, rgba(201, 134, 46, 0.16) 0%, transparent 55%), linear-gradient(135deg, #5d1207 0%, #761709 50%, #3a0d05 100%); padding: clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); text-align: center; } .brand-cta::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.025) 0, transparent 2px); opacity: 0.5; pointer-events: none; } /* --- Section label rule (reused eyebrow treatment with side rules) ------- */ .section-rule { display: inline-flex; align-items: center; gap: 0.9rem; } .section-rule span { display: block; width: 2rem; height: 1px; background: linear-gradient(to right, transparent, currentColor); } .section-rule span:last-child { background: linear-gradient(to left, transparent, currentColor); } /* --- Portfolio filters: content-type is the primary decision, theme is secondary --- */ .type-toggle { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; padding: 0.375rem; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); } .type-toggle-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 999px; border: 0; background: transparent; color: #1A1A1A; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .type-toggle-btn i { font-size: 0.95rem; } .type-toggle-btn:hover:not(.active) { background: rgba(118, 23, 9, 0.06); } .type-toggle-btn.active { background: #761709; color: #fff; box-shadow: 0 6px 16px -4px rgba(118, 23, 9, 0.45); } .type-toggle-btn.active i { color: #E5D5C5; } @media (max-width: 560px) { .type-toggle { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 1.25rem; } .type-toggle-btn { flex-direction: column; gap: 0.3rem; justify-content: center; padding: 0.7rem 0.4rem; font-size: 0.6rem; letter-spacing: 0.08em; border-radius: 1rem; text-align: center; } .type-toggle-btn i { font-size: 1.1rem; } } .theme-chip { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #666666; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .theme-chip:hover { color: #761709; border-color: rgba(118, 23, 9, 0.18); } .theme-chip.active { color: #761709; background: rgba(118, 23, 9, 0.07); border-color: rgba(118, 23, 9, 0.22); } /* Dark-hero variants — same shapes/behaviour, inverted for legibility on a dark section */ .type-toggle--dark { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); } .type-toggle--dark .type-toggle-btn { color: rgba(255, 255, 255, 0.82); } .type-toggle--dark .type-toggle-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.08); } .type-toggle--dark .type-toggle-btn.active { box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.5); } .theme-chip--dark { color: rgba(255, 255, 255, 0.55); } .theme-chip--dark:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); } .theme-chip--dark.active { color: #fff; background: rgba(118, 23, 9, 0.55); border-color: rgba(118, 23, 9, 0.75); } /* ========================================================================== PORTFOLIO STORY MEDIA POPUP & SWITCHER TOGGLE ========================================================================== */ .modal-media-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 9999px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25); position: relative; user-select: none; max-width: 100%; } .modal-tab-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.15rem; border-radius: 9999px; border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; } .modal-tab-btn i { font-size: 0.95rem; color: #E5D5C5; transition: color 0.3s ease, transform 0.3s ease; } .modal-tab-btn:hover:not(.active) { color: #ffffff; background: rgba(255, 255, 255, 0.08); } .modal-tab-btn:hover:not(.active) i { transform: scale(1.1); color: #ffffff; } .modal-tab-btn.active { background: #E5D5C5; color: #140604; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 4px 16px rgba(229, 213, 197, 0.32), 0 1px 3px rgba(0, 0, 0, 0.2); } .modal-tab-btn.active i { color: #140604 !important; } .modal-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.15rem; padding: 0 0.4rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 800; line-height: 1; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.95); transition: background 0.3s ease, color 0.3s ease; } .modal-tab-btn.active .modal-tab-badge { background: rgba(20, 6, 4, 0.16); color: #140604; } @media (max-width: 639px) { .modal-media-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 0.875rem; padding: 0.25rem; gap: 0.25rem; } .modal-tab-btn { padding: 0.55rem 0.4rem; font-size: 0.65rem; letter-spacing: 0.08em; border-radius: 0.625rem; justify-content: center; gap: 0.35rem; } .modal-tab-btn i { font-size: 0.85rem; } } .gallery-thumb-btn { outline: none; } .gallery-thumb-btn:focus-visible { box-shadow: 0 0 0 2px #E5D5C5; } /* ========================================================================== CLEAN EDITORIAL PORTFOLIO CARDS ========================================================================== */ .portfolio-card { contain: layout paint; will-change: transform; isolation: isolate; background-color: #120605; } .portfolio-card img { backface-visibility: hidden; transform: translateZ(0); } /* ========================================================================== BLOG FILTER BUTTONS ========================================================================== */ .blog-filter-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.25rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; } .blog-filter-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.16); color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } .blog-filter-btn.active { background: #E5D5C5; color: #140604; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 4px 16px rgba(229, 213, 197, 0.3); } /* --- Blog listing card --------------------------------------------------- Unlike the homepage film-card, excerpt text stays always-visible here (scanning a list needs the copy up front, not hidden behind a hover). */ .blog-card { display: flex; flex-direction: column; justify-content: space-between; background: #FDFBF9; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; overflow: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(26, 6, 3, 0.22); border-color: rgba(118, 23, 9, 0.14); } /* ========================================================================== CREATIVE LUXURY PRELOADER ========================================================================== */ .preloader-overlay { position: fixed; inset: 0; z-index: 99999; background-color: #160503; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s ease; } .preloader-overlay.is-loaded { transform: translateY(-100%); opacity: 0; pointer-events: none; } .preloader-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32rem; height: 32rem; border-radius: 50%; background: radial-gradient(circle, rgba(217, 160, 91, 0.18) 0%, rgba(118, 23, 9, 0.08) 45%, transparent 70%); filter: blur(60px); animation: preloaderPulse 3s ease-in-out infinite alternate; } @keyframes preloaderPulse { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } } .preloader-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; } .preloader-logo-ring { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; } .preloader-ring-spinner { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px stroke rgba(217, 160, 91, 0.2); border-top-color: #D9A05B; border-right-color: rgba(217, 160, 91, 0.6); animation: preloaderSpin 2s linear infinite; } @keyframes preloaderSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .preloader-ring-pulse { position: absolute; inset: -14px; border-radius: 50%; border: 1px fill rgba(217, 160, 91, 0.15); animation: ringPulse 2s ease-out infinite; } @keyframes ringPulse { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } } .preloader-logo-img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5)); animation: logoFloat 3s ease-in-out infinite alternate; } @keyframes logoFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } } .preloader-brand-title { font-size: 1.75rem; font-weight: 600; letter-spacing: 0.35em; color: #FDFBF9; margin-bottom: 0.25rem; display: block; } .preloader-tagline { color: #D9A05B; font-size: 1.5rem; opacity: 0.95; margin-bottom: 2rem; } .preloader-progress-wrap { width: 240px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .preloader-bar { width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; position: relative; } .preloader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #761709, #D9A05B); border-radius: 999px; transition: width 0.15s ease-out; } .preloader-percent { font-family: monospace; font-size: 0.75rem; letter-spacing: 0.2em; color: rgba(253, 251, 249, 0.6); } /* Rich Text Content Styling */ .rich-text-content p { color: #666666; text-wrap: pretty; margin-bottom: 1.75rem; } .rich-text-content p:first-of-type { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lg); color: rgba(26, 26, 26, 0.9); line-height: 1.5; font-weight: 400; } .rich-text-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-2xl); line-height: 1.14; color: #1A1A1A; font-weight: 700; margin-top: 3rem; margin-bottom: 0.5rem; } .rich-text-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-xl); line-height: 1.2; color: #1A1A1A; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.5rem; } .rich-text-content h4 { font-size: var(--fs-lg); color: #1A1A1A; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; } .rich-text-content blockquote { margin: 2.5rem 0; padding: 1.75rem; border-radius: 1.5rem; background-color: rgba(118, 23, 9, 0.04); border-left: 4px solid #761709; position: relative; } @media (min-width: 640px) { .rich-text-content blockquote { padding: 2.25rem; } } .rich-text-content blockquote p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-lg); color: #761709; margin-bottom: 0.75rem; line-height: 1.5; } @media (min-width: 768px) { .rich-text-content blockquote p { font-size: var(--fs-xl); } } .rich-text-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.75rem; color: #666666; } .rich-text-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.75rem; color: #666666; } .rich-text-content li { margin-bottom: 0.5rem; } .rich-text-content img { border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); margin: 2.5rem 0; width: 100%; } .rich-text-content a { color: #761709; text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s; } .rich-text-content a:hover { color: #5a1106; } /* ========================================================= OUR APPROACH — "Depth of Field" Four scroll planes. JS only writes the custom properties below; every transform is composed here, so hover states and the per-frame parallax writes never overwrite one another. --ap-p signed travel through the viewport, -1 .. 1 --ap-away |--ap-p|, drives the rack-focus blur --ap-rush smoothed scroll speed 0 .. 1 --ap-mx/my pointer offset -1 .. 1 (fine pointers only) All default to 0, so with JS off or reduced-motion on the section renders as a still, fully composed layout. ========================================================= */ .ap-section { --ap-p: 0; --ap-away: 0; --ap-rush: 0; --ap-mx: 0; --ap-my: 0; /* travel amplitudes — retuned per breakpoint below */ --ap-range: 1.5rem; /* frame drift */ --ap-inner: 1rem; /* counter-drift of the photo inside its frame */ --ap-depth-bg: 2.5rem;/* background plane */ --ap-tilt: 0px; /* pointer follow */ } @media (min-width: 640px) { .ap-section { --ap-range: 2.75rem; --ap-inner: 1.75rem; --ap-depth-bg: 4rem; } } @media (min-width: 1024px) { .ap-section { --ap-range: 4rem; --ap-inner: 2.5rem; --ap-depth-bg: 6rem; --ap-tilt: 7px; } } /* ---- Plane 0: the deepest layer, lags the scroll the most ---- */ .ap-deep { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; transform: translate3d(0, calc(var(--ap-p) * var(--ap-depth-bg)), 0); will-change: transform; } .ap-glow { position: absolute; border-radius: 50%; filter: blur(40px); transform: translateZ(0); backface-visibility: hidden; pointer-events: none; } .ap-glow--accent { top: 42%; right: -10rem; width: 24rem; height: 24rem; background: radial-gradient(circle, rgba(229, 213, 197, 0.16) 0%, transparent 70%); } .ap-glow--ember { bottom: -5rem; left: -5rem; width: 20rem; height: 20rem; background: radial-gradient(circle, rgba(118, 23, 9, 0.32) 0%, transparent 70%); } .ap-ghost { position: absolute; top: 50%; left: 50%; width: min(58vh, 34rem); max-width: 70%; object-fit: contain; opacity: 0.035; transform: translate(-50%, -50%) translate3d(0, calc(var(--ap-p) * var(--ap-depth-bg) * 0.6), 0); user-select: none; } /* ---- Layout ---- */ .ap-layout { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; } @media (min-width: 1024px) { .ap-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 5rem); } } @media (min-width: 1280px) { .ap-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } } /* ---- Plane 3: copy sits nearest the viewer and drifts against the frames. .reveal already owns .ap-copy's transform, so the drift lives one level in, with the eyebrow and headline stacked slightly ahead of the body copy. ---- */ .ap-copy-inner { transform: translate3d(0, calc(var(--ap-p) * var(--ap-range) * -0.16), 0); } .ap-copy-inner .ap-eyebrow { transform: translate3d(0, calc(var(--ap-p) * var(--ap-range) * -0.12), 0); } .ap-copy-inner .ap-head { transform: translate3d(0, calc(var(--ap-p) * var(--ap-range) * -0.06), 0); } /* ---- Planes 1 + 2: the frames ---- */ .ap-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2.2vw, 1.5rem); } @media (min-width: 640px) { .ap-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); /* an explicit row track keeps the stage height definite, so the percentage heights on the staggered cards below can resolve */ grid-template-rows: minmax(0, 1fr); align-items: center; height: clamp(380px, 44vw, 540px); } } /* Plane 1 — the frame itself. Neighbours drift in OPPOSITE directions, which is what actually sells the depth; one shared direction only ever reads as lag. */ .ap-card { --ap-depth: 1; position: relative; margin: 0; min-width: 0; transform: translate3d( calc(var(--ap-mx) * var(--ap-tilt) * var(--ap-depth)), calc(var(--ap-p) * var(--ap-range) * var(--ap-depth) * -1 + var(--ap-my) * var(--ap-tilt) * var(--ap-depth)), 0 ); will-change: transform; } .ap-card--1 { --ap-depth: 0.9; } .ap-card--2 { --ap-depth: -0.55; } .ap-card--3 { --ap-depth: 0.75; } /* Mobile stack: third frame runs full width beneath the pair */ .ap-card--1, .ap-card--2 { aspect-ratio: 3 / 4; } .ap-card--3 { grid-column: span 2; aspect-ratio: 16 / 10; } @media (min-width: 640px) { .ap-card { aspect-ratio: auto; } .ap-card--1 { height: 76%; align-self: start; } .ap-card--2 { height: 100%; align-self: center; } .ap-card--3 { grid-column: auto; height: 84%; align-self: end; } } /* The frame owns hover — kept on its own element so the transition never smears the per-frame parallax transform written to .ap-card. */ .ap-frame { position: relative; height: 100%; border-radius: 1rem; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease; box-shadow: 0 24px 55px -25px rgba(0, 0, 0, 0.9); } @media (min-width: 640px) { .ap-frame { border-radius: 1.25rem; } } .ap-media { position: relative; height: 100%; overflow: hidden; border-radius: inherit; background: #1b0503; } /* Plane 2 — the photograph counter-drifts inside its own frame. Oversized so the extra travel plus the rush stretch can never expose an edge. */ .ap-shift { position: absolute; /* overhangs on all four sides: headroom for the drift, and it keeps the rack-focus blur from fringing at the edges of the crop */ left: -4%; right: -4%; top: -13%; height: 126%; transform: translate3d(0, calc(var(--ap-p) * var(--ap-inner) * var(--ap-depth)), 0) scaleY(calc(1 + var(--ap-rush) * 0.03)); will-change: transform; } .ap-shift img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease; } /* High-performance image rendering on scroll: hardware composited */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .ap-shift img { transform: translateZ(0); backface-visibility: hidden; } } /* Projector rake — a band of warm light travelling down the photo as the section passes, brightening when the page is scrolled fast. */ .ap-sweep { position: absolute; left: -25%; right: -25%; top: -60%; height: 55%; pointer-events: none; mix-blend-mode: screen; filter: blur(16px); background: linear-gradient( to bottom, transparent 0%, rgba(255, 213, 160, 0.16) 42%, rgba(255, 244, 228, 0.26) 55%, transparent 100% ); opacity: calc(0.4 + var(--ap-rush) * 0.6); transform: translate3d(0, calc((var(--ap-p) + 1) * 165%), 0) rotate(-4deg); will-change: transform, opacity; } /* Inner ring + floor vignette so the frame reads as glass, not a flat crop */ .ap-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow 0.6s ease; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -70px 90px -45px rgba(12, 3, 2, 0.92); } /* Frame number, film-slate style */ .ap-num { position: absolute; left: 0.85rem; bottom: 0.7rem; z-index: 2; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.3em; color: rgba(229, 213, 197, 0.55); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); transition: color 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .ap-frame:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.95); } .ap-frame:hover .ap-shift img { transform: scale(1.06); } .ap-frame:hover .ap-edge { box-shadow: inset 0 0 0 1px rgba(229, 213, 197, 0.45), inset 0 -70px 90px -45px rgba(12, 3, 2, 0.92); } .ap-frame:hover .ap-num { color: rgba(229, 213, 197, 0.95); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .ap-deep, .ap-card, .ap-shift, .ap-copy-inner, .ap-copy-inner .ap-eyebrow, .ap-copy-inner .ap-head { transform: none; } .ap-ghost { transform: translate(-50%, -50%); } .ap-shift img { filter: none; } .ap-sweep { display: none; } } /* ========================================================= Scroll-bound video portal — the projection room JS writes these on #scroll-video-sticky; everything below composes from them, so no rule here ever fights a per-frame style write. --vp-open 0 framed .. 1 full-bleed (eased) --vp-p scrub progress 0 .. 1 --vp-exit 0 .. 1 dissolve into the outro --vp-hud 0 .. 1 read-out visibility ========================================================= */ #scroll-video-sticky { --vp-open: 0; --vp-p: 0; --vp-exit: 0; --vp-hud: 0; } /* ---- Backdrop: a warm, lit room rather than a flat black plate ---- */ #video-stage { background: radial-gradient(120% 80% at 50% 100%, rgba(118, 23, 9, 0.30) 0%, rgba(18, 5, 4, 0) 62%), radial-gradient(100% 70% at 50% -10%, #4a1008 0%, #2a0805 42%, #120504 78%); overflow: hidden; } /* soft halo behind the frame, brightest while the portal is still closed */ .vs-halo { position: absolute; top: 50%; left: 50%; width: min(150vw, 1500px); height: min(120vh, 1000px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217, 160, 91, 0.22) 0%, rgba(118, 23, 9, 0.20) 42%, rgba(18, 5, 4, 0) 72%); filter: blur(40px); opacity: calc(0.45 + (1 - var(--vp-open)) * 0.55); } /* projector beam raking in from the left */ .vs-beam { position: absolute; top: 50%; left: -8%; width: 70%; height: clamp(300px, 60vh, 620px); transform: translateY(-50%); background: linear-gradient(94deg, rgba(255, 214, 160, 0.16) 0%, rgba(255, 196, 130, 0.05) 52%, transparent 84%); filter: blur(40px); mix-blend-mode: screen; opacity: calc(0.25 + (1 - var(--vp-open)) * 0.75); } .vs-mote { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 190, 0.9), transparent 70%); animation: vsDrift 17s ease-in-out infinite; opacity: calc(1 - var(--vp-open) * 0.7); } .vs-mote-1 { width: 5px; height: 5px; top: 32%; left: 17%; } .vs-mote-2 { width: 3px; height: 3px; top: 62%; left: 27%; animation-delay: -5s; } .vs-mote-3 { width: 6px; height: 6px; top: 44%; left: 79%; animation-delay: -9.5s; } .vs-mote-4 { width: 4px; height: 4px; top: 71%; left: 68%; animation-delay: -13s; } @keyframes vsDrift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.18; } 50% { transform: translate3d(26px, -38px, 0); opacity: 0.7; } } .vs-grain { position: absolute; inset: 0; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } .vs-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 220px 60px rgba(10, 3, 2, 0.75); } /* ---- Furniture on the footage itself ---- */ /* light leak sweeping the footage as it scrubs */ .vp-leak { position: absolute; z-index: 2; top: -40%; bottom: -40%; width: 45%; left: calc(var(--vp-p) * 145% - 45%); background: linear-gradient(100deg, transparent 0%, rgba(255, 196, 132, 0.10) 38%, rgba(255, 238, 214, 0.16) 52%, transparent 92%); filter: blur(30px); mix-blend-mode: screen; pointer-events: none; } .vp-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.45; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"); } /* vignette closes down while framed, lifts as the portal goes full-bleed */ .vp-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(0.35 + (1 - var(--vp-open)) * 0.65); box-shadow: inset 0 0 160px 30px rgba(8, 2, 2, 0.8); } /* ---- Camera framing marks, sized to the framed box and fading as it opens ---- Width/height are interpolated instead of scaled, so the hairlines stay crisp and never inherit the container's non-uniform 0.85 x 0.75 squash. */ #video-frame { position: absolute; z-index: 20; top: 50%; left: 50%; /* vw/vh, not %, so the marks track #video-container's w-screen/h-screen box exactly — percentages of the sticky would be short by the scrollbar width */ width: calc(85vw + var(--vp-open) * 15vw); height: calc(75vh + var(--vp-open) * 25vh); transform: translate(-50%, -50%); pointer-events: none; opacity: calc((1 - var(--vp-open)) * (1 - var(--vp-exit))); } /* square L-brackets floating just outside the rounded frame, the way camera framing marks sit — no radius to keep in sync with the morphing corner */ .vf-corner { position: absolute; width: clamp(18px, 2.2vw, 30px); height: clamp(18px, 2.2vw, 30px); border: 1px solid rgba(217, 160, 91, 0.75); } .vf-corner--tl { top: -12px; left: -12px; border-right: 0; border-bottom: 0; } .vf-corner--tr { top: -12px; right: -12px; border-left: 0; border-bottom: 0; } .vf-corner--bl { bottom: -12px; left: -12px; border-right: 0; border-top: 0; } .vf-corner--br { bottom: -12px; right: -12px; border-left: 0; border-top: 0; } /* ---- Bottom read-out: live timecode against the scrub position ---- */ #video-hud { position: absolute; z-index: 20; left: 50%; bottom: clamp(1.75rem, 5vh, 3rem); transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; opacity: var(--vp-hud); } #video-hud > * { grid-area: 1 / 1; } .vp-scrub { display: inline-flex; align-items: center; gap: 0.9rem; } .vp-tc { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.18em; color: rgba(217, 160, 91, 0.9); font-variant-numeric: tabular-nums; white-space: nowrap; } .vp-rail { position: relative; display: block; width: min(42vw, 460px); height: 2px; border-radius: 2px; background: rgba(253, 251, 249, 0.18); overflow: visible; } .vp-rail-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--vp-p) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(217, 160, 91, 0.55), #D9A05B); } .vp-rail-fill::after { content: ''; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #D9A05B; box-shadow: 0 0 12px rgba(217, 160, 91, 0.85); } @media (prefers-reduced-motion: reduce) { .vs-mote { animation: none; } #video-frame, #video-hud { opacity: 0; } .vp-leak { display: none; } } /* ========================================================= FROM MOMENTS TO MASTERPIECES — pinned horizontal rail At >=1024px the section is pinned and vertical scroll drives the rail sideways, three cards in view. Below that it degrades to a native snap-scrolling strip and every transform here is neutralised. --svc-x rail offset in px (JS) --svc-p travel progress 0 .. 1 (JS) --svc-near per-cell proximity to the centre of the viewport, 0 .. 1 (JS) ========================================================= */ .svc-section { --svc-x: 0px; --svc-p: 0; --svc-gap: 1.5rem; } .svc-viewport { position: relative; /* below the pin breakpoint this is an ordinary snap-scrolling strip */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; } .svc-viewport::-webkit-scrollbar { display: none; } .svc-rail { display: flex; gap: var(--svc-gap); align-items: flex-start; } .svc-cell { --svc-near: 1; flex: none; width: min(78vw, 21rem); scroll-snap-align: center; } .svc-cell > .svc-card { display: block; width: 100%; } /* ---- Pinned mode ---- */ @media (min-width: 1024px) { .svc-section { --svc-gap: 2rem; /* the stage owns the vertical rhythm once the section height is JS-driven, otherwise section padding would eat into the pin */ padding-top: 0; padding-bottom: 0; } .svc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.5rem, 7vh, 4.5rem); } .svc-viewport { overflow: hidden; scroll-snap-type: none; } .svc-rail { transform: translate3d(var(--svc-x), 0, 0); will-change: transform; } /* exactly three across, gaps included */ .svc-cell { width: calc((100% - 2 * var(--svc-gap)) / 3); /* the centred card stands slightly proud of its neighbours — the depth cue is what stops six equal cards reading as a flat conveyor */ transform: translate3d(0, calc(var(--svc-near) * -10px), 0) scale(calc(0.965 + var(--svc-near) * 0.035)); opacity: calc(0.74 + var(--svc-near) * 0.26); will-change: transform, opacity; } } /* ---- Travel read-out ---- */ .svc-progress { display: flex; align-items: center; gap: 1.1rem; justify-content: center; margin-top: clamp(1.5rem, 3.5vh, 2.5rem); } .svc-count { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.24em; color: rgba(229, 213, 197, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap; } .svc-count b { color: #E5D5C5; font-weight: 700; } .svc-count i { font-style: normal; opacity: 0.45; margin: 0 0.35em; } .svc-track-rail { position: relative; display: block; width: min(38vw, 380px); height: 2px; border-radius: 2px; background: rgba(253, 251, 249, 0.14); } .svc-track-fill { position: absolute; inset: 0 auto 0 0; width: calc(6% + var(--svc-p) * 94%); border-radius: inherit; background: linear-gradient(90deg, rgba(229, 213, 197, 0.45), #E5D5C5); } /* ---- Anything that is not the pinned desktop rail runs flat ---- */ @media (max-width: 1023.98px) { .svc-rail { transform: none; } .svc-cell { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .svc-rail { transform: none !important; } .svc-cell { transform: none !important; opacity: 1 !important; } .svc-viewport { overflow-x: auto; scroll-snap-type: x mandatory; } .svc-stage { position: static; height: auto; padding-block: 0; } } /* ========================================================= Dark panels — Featured Films + Why Fairy Tales With these two converted the whole page runs dark, so the risk is one undifferentiated slab. Each panel therefore gets its own tone and its own light, and they alternate against the #140604 sections between them: about #140604 -> screening #0c0403 -> services #140604 services #140604 -> chamber #200a07 -> reel #1b0503 deep, mid, lifted — the eye still reads separate rooms. ========================================================= */ .dark-panel { color: #FDFBF9; isolation: isolate; } .dark-panel--screening { background: radial-gradient(115% 70% at 50% 0%, #230906 0%, #150605 42%, #0c0403 100%); } .dark-panel--chamber { background: radial-gradient(100% 75% at 50% 50%, #2c0d09 0%, #200a07 46%, #170605 100%); } /* gold thread along the top edge, fading out at both ends */ .dp-thread { position: absolute; top: 0; left: 10%; right: 10%; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(217, 160, 91, 0.55) 30%, rgba(229, 213, 197, 0.7) 50%, rgba(217, 160, 91, 0.55) 70%, transparent); } /* screening room: a projector wash falling from directly overhead */ .dp-spot { position: absolute; top: -18%; left: 50%; transform: translateX(-50%); width: min(140vw, 1500px); height: min(80vh, 780px); z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(217, 160, 91, 0.16) 0%, rgba(118, 23, 9, 0.16) 42%, transparent 72%); filter: blur(60px); } .dp-ember { position: absolute; right: -12rem; bottom: -8rem; width: 34rem; height: 34rem; z-index: 0; pointer-events: none; border-radius: 50%; background: rgba(118, 23, 9, 0.35); filter: blur(130px); } /* warm chamber: light from the middle, so the three pillars sit in a pool */ .dp-aura { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: min(130vw, 1400px); height: min(95vh, 900px); z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(229, 213, 197, 0.13) 0%, rgba(118, 23, 9, 0.22) 40%, transparent 70%); filter: blur(70px); } .dp-grain { position: absolute; inset: 0; z-index: 1; opacity: 0.5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23d)' opacity='0.05'/%3E%3C/svg%3E"); } .dp-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 240px 70px rgba(6, 2, 2, 0.6); } /* Plate numerals on the three pillars, matching the service cards' numbering */ .pillar-num { position: absolute; top: -0.35em; right: 1.35rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(3rem, 5vw, 4.25rem); line-height: 1; font-weight: 500; color: rgba(229, 213, 197, 0.16); pointer-events: none; transition: color 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .group:hover .pillar-num { color: rgba(229, 213, 197, 0.45); transform: translateY(-5px); } /* The films carousel now runs on the darkest panel: its cards were built for a cream backdrop, so lift their edge just enough to separate from the ground. */ .dark-panel--screening .film-card { box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.95); } /* ========================================================= Reserve Your Date — interactive basket CTA (about page) Couples assemble their coverage on the left; it collects into the panel on the right, which hands the whole selection to /contact as query params the form reads back. Replaces a heading + single button. ========================================================= */ .rsv { text-align: left; } .rsv > h2, .rsv > p { text-align: center; } /* .tagline-script is display:inline-block globally, so text-align:center on the element only centers text WITHIN its own box — the box's position on the line is controlled by the PARENT's text-align, which .rsv sets to left. Forcing it block-level here lets it span the line so center actually centers the box. */ .rsv > .tagline-script { display: block; text-align: center; } .rsv-grid { position: relative; z-index: 10; display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); } @media (min-width: 900px) { .rsv-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } } /* ---- Labels ---- */ .rsv-label { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(253, 251, 249, 0.75); margin-bottom: 1rem; } .rsv-label--when { margin-top: clamp(1.5rem, 3vw, 2.25rem); } .rsv-step { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; font-style: italic; letter-spacing: 0; color: #E5D5C5; opacity: 0.8; } /* ---- Coverage options ---- */ .rsv-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.7rem; } .rsv-opt { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.9rem 0.95rem; border-radius: 0.9rem; text-align: left; cursor: pointer; color: #FDFBF9; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .rsv-opt:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(229, 213, 197, 0.45); } .rsv-opt:focus-visible { outline: 2px solid #E5D5C5; outline-offset: 3px; } .rsv-opt-icon { font-size: 1.15rem; color: #E5D5C5; flex: none; } .rsv-opt-name { flex: 1; min-width: 0; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; } .rsv-opt-mark { flex: none; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.3); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, color 0.35s ease; } /* chosen */ .rsv-opt[aria-pressed="true"] { background: rgba(229, 213, 197, 0.16); border-color: #E5D5C5; } .rsv-opt[aria-pressed="true"] .rsv-opt-mark { background: #E5D5C5; color: #4a1008; border-color: #E5D5C5; transform: rotate(135deg); } /* ---- Date picker: native input, dark-themed ---- */ .rsv-date { position: relative; display: flex; align-items: center; } .rsv-date-icon { position: absolute; left: 1rem; font-size: 1.05rem; color: #E5D5C5; pointer-events: none; } .rsv-date-input { width: 100%; padding: 0.9rem 1rem 0.9rem 2.75rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #FDFBF9; font-family: inherit; font-size: var(--fs-xs); font-weight: 600; color-scheme: dark; /* the native calendar popover follows the dark theme */ transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .rsv-date-input:hover { background: rgba(255, 255, 255, 0.1); } .rsv-date-input:focus { outline: none; border-color: #E5D5C5; background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 4px rgba(229, 213, 197, 0.16); } .rsv-date-input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); cursor: pointer; opacity: 0.85; } .rsv-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* ---- The basket ---- */ .rsv-basket { display: flex; flex-direction: column; padding: clamp(1.25rem, 2vw, 1.6rem); border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(20, 5, 3, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9); } @media (min-width: 900px) { .rsv-basket { position: sticky; top: 7rem; } } .rsv-basket-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .rsv-basket-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-xl); font-weight: 500; color: #FDFBF9; } .rsv-count { min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; color: #4a1008; background: #E5D5C5; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .rsv-count.is-bumped { transform: scale(1.28); } .rsv-body { padding: 1rem 0 0.35rem; min-height: 7.5rem; } .rsv-empty { font-size: var(--fs-xs); font-weight: 300; line-height: 1.6; color: rgba(253, 251, 249, 0.55); } .rsv-list { display: flex; flex-direction: column; gap: 0.45rem; } .rsv-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.25rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); animation: rsvIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes rsvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rsv-item-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; font-style: italic; color: rgba(229, 213, 197, 0.7); flex: none; } .rsv-item-name { flex: 1; min-width: 0; font-size: var(--fs-xs); font-weight: 500; color: #FDFBF9; } .rsv-item-x { flex: none; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; cursor: pointer; color: rgba(253, 251, 249, 0.55); border: 1px solid transparent; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .rsv-item-x:hover { color: #FDFBF9; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); } .rsv-item-x:focus-visible { outline: 2px solid #E5D5C5; outline-offset: 2px; } .rsv-whenout { margin-top: 0.85rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #E5D5C5; } .rsv-go { margin-top: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 1rem 1.5rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #761709; background: #FDFBF9; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8); transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .rsv-go:hover { background: #fff; transform: translateY(-2px); } .rsv-go:focus-visible { outline: 2px solid #E5D5C5; outline-offset: 3px; } .rsv-go-mark { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; color: #FDFBF9; background: #761709; transition: transform 0.35s ease; } .rsv-go:hover .rsv-go-mark { transform: translateX(3px); } .rsv-note { margin-top: 0.8rem; text-align: center; font-size: 0.6875rem; font-weight: 300; color: rgba(253, 251, 249, 0.45); } @media (prefers-reduced-motion: reduce) { .rsv-item { animation: none; } .rsv-count.is-bumped { transform: none; } .rsv-go:hover { transform: none; } .rsv-opt[aria-pressed="true"] .rsv-opt-mark { transform: none; } } /* ========================================================= Contact form — recap card + interactive field system Mirrors the about-page basket's visual language (numbered chips, pill toggles, warm focus glow) so arriving here from "Reserve Your Date" reads as one continuous flow rather than a handoff to a generic form. ========================================================= */ /* ---- Recap: what carried over from the basket ---- */ .ct-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 1rem 1.25rem; border-radius: 1.1rem; background: rgba(118, 23, 9, 0.05); border: 1px solid rgba(118, 23, 9, 0.16); } .ct-recap-head { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #761709; } .ct-recap-head i { font-size: 1rem; } .ct-recap-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ct-recap-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; color: #1A1A1A; background: #fff; border: 1px solid rgba(118, 23, 9, 0.2); } .ct-recap-chip--date { color: #761709; border-color: #761709; } .ct-recap-clear { margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #761709; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .ct-recap-clear:hover { color: #5a1106; } /* ---- Field system: icon-prefixed, warm focus ring ---- */ .ct-label { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1A1A1A; margin-bottom: 0.6rem; } .ct-req { width: 5px; height: 5px; border-radius: 50%; background: #761709; display: inline-block; } .ct-field { position: relative; } .ct-field-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1rem; color: rgba(26, 26, 26, 0.35); pointer-events: none; transition: color 0.3s ease; } .ct-field:focus-within .ct-field-icon { color: #761709; } .ct-input { width: 100%; padding: 0.95rem 1rem 0.95rem 2.75rem; border-radius: 1rem; background: #FDFBF9; border: 1px solid rgba(0, 0, 0, 0.1); font-size: var(--fs-xs); font-weight: 500; color: #1A1A1A; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .ct-input::placeholder { color: rgba(26, 26, 26, 0.35); } .ct-input:focus { outline: none; border-color: #761709; background: #fff; box-shadow: 0 0 0 4px rgba(118, 23, 9, 0.1); } .ct-textarea { padding-left: 1rem; resize: vertical; min-height: 8.5rem; line-height: 1.6; } /* ---- Coverage picker: multi-select pills (checkboxes underneath) ---- */ .ct-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 0.65rem; } .ct-svc-opt { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.9rem; border-radius: 0.9rem; border: 1px solid rgba(0, 0, 0, 0.1); background: #FDFBF9; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease; } .ct-svc-opt:hover { border-color: rgba(118, 23, 9, 0.4); } .ct-svc-opt:has(.ct-svc-input:focus-visible) { outline: 2px solid #761709; outline-offset: 2px; } .ct-svc-icon { font-size: 1.05rem; color: #761709; flex: none; } .ct-svc-name { flex: 1; min-width: 0; font-size: var(--fs-2xs); font-weight: 600; color: #1A1A1A; line-height: 1.3; } .ct-svc-mark { flex: none; width: 1.15rem; height: 1.15rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.6rem; color: transparent; border: 1px solid rgba(0, 0, 0, 0.18); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .ct-svc-opt.is-checked { border-color: #761709; background: rgba(118, 23, 9, 0.06); } .ct-svc-opt.is-checked .ct-svc-mark { background: #761709; border-color: #761709; color: #fff; } /* ========================================================================== PORTFOLIO & LOOKBOOK DOWNLOAD SECTION Clean, spacious luxury editorial edition with soft ambient lighting, refined hardcover magazine mockup, and subtle gold accents. ========================================================================== */ .lookbook-section { position: relative; z-index: 2; background-color: #140604; background: radial-gradient(circle at 75% 30%, #1e0906 0%, #140604 55%, #0d0302 100%); color: #ffffff; } .lookbook-stage { perspective: 1200px; } .lookbook-main-cover { position: relative; background: #180705; box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(229, 213, 197, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .lookbook-main-cover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 40px 85px -15px rgba(0, 0, 0, 0.98), 0 0 0 1px rgba(229, 213, 197, 0.45); } .lookbook-spine-effect { position: absolute; top: 0; bottom: 0; left: 0; width: 2.25rem; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0.07) 35%, rgba(0,0,0,0.45) 100%); z-index: 10; pointer-events: none; border-right: 1px solid rgba(255, 255, 255, 0.08); } .lookbook-download-btn { position: relative; overflow: hidden; box-shadow: 0 10px 30px -5px rgba(118, 23, 9, 0.6), 0 0 0 1px rgba(229, 213, 197, 0.2); } .lookbook-download-btn::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: rotate(25deg); animation: lookbookBtnShine 4.5s infinite; } @keyframes lookbookBtnShine { 0%, 75% { left: -60%; } 100% { left: 140%; } }