@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cinzel:wght@400;500;600;700&display=swap'); :root { --brand-orange: #E66A17; --menu-bg: #9C5A33; --text-dark: #333333; --footer-dark: #070504; --gold-primary: #cda250; --gold-light: #f6e6cd; --gold-dark: #96702d; --gold-gradient: linear-gradient(135deg, #f6e6cd 0%, #cda250 50%, #96702d 100%); /* Arabian Background Patterns & Ambient Glow Gradients */ --arabian-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 0 C75 15, 75 30, 60 45 C45 30, 45 15, 60 0 M60 45 C70 55, 70 65, 60 75 C50 65, 50 55, 60 45 M60 75 C75 90, 75 105, 60 120 C45 105, 45 90, 60 75 M0 60 C15 75, 30 75, 45 60 C30 45, 15 45, 0 60 M75 60 C90 75, 105 75, 120 60 C105 45, 90 45, 75 60 M60 15 C65 25, 75 35, 85 30 C75 25, 65 15, 60 15 M60 15 C55 25, 45 35, 35 30 C45 25, 55 15, 60 15 M60 105 C65 95, 75 85, 85 90 C75 95, 65 105, 60 105 M60 105 C55 95, 45 85, 35 90 C45 95, 55 105, 60 105 M15 30 C25 35, 35 45, 30 55 C25 45, 15 35, 15 30 M105 30 C95 35, 85 45, 90 55 C95 45, 105 35, 105 30 M15 90 C25 85, 35 75, 30 65 C25 75, 15 85, 15 90 M105 90 C95 85, 85 75, 90 65 C95 75, 105 85, 105 90' fill='%23cda250' fill-opacity='0.02' stroke='%23cda250' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"); --bg-green-section: #050805; --bg-brown-section: #0d0603; --bg-green-pattern: radial-gradient(circle at 50% 30%, rgba(26, 43, 26, 0.55) 0%, var(--bg-green-section) 80%), var(--arabian-pattern); --bg-brown-pattern: radial-gradient(circle at 50% 30%, rgba(46, 26, 18, 0.55) 0%, var(--bg-brown-section) 80%), var(--arabian-pattern); } .amiri-font { font-family: 'Amiri', serif; } .text-light-fade { color: rgba(255, 255, 255, 0.75) !important; } html { margin: 0; padding: 0; background-color: #000; /* Clip horizontal overflow at the root too (not just body). 'clip' keeps vertical scroll, sticky, and ScrollTrigger pinning fully intact, while reliably stopping side-scroll on engines that don't propagate body's overflow to the viewport. */ overflow-x: clip; } body { margin: 0; padding: 0; font-family: 'Manrope', sans-serif; /* clip (not hidden) hides horizontal overflow WITHOUT turning into a scroll container, which would otherwise fight ScrollTrigger's pin + Lenis. */ overflow-x: clip; background-color: #000; } /* --- SIMPLE PRELOADER --- */ #preloader { position: fixed; inset: 0; background: #000000; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: all; } .preloader-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; } .preloader-title { margin: 0; font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.5rem; letter-spacing: 6px; text-indent: 6px; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-primary); } .preloader-info { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 200px; } .preloader-progress-wrapper { width: 100%; height: 2px; background: rgba(205, 162, 80, 0.1); position: relative; overflow: hidden; } .preloader-progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #cda250; } .preloader-number { font-family: 'Cinzel', serif; color: #cda250; font-size: 1rem; font-weight: 600; } /* --- 3D HERO SECTION --- */ #hero-3d-sequence { position: relative; width: 100%; height: 100vh; z-index: 10; overflow: hidden; will-change: opacity; contain: layout style; opacity: 0; } #webgl-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: none; transform: translate3d(0, 0, 0); /* Ensure canvas is on own GPU compositor layer */ } .ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; /* Let clicks pass to canvas if needed */ } .scroll-indicator { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 15; transition: opacity 0.5s ease; } .scroll-text { font-family: 'Manrope', sans-serif; color: #cda250; /* Luxury gold tone */ font-size: 0.75rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; opacity: 0.85; } .scroll-line-container { width: 1px; height: 50px; background: rgba(205, 162, 80, 0.15); position: relative; overflow: hidden; } .scroll-line { width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #cda250, transparent); position: absolute; top: -100%; left: 0; animation: scrollSlide 2.0s infinite cubic-bezier(0.15, 0.85, 0.35, 1); } @keyframes scrollSlide { 0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; } } /* --- TRANSITION SCREEN (Portal Interior) --- */ #transition-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(31, 16, 11, 0.45) 0%, rgba(10, 5, 3, 0.85) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 20; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; will-change: opacity; transform: translate3d(0, 0, 0); /* Force GPU compositing layer */ contain: layout style; } .portal-content { text-align: center; max-width: 750px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; } .portal-tag { font-family: 'Manrope', sans-serif; color: #cda250; /* Saffron gold */ font-size: 0.8rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; opacity: 0; transform: translate3d(0, 15px, 0); /* GPU-composited initial offset */ will-change: transform, opacity; } .portal-text { color: #F4ECE1; font-family: 'Cinzel', serif; font-size: 3.0rem; text-align: center; font-weight: 600; text-shadow: 0 4px 20px rgba(0,0,0,0.5); letter-spacing: 2px; margin: 0; opacity: 0; transform: translate3d(0, 15px, 0); /* GPU-composited initial offset */ will-change: transform, opacity; } .portal-subtext { color: #b5a79e; font-family: 'Manrope', sans-serif; font-size: 1.05rem; font-weight: 300; line-height: 1.8; text-align: center; max-width: 600px; margin: 0; opacity: 0; transform: translate3d(0, 15px, 0); /* GPU-composited initial offset */ will-change: transform, opacity; } /* --- ARABIAN IMMERSIVE MENU THEME --- */ #menu-section { position: relative; min-height: 100vh; background-color: var(--bg-green-section); background-image: var(--bg-green-pattern); z-index: 1; opacity: 0; padding-bottom: 30px; will-change: opacity; } /* Header Layout */ .menu-header-container { padding: 100px 0 40px 0; } .menu-subheading { color: #cda250; font-size: 0.9rem; font-weight: 700; letter-spacing: 4px; display: block; margin-bottom: 12px; } .menu-main-heading { color: #F4ECE1; font-family: 'Cinzel', serif; font-size: 2.8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 15px; text-shadow: 0 4px 10px rgba(0,0,0,0.5); } .menu-short-sentence { color: #b5a79e; font-size: 1.1rem; /* max-width: 600px; */ font-weight: 300; line-height: 1.6; } /* Bento CSS Grid Layout */ .menu-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; row-gap: 60px; margin-top: 50px; } /* Physics Rigging Containers */ .menu-card-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; grid-column: span 2; /* Default standard card spans 2 columns (1/3 of row) */ contain: layout style paint; /* Isolate repaints from the rest of the page */ } /* Card Spacing & Grid Item Styles */ /* Glassmorphism & Gold Hairline Border Frame */ .menu-card { background: rgba(15, 13, 11, 0.97); /* Opaque bg replaces backdrop-filter blur for scroll performance */ width: 100%; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; padding: 8px; /* Reduced padding from 12px to 8px */ border: 1px solid rgba(205, 162, 80, 0.15); /* Gold hairline border */ transition: box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; /* Promote to GPU layer */ transform: translateZ(0); /* Force compositor layer */ } .menu-card:hover { border-color: rgba(205, 162, 80, 0.45); box-shadow: 0 25px 50px rgba(205, 162, 80, 0.06), 0 20px 40px rgba(0, 0, 0, 0.75); } /* Inner frame with a thin gold line running inside */ .card-frame-inner { border: 1.5px solid rgba(205, 162, 80, 0.25); border-radius: 8px; padding: 10px; /* Reduced padding from 12px to 10px */ display: flex; flex-direction: column; height: 100%; background:linear-gradient(135deg, rgb(22 13 7 / 82%) 0%, rgb(10 10 10) 100%); } /* Dish Image Container */ .dish-image-wrapper { width: 100%; aspect-ratio: 1.5 / 1; /* Shorter, landscape image for standard cards */ overflow: hidden; border: 1px solid rgba(205, 162, 80, 0.15); border-radius: 6px; background: #000; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,0.9); } .dish-image-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 15px rgba(0,0,0,0.85); /* Dark vignette inner shadow */ pointer-events: none; } .dish-image { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) contrast(1.1) sepia(0.08); /* Antique/vintage warm food color grading */ transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Only transition GPU-composited transform, not filter */ will-change: transform; } .menu-card:hover .dish-image { transform: scale(1.05); filter: brightness(0.95) contrast(1.1) sepia(0.02); } /* Card Content / Info Area */ .card-info { text-align: center; display: flex; flex-direction: column; justify-content: center; padding-top: 10px; /* Reduced from 15px */ } /* Elegant gold/bronze separator */ .card-info::before { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, #a88143, transparent); margin: 0 auto 8px auto; /* Reduced from 12px */ } .dish-title { font-family: 'Cinzel', serif; color: #e5dac9; font-size: 0.95rem; /* Reduced from 1.05rem */ font-weight: 500; letter-spacing: 2px; margin: 0 0 10px 0; /* Reduced from 14px */ line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.8); } .dish-title .highlight { color: #cda250; font-weight: 700; display: block; margin-top: 2px; /* Reduced from 4px */ letter-spacing: 3px; background: linear-gradient(135deg, #ffe5b3 0%, #cda250 50%, #906c27 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .dish-desc { color: #b5a79e; font-size: 0.82rem; font-weight: 300; line-height: 1.5; margin-top: 5px; margin-bottom: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); max-width: 280px; margin-left: auto; margin-right: auto; } .card-actions-group { display: flex; gap: 10px; margin-top: 10px; justify-content: center; width: 100%; } .order-btn-gold { font-family: 'Manrope', sans-serif; background: #cda250; color: #0b120b; border: 1px solid #cda250; padding: 10px 18px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 50px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(205, 162, 80, 0.25); flex: 1.1; display: inline-flex; align-items: center; justify-content: center; } .order-btn-gold:hover { background: transparent; color: #cda250; box-shadow: 0 4px 15px rgba(205, 162, 80, 0.45); transform: translateY(-1.5px); } .call-btn-outline { font-family: 'Manrope', sans-serif; background: transparent; color: #e5dac9; border: 1px solid rgba(229, 218, 201, 0.2); padding: 10px 18px; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 50px; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 1; } .call-btn-outline:hover { color: #0b120b; background: #e5dac9; border-color: #e5dac9; transform: translateY(-1.5px); } /* Featured Card Layout (Full width - Spans 6 columns) */ .menu-card-wrapper.featured { grid-column: span 6; } .menu-card-wrapper.featured.span-3 { grid-column: span 3; /* Equal split card spans 3 columns (1/2 of row) */ } .featured-layout { display: flex; flex-direction: row; gap: 35px; align-items: center; height: 100%; padding: 24px; background: linear-gradient(135deg, rgb(22 13 7) 0%, rgb(24 24 24) 100%); } .featured-content { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 10px 0 10px 20px; } .featured-content .card-actions-group { justify-content: flex-start; /* width: 70%; */ } .featured-img { flex: 1; height: 100%; /* aspect-ratio: 1.2 / 1; */ } .featured-badge { color: #cda250; font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 12px; display: block; } .featured-desc { color: #b5a79e; font-size: 0.95rem; font-weight: 300; line-height: 1.6; margin-bottom: 20px; } .featured-meta { margin-bottom: 20px; } .meta-item { display: inline-flex; align-items: center; gap: 8px; color: #e5dac9; font-size: 0.8rem; background: rgba(205, 162, 80, 0.08); padding: 6px 14px; border-radius: 50px; border: 1px solid rgba(205, 162, 80, 0.15); } .meta-icon { color: #cda250; flex-shrink: 0; } /* Spice Heritage Card Styling (Spans 6 columns) */ .menu-card-wrapper.heritage-card { grid-column: span 6; } .heritage-card .menu-card { border-color: rgba(205, 162, 80, 0.35); background: radial-gradient(circle at center, rgba(20, 16, 12, 0.85) 0%, rgba(8, 8, 8, 0.95) 100%); } .heritage-layout { display: flex; flex-direction: row; gap: 30px; align-items: center; padding: 24px 35px; height: 100%; } .heritage-border { position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px double rgba(205, 162, 80, 0.2); pointer-events: none; border-radius: 4px; } .heritage-tag { color: #cda250; font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 12px; display: block; } .heritage-title { font-family: 'Cinzel', serif; color: #F4ECE1; font-size: 1.4rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 15px; } .heritage-content { flex: 2; text-align: left; display: flex; flex-direction: column; justify-content: center; } .heritage-text { color: #b5a79e; font-size: 0.85rem; font-weight: 300; line-height: 1.7; margin: 0; max-width: 100%; } .heritage-seal { flex: 0.7; width: 80px; height: 80px; opacity: 0.65; display: flex; justify-content: center; align-items: center; } .seal-svg { width: 100%; height: 100%; } /* Immersive Details Modal Styling */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 8, 5, 0.8); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-window { background: rgba(15, 13, 11, 0.8); border: 1px solid rgba(205, 162, 80, 0.25); border-radius: 20px; width: 90%; max-width: 850px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; transform: scale(0.9) translateY(30px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active .modal-window { transform: scale(1) translateY(0); } .modal-close-btn { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #e5dac9; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; padding: 0; } .modal-close-btn:hover { background: #e5dac9; color: #0b120b; border-color: #e5dac9; } .modal-grid { display: grid; grid-template-columns: 1.1fr 1.2fr; min-height: 500px; } .modal-image-panel { position: relative; overflow: hidden; background: #000; } #modal-dish-img { width: 100%; height: 100%; object-fit: cover; } .modal-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 50%, rgba(15, 13, 11, 0.95) 100%), linear-gradient(to top, rgba(15, 13, 11, 0.5) 0%, transparent 40%); } .modal-info-panel { padding: 50px 40px 40px 40px; display: flex; flex-direction: column; justify-content: center; background: rgba(15, 13, 11, 0.85); } .modal-category-badge { color: #cda250; font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 10px; display: block; } .modal-dish-title { font-family: 'Cinzel', serif; color: #F4ECE1; font-size: 2.2rem; margin-bottom: 25px; letter-spacing: 1px; line-height: 1.2; } .modal-section { margin-bottom: 24px; } .modal-section-title { color: rgba(229, 218, 201, 0.4); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; } .modal-dish-desc { color: #b5a79e; font-size: 0.9rem; line-height: 1.6; margin: 0; font-weight: 300; } .modal-technique-tag { display: inline-flex; align-items: center; gap: 8px; color: #e5dac9; font-size: 0.85rem; background: rgba(205, 162, 80, 0.06); padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(205, 162, 80, 0.12); } .ingredients-tags-container { display: flex; flex-wrap: wrap; gap: 8px; } .ingredient-tag { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: #b5a79e; padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 500; } .modal-actions { margin-top: 15px; } /* Responsive Overrides */ @media (max-width: 991px) { .menu-card-wrapper { grid-column: span 3; } .menu-card-wrapper.featured, .menu-card-wrapper.featured.span-3, .menu-card-wrapper.heritage-card { grid-column: span 6; } } @media (max-width: 768px) { .scroll-indicator{ bottom: 150px; } .portal-text, .menu-main-heading{ font-size: 1.7rem; } .portal-subtext, .menu-short-sentence{ line-height: 1.4; } .menu-header-container { padding: 60px 20px 0px 20px; } .menu-grid { gap: 30px; row-gap: 50px; margin-top: 25px; } .menu-card-wrapper, .menu-card-wrapper.featured, .menu-card-wrapper.featured.span-3, .menu-card-wrapper.heritage-card { grid-column: span 6; } .featured-layout { flex-direction: column; padding: 10px; gap: 10px; } .featured-img { width: 100%; aspect-ratio: 16 / 10; margin-top: unset; order: -1; } .featured-content { padding: 10px; } .featured-desc{ line-height: 1.3; margin-bottom: 10px; } .featured-meta { margin-bottom: 3px; } .featured-content .card-actions-group { justify-content: center; width: 100%; } .heritage-layout { flex-direction: column; padding: 15px 10px; } .heritage-seal { margin-top: 20px; width: 60px; height: 60px; } .modal-window { width: 95%; max-height: 80vh; overflow-y: auto; } .modal-grid { grid-template-columns: 1fr; } .modal-image-panel { height: 220px; } .modal-image-overlay { background: linear-gradient(to top, rgba(15, 13, 11, 0.95) 0%, transparent 100%); } .modal-info-panel { padding: 15px 20px; } } /* --- PREMIUM EDITORIAL ABOUT SECTION --- */ #about-section { background-color: var(--bg-brown-section); background-image: var(--bg-brown-pattern); position: relative; z-index: 1; } .editorial-block { position: relative; margin-top: 40px; } /* Image Wrappers & Parallax Setup */ .image-reveal-wrapper { width: 100%; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 20px 40px rgba(0,0,0,0.4); position: relative; } .editorial-img { width: 100%; height: 120%; /* Extra height for parallax travel */ background-size: cover; background-position: center; position: absolute; top: -10%; left: 0; } /* Placeholder backgrounds (to be replaced with your actual assets) */ .placeholder-bg-1 { background: url(../images/gallery/image-1.webp); } .placeholder-bg-2 { background: url(../images/gallery/image-2.webp); } /* Liquid Glassmorphism Panel */ .liquid-glass-panel { background: rgba(20, 10, 5, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(230, 106, 23, 0.15); border-radius: 16px; padding: 3.5rem; box-shadow: 0 30px 60px rgba(0,0,0,0.5); position: relative; z-index: 5; } /* Overlapping Logic for Desktop */ @media (min-width: 992px) { .right-overlap { margin-left: -10%; margin-top: 10%; } .left-overlap { margin-right: -10%; margin-top: -10%; } } .chapter-badge{ color: #6a6a6a; } /* Typography Enhancements */ .premium-title { color: #F4ECE1; font-size: 2.2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; } .premium-text { color: #b5a79e; font-size: 1.1rem; line-height: 1.8; font-weight: 300; margin: 0; } /* --- PREMIUM SERVICES SECTION --- */ #services-section { background-color: var(--bg-green-section); background-image: var(--bg-green-pattern); position: relative; z-index: 1; } #services-section .menu-short-sentence { max-width: 650px; margin-left: auto; margin-right: auto; } /* Global design tokens fallback utility */ .text-gold { color: var(--gold-primary) !important; } .service-accordion-wrapper { display: flex; gap: 20px; height: 65vh; /* Premium tall panels */ min-height: 550px; width: 100%; } .service-panel { position: relative; flex: 1; /* Compressed state */ border-radius: 80px 80px 24px 24px; /* Distinctive Arabian Arch */ overflow: hidden; background-size: cover; background-position: center; background-color: #120905; /* Dark fallback */ cursor: pointer; border: 1px solid rgba(205, 162, 80, 0.1); box-shadow: 0 15px 40px rgba(0,0,0,0.6); filter: brightness(0.65) saturate(90%); transition: flex 0.7s cubic-bezier(0.25, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease; } .service-panel:hover { filter: brightness(0.85) saturate(100%); border-color: rgba(205, 162, 80, 0.3); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7); } .service-panel.active { flex: 4.5; /* Expanded state */ filter: brightness(1) saturate(110%); border-color: rgba(205, 162, 80, 0.55); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(205, 162, 80, 0.15); } /* Dark gradient to make text readable */ .panel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(13, 6, 3, 0.1) 0%, rgba(13, 6, 3, 0.85) 100%); transition: opacity 0.5s ease, background 0.5s ease; z-index: 1; } .service-panel:hover .panel-overlay { background: linear-gradient(to bottom, rgba(13, 6, 3, 0.05) 0%, rgba(13, 6, 3, 0.85) 100%); } /* Content inside the panel */ .service-content { position: absolute; bottom: 35px; left: 35px; right: 35px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: 0s; pointer-events: none; z-index: 2; } .service-panel.active .service-content { opacity: 1; transform: translateY(0); transition-delay: 0.35s; /* Waits for panel to expand before showing text */ pointer-events: auto; } /* SVG Icon Badge Container */ .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(205, 162, 80, 0.08); border: 1px solid rgba(205, 162, 80, 0.25); margin-bottom: 20px; color: var(--gold-primary); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .service-svg-icon { width: 30px; height: 30px; transition: transform 0.4s ease, filter 0.4s ease; } .service-panel:hover .service-icon { background: rgba(205, 162, 80, 0.2); border-color: var(--gold-primary); transform: scale(1.05); box-shadow: 0 6px 20px rgba(205, 162, 80, 0.2); } .service-panel:hover .service-svg-icon { transform: scale(1.1); } /* Premium Liquid Glassmorphic Card Container */ .liquid-glass-card { background: rgba(13, 6, 3, 0.78); /* Deep charcoal-brown background */ backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(205, 162, 80, 0.2); /* Subtle gold hairline border */ padding: 30px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .liquid-glass-card:hover { border-color: rgba(205, 162, 80, 0.4); box-shadow: 0 15px 35px rgba(205, 162, 80, 0.1); } .service-details h3 { font-size: 1.6rem; letter-spacing: 1px; } .service-details p { margin: 0; font-size: 1rem; color: #e5dbd3; opacity: 0.95; line-height: 1.6; } /* Vertical text for compressed panels */ .vertical-title { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; /* Turns text sideways */ text-orientation: mixed; color: #F4ECE1; margin: 0; font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 4px 12px rgba(0,0,0,0.9); transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease; white-space: nowrap; z-index: 2; } .service-panel:hover .vertical-title { color: var(--gold-primary); transform: translateX(-50%) scale(1.02); } .service-panel.active .vertical-title { opacity: 0; /* Hides vertical text when expanded */ pointer-events: none; } /* Mobile Responsiveness */ @media (max-width: 768px) { .editorial-block{ margin-top: 20px; } .chapter-badge{ font-size: 0.8rem; } .liquid-glass-panel{ padding: 1rem; } .premium-title{ font-size: 1.5rem; margin-bottom: 13px; } .premium-text{ line-height: 1.4; } .service-accordion-wrapper { flex-direction: column; /* Stacks vertically on phones */ height: auto; min-height: auto; gap: 20px; } .service-panel { flex: none; width: 100%; height: 140px; /* Compressed height on mobile */ border-radius: 24px; /* Soften arch for mobile stack */ filter: brightness(0.75) saturate(95%); transition: height 0.6s cubic-bezier(0.25, 1, 0.3, 1), border-color 0.4s ease, filter 0.4s ease; } .service-panel.active { flex: none; height: 340px; /* Active panel expands down on mobile */ filter: brightness(1) saturate(100%); } .vertical-title { writing-mode: horizontal-tb; /* Normal horizontal text layout on mobile */ bottom: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; letter-spacing: 3px; transition: opacity 0.3s ease, color 0.3s ease; } .service-panel:hover .vertical-title { transform: translate(-50%, -50%) scale(1.02); } .service-content { bottom: 20px; left: 20px; right: 20px; transform: translateY(10px); } .service-icon { width: 48px; height: 48px; margin-bottom: 12px; } .service-svg-icon { width: 24px; height: 24px; } .liquid-glass-card { padding: 20px; border-radius: 16px; } .service-details h3 { font-size: 1.3rem; } .service-details p { font-size: 0.9rem; } } /* --- PARALLAX GALLERY PREVIEW SECTION --- */ #gallery-preview-section { background-color: var(--bg-brown-section); background-image: var(--bg-brown-pattern); position: relative; z-index: 1; overflow: hidden; /* Prevents parallax items from breaking layout */ } .gallery-masonry-wrapper { position: relative; padding-top: 40px; padding-bottom: 0px; } /* Image Box Styling */ .gallery-img-box { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: #2c1a12; /* Fallback */ border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); transition: transform 0.4s ease, filter 0.4s ease, border-color 0.4s ease; filter: brightness(0.85); /* Slightly dimmed */ border: 1px solid rgba(205, 162, 80, 0.12); will-change: transform; } /* Hover Effect: Brings image to full brightness and slight scale */ .gallery-img-box:hover { filter: brightness(1.1); transform: scale(1.02); z-index: 2; border-color: rgba(205, 162, 80, 0.4); } .tall-img { aspect-ratio: 3/4; } /* Subtle Arabian Arch variations for organic feel */ .arch-top { border-radius: 100px 100px 16px 16px; } .arch-bottom { border-radius: 16px 16px 100px 100px; } .arch-top-right { border-radius: 16px 100px 16px 16px; } .arch-bottom-left { border-radius: 16px 16px 16px 100px; } /* Slide-up Text Overlay inside Image Boxes */ .gallery-img-box .gallery-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 24px 24px 24px; background: linear-gradient(to top, rgba(13, 6, 3, 0.95) 0%, rgba(13, 6, 3, 0.4) 60%, transparent 100%); opacity: 0; transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: flex-end; } .gallery-img-box:hover .gallery-overlay { opacity: 1; transform: translateY(0); } .gallery-img-box .gallery-title { font-family: 'Cinzel', serif; color: #F4ECE1; font-size: 1.15rem; margin: 0; letter-spacing: 1.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); } .gallery-img-box .gallery-desc { color: #cda250; font-size: 0.75rem; letter-spacing: 1.5px; margin-top: 5px; text-transform: uppercase; display: block; font-weight: 600; } /* Bottom aligned premium Gold CTA Button */ .gallery-bottom-btn { font-family: 'Cinzel', serif; background: transparent; color: #cda250; border: 1px solid rgba(205, 162, 80, 0.4); padding: 14px 38px; font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 50px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .gallery-bottom-btn:hover { background: #cda250; color: #0b120b; border-color: #cda250; box-shadow: 0 8px 25px rgba(205, 162, 80, 0.35); transform: translateY(-2px); } .gallery-bottom-btn:active { transform: scale(0.98) translateY(0); } .gallery-bottom-btn .arrow-icon { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-bottom-btn:hover .arrow-icon { transform: translateX(5px); } /* Mobile & Tablet Adjustments (matching Bootstrap lg breakpoint wrapping) */ @media (max-width: 991px) { .gallery-img-box { aspect-ratio: 1 / 1 !important; border-radius: 16px !important; /* Simplifies shapes to standard rounded square on mobile/tablet */ } .gallery-masonry-wrapper { padding-top: 0; } } /* --- COMBINED ABOUT WRAPPER --- */ .about-combined-bg-wrapper { position: relative; background-color: #050302; } /* --- ABOUT PAGE HERO SECTION --- */ #about-hero { background-color: transparent; } /* 120% height allows room for the background to move during parallax scrolling */ .about-hero-bg { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background-size: cover; background-position: center; z-index: 0; filter: brightness(0.65) contrast(1.1); will-change: transform; } /* Gradient pushes the focus to the center and blends into the next section below */ .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: radial-gradient(circle at center, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.8) 100%), linear-gradient(to bottom, rgba(10,10,10,0.1) 0%, #0d0603 100%); */ z-index: 1; } /* Custom Scroll Down Line */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; } .scroll-line { width: 1px; height: 60px; background-color: rgba(230, 179, 37, 0.2); /* Faded gold track */ margin: 0 auto; position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background-color: var(--saffron-gold); animation: scrollDownDrop 2s infinite cubic-bezier(0.65, 0, 0.35, 1); } @keyframes scrollDownDrop { 0% { transform: translateY(-150%); } 50% { transform: translateY(150%); } 100% { transform: translateY(250%); } } /* Mobile Adjustments */ @media (max-width: 768px) { #about-hero h1 { font-size: 1.6rem !important; } } /* --- OUR STORY SECTION --- */ #our-story-section { padding: 100px 0 0px 0; min-height: 100vh; background-color: transparent; position: relative; } /* Sticky Backgrounds (Pure CSS absolute timeline wrapper) */ .story-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .story-bg-sticky-container { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background-color: transparent; } /* Ambient Glow Blobs */ .ambient-glow-blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; mix-blend-mode: screen; will-change: transform, opacity; z-index: 1; } .blob-1 { top: 20%; left: 15%; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(230, 106, 23, 0.8) 0%, transparent 70%); } .blob-2 { bottom: 10%; right: 15%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(205, 162, 80, 0.6) 0%, transparent 70%); } .blob-3 { top: 40%; left: 45%; width: 35vw; height: 35vw; background: radial-gradient(circle, rgba(150, 80, 50, 0.5) 0%, transparent 70%); } /* Story Embers Canvas */ #story-embers-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .story-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Heavy radial gradient to focus on center content */ background: radial-gradient(circle at 50% 50%, rgba(10, 5, 3, 0.25) 0%, rgba(7, 3, 2, 0.94) 100%); z-index: 3; } /* Content Track & Timeline */ .story-content-track { padding-top: 50px; } .golden-thread { position: absolute; top: 150px; /* Start below the header */ bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background-color: rgba(205, 162, 80, 0.12); /* Faded Gold */ z-index: 0; } .thread-fill { width: 100%; height: 0%; /* Animated by GSAP ScrollTrigger */ background: var(--gold-gradient); box-shadow: 0 0 10px rgba(205, 162, 80, 0.6); } /* Story Chapters */ .story-chapter { position: relative; z-index: 2; min-height: 5vh; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .story-year { font-family: 'Cinzel', serif; font-size: 4.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.6; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .story-title { font-family: 'Cinzel', serif; font-size: 1.5rem; letter-spacing: 2px; text-transform: uppercase; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Glassmorphism Card States */ .story-chapter .liquid-glass-card { border: 1px solid rgba(205, 162, 80, 0.15); background: rgba(13, 6, 4, 0.72); backdrop-filter: blur(15px) saturate(110%); -webkit-backdrop-filter: blur(15px) saturate(110%); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(0); } .story-chapter .liquid-glass-card p { color: #b5a79e; line-height: 1.7; font-size: 0.95rem; transition: color 0.6s ease; } /* Active Chapter Spotlight Styling */ .story-chapter.active-chapter .story-year { opacity: 1; filter: drop-shadow(0 0 15px rgba(205, 162, 80, 0.4)); transform: scale(1.03); } .story-chapter.active-chapter .story-title { color: #fff !important; } .story-chapter.active-chapter .liquid-glass-card { border-color: rgba(205, 162, 80, 0.45); background: rgba(18, 9, 6, 0.85); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(205, 162, 80, 0.18); transform: translateY(-8px); } .story-chapter.active-chapter .liquid-glass-card p { color: #e5dac9; } .chapter-node { width: 20px; height: 20px; background-color: #0b0604; border: 2px solid var(--gold-primary); border-radius: 50%; margin: 0 auto; position: relative; z-index: 3; box-shadow: 0 0 10px rgba(205, 162, 80, 0.2); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .chapter-node::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); width: 100%; height: 100%; background: var(--gold-gradient); border-radius: 50%; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; } .chapter-node.active { background-color: #0b0604; border-color: #ffffff; box-shadow: 0 0 20px var(--gold-primary), 0 0 8px rgba(255, 255, 255, 0.6); transform: scale(1.35); } .chapter-node.active::after { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Mobile Adjustments */ @media (max-width: 768px) { .golden-thread { left: 20px; transform: none; top: 100px; } .story-chapter { min-height: auto; margin-bottom: 60px !important; } .story-text-box { padding-left: 45px; text-align: left !important; } .story-year { font-size: 3.5rem; } .story-title { font-size: 1.3rem; } } /* --- OUR MISSION SECTION --- */ #mission-section { background-color: #030101; /* Extremely dark, almost black */ min-height: 80vh; overflow: hidden; } /* Massive, subtle background geometric pattern */ .mission-mandala { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140vw; height: 140vw; max-width: 1500px; max-height: 1500px; /* Base64 encoded 8-point Arabian star pattern for instant loading */ background-image: url('data:image/svg+xml;utf8,'); background-size: 30%; background-repeat: repeat; background-position: center; opacity: 0.04; /* Very subtle, just a hint of texture */ pointer-events: none; z-index: 1; } /* Fades the edges of the mandala into total darkness */ .mission-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 0%, #030101 65%); z-index: 2; } /* Bento Grid Cards & Layout for Mission Section */ .mission-card-featured { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 55px 45px; border: 1px solid rgba(205, 162, 80, 0.12); background: radial-gradient(circle at 50% 100%, rgba(230, 106, 23, 0.09) 0%, rgba(13, 6, 4, 0.45) 80%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 24px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.03); cursor: pointer; position: relative; z-index: 3; } .mission-card-featured:hover { transform: translateY(-8px); border-color: rgba(205, 162, 80, 0.45); box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8), 0 0 35px rgba(230, 106, 23, 0.16); } .mission-card-horizontal { display: flex; flex-direction: row; align-items: center; gap: 30px; padding: 35px 40px; border: 1px solid rgba(205, 162, 80, 0.1); background: rgba(13, 6, 4, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 24px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.02); cursor: pointer; position: relative; z-index: 3; } .mission-card-horizontal:hover { transform: translateY(-6px); border-color: rgba(205, 162, 80, 0.4); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75), 0 0 25px rgba(205, 162, 80, 0.1); } .mission-card-horizontal .mission-text-content { flex: 1; text-align: left; } .mission-icon-wrap { width: 64px; height: 64px; min-width: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(205, 162, 80, 0.04); border: 1px solid rgba(205, 162, 80, 0.12); color: var(--gold-primary); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mission-card-featured .mission-icon-wrap { margin-bottom: 30px; } .mission-card-featured:hover .mission-icon-wrap, .mission-card-horizontal:hover .mission-icon-wrap { background: rgba(205, 162, 80, 0.08); border-color: rgba(205, 162, 80, 0.4); box-shadow: 0 0 20px rgba(205, 162, 80, 0.2); transform: scale(1.05); color: #ffffff; } #mission-section p { color: #ffffffc0 !important; /* Force high-contrast white text for readability */ } .mission-icon-wrap i { font-size: 24px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mission-card-featured:hover .mission-icon-wrap i { transform: rotate(10deg) scale(1.1); } .mission-card-horizontal:hover .mission-icon-wrap i { transform: scale(1.1); } .mission-card-featured h4, .mission-card-horizontal h4 { transition: color 0.4s ease; } .mission-card-featured:hover h4, .mission-card-horizontal:hover h4 { color: #ffffff !important; } /* Layout logic for Bento grids */ @media (min-width: 992px) { .mission-right-col { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 10px; } .mission-card-horizontal { height: calc(50% - 12px); } } @media (max-width: 991px) { .mission-card-featured { min-height: auto; margin-bottom: 24px; padding: 5px 10px; } .mission-card-horizontal { margin-bottom: 24px; } .mission-card-horizontal:last-child { margin-bottom: 0; } } @media (max-width: 767px) { .mission-card-horizontal { flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 35px 25px; } .mission-card-horizontal .mission-text-content { text-align: center; } } /* --- OUR VALUES SECTION (VERTICAL STACK) --- */ #values-section { background-color: #050302; padding-bottom: 10vh; } .values-vertical-track { width: 100%; position: relative; padding-top: 40px; } /* Card Wrapper creates the scroll distance between cards */ .value-card-wrapper { width: 100%; max-width: 450px; margin-bottom: 60vh; /* Creates the empty scrolling space to reveal the next card */ display: flex; justify-content: center; will-change: transform, opacity; } /* Remove bottom margin from the final card so the footer can flow normally */ .value-card-wrapper:last-child { margin-bottom: 5vh; } /* Glassmorphic Archway Card */ .value-card { width: 100%; height: 550px; border-radius: 180px 180px 24px 24px; background: linear-gradient(180deg, rgba(16, 9, 6, 0.4) 0%, rgba(13, 6, 4, 0.85) 100%); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.08); /* Pure white hairline edge refraction */ box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(205, 162, 80, 0.1); position: relative; overflow: hidden; transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Inner gold trace arch */ .value-card::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; border: 1px solid rgba(205, 162, 80, 0.1); border-radius: 170px 170px 16px 16px; pointer-events: none; z-index: 2; transition: border-color 0.6s ease, transform 0.6s ease; } .value-card.active-value-card::before { border-color: rgba(205, 162, 80, 0.3); transform: scale(0.99); } .value-card.active-value-card { border-color: rgba(205, 162, 80, 0.45); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(205, 162, 80, 0.25), 0 0 40px rgba(205, 162, 80, 0.12); background: linear-gradient(180deg, rgba(22, 12, 8, 0.55) 0%, rgba(18, 9, 6, 0.95) 100%); } /* Card BG Geometry Pattern */ .value-card-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 C37 7, 37 15, 30 22 C23 15, 23 7, 30 0 M30 22 C35 27, 35 32, 30 37 C25 32, 25 27, 30 22' fill='none' stroke='%23cda250' stroke-opacity='0.03' stroke-width='0.75'/%3E%3C/svg%3E"); opacity: 0.5; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 80%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 80%); pointer-events: none; z-index: 1; } /* Faded Number Watermark */ .value-watermark { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 15rem; font-weight: 700; line-height: 1; background: linear-gradient(to bottom, rgba(205, 162, 80, 0.06) 0%, transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(205, 162, 80, 0.03); z-index: 1; pointer-events: none; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-stroke 0.6s ease; } .value-card.active-value-card .value-watermark { -webkit-text-stroke: 1px rgba(205, 162, 80, 0.1); } /* Premium Custom Icon Container */ .value-icon-container { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle, rgba(205, 162, 80, 0.12) 0%, rgba(205, 162, 80, 0.02) 100%); border: 1px solid rgba(205, 162, 80, 0.20); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px auto; position: relative; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: 3; } .value-icon-container::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed rgba(205, 162, 80, 0.08); transition: transform 0.8s ease, opacity 0.6s ease; opacity: 0.6; } .value-icon-container i { font-size: 26px; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .value-card.active-value-card .value-icon-container { border-color: rgba(205, 162, 80, 0.55); background: radial-gradient(circle, rgba(205, 162, 80, 0.22) 0%, rgba(205, 162, 80, 0.04) 100%); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(205, 162, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .value-card.active-value-card .value-icon-container::after { transform: rotate(45deg); border-color: rgba(205, 162, 80, 0.25); opacity: 1; } .value-card.active-value-card .value-icon-container i { transform: scale(1.1); filter: drop-shadow(0 2px 8px rgba(205, 162, 80, 0.4)); } .value-content h3 { letter-spacing: 2px; font-size: 1.8rem; transition: color 0.6s ease, text-shadow 0.6s ease; } .value-card.active-value-card .value-content h3 { color: #ffffff !important; text-shadow: 0 0 15px rgba(205, 162, 80, 0.3); } .value-content p { font-size: 0.95rem; line-height: 1.7; color: #b5a79e; transition: color 0.6s ease; } .value-card.active-value-card .value-content p { color: #e5dac9; } /* Mobile Responsiveness */ @media (max-width: 768px) { .value-card-wrapper { max-width: 320px; margin-bottom: 70vh; } .value-card { height: 480px; border-radius: 160px 160px 20px 20px; } .value-card::before { border-radius: 150px 150px 14px 14px; top: 8px; left: 8px; right: 8px; bottom: 8px; } .value-watermark { font-size: 10rem; top: 15px; } .value-icon-container { width: 68px; height: 68px; margin-bottom: 20px; } .value-icon-container i { font-size: 22px; } .value-content h3 { font-size: 1.5rem; } .value-content p { font-size: 0.88rem; } } /* --- OUR TEAM SECTION --- */ #team-section { background-color: #030101; /* Matches the dark grounding theme */ position: relative; z-index: 2; /* The team cards fan out with a ±6° rotation on scroll-in; on mobile they are full-width, so the rotated corners would push past the viewport. Clip the section horizontally to contain that transform without altering the animation. */ overflow-x: clip; } .team-portrait-card { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; border-radius: 200px 200px 16px 16px; /* Elegant tall arch */ position: relative; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.6); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Initially cinematic, dim, and desaturated */ filter: grayscale(60%) brightness(0.6); cursor: pointer; } .team-portrait-card:hover { /* Blooms into full color and brightness on hover */ filter: grayscale(0%) brightness(1.1); transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 60px rgba(230, 179, 37, 0.15); /* Subtle gold underglow */ } .portrait-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 40%, rgba(3,1,1,0.95) 100%); z-index: 1; } /* Glassmorphic Info Card (Hidden initially) */ .team-info { position: absolute; bottom: -30px; /* Pushed down out of frame */ left: 5%; width: 90%; z-index: 2; opacity: 0; transform: translateY(20px); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid rgba(230, 179, 37, 0.1); background: rgba(10, 5, 3, 0.65); /* Darker glass to ensure text contrast */ } .team-portrait-card:hover .team-info { opacity: 1; bottom: 25px; /* Slides up smoothly */ transform: translateY(0); } /* Mobile Adjustments */ @media (max-width: 768px) { .team-portrait-card { aspect-ratio: 4/5; border-radius: 120px 120px 16px 16px; filter: grayscale(0%) brightness(0.9); /* Disable heavy filter for mobile users */ } .team-info { opacity: 1; bottom: 15px; transform: translateY(0); } .gs-team-card[style] { margin-top: 0 !important; /* Remove the desktop stagger to keep mobile layout clean */ } } /* --- TESTIMONIALS SECTION --- */ #testimonials-section { background: radial-gradient(circle at center, rgba(13, 8, 6, 1) 0%, rgba(3, 1, 1, 1) 100%); } .marquee-container { width: 100vw; margin-left: calc(-50vw + 50%); /* Breaks out of the bootstrap container to span full screen */ } /* Forces items onto a single horizontal line */ .marquee-track { width: max-content; will-change: transform; } .testimonial-card { width: 400px; flex-shrink: 0; border-radius: 24px; background: linear-gradient(145deg, rgba(26, 15, 10, 0.6) 0%, rgba(13, 8, 6, 0.9) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(230, 179, 37, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 22px 26px; /* Tightened padding */ cursor: pointer; transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-card:hover { border-color: rgba(230, 179, 37, 0.45); transform: translateY(-4px) scale(1.015); box-shadow: 0 15px 35px rgba(230, 179, 37, 0.08), 0 8px 25px rgba(0, 0, 0, 0.6); } /* Giant background quotation mark */ .quote-watermark { position: absolute; top: 0px; right: 20px; font-size: 5.5rem; /* Reduced scale */ line-height: 1; color: rgba(230, 179, 37, 0.04); /* Extremely faint gold */ z-index: 0; pointer-events: none; } /* Tighten spacing inside cards */ .testimonial-stars { display: flex; gap: 3px; margin-bottom: 8px; /* Reduced margin */ color: #cda250; } .testimonial-card p { font-size: 0.9rem; /* Reduced text scale */ color: #b5a79e; line-height: 1.5; margin-bottom: 12px; /* Tightened margin */ } .testimonial-card h4 { font-size: 1.1rem; line-height: 1.2; margin: 0 0 2px 0; } .testimonial-card span { font-size: 0.7rem; letter-spacing: 1px; color: #b5a79e; text-transform: uppercase; } /* Ensure text stays above the watermark */ .testimonial-card > * { position: relative; z-index: 1; } /* Mobile Adjustments */ @media (max-width: 768px) { .testimonial-card { width: 320px; padding: 10px 15px; /* Even tighter on mobile */ } } /* --- GALLERY HERO SECTION --- */ #gallery-hero { /* border-bottom: 1px solid rgba(230, 179, 37, 0.1); */ } .text-shadow-premium { text-shadow: 0 10px 30px rgba(0,0,0,0.8); } /* Floating Parallax Archways */ .floating-arch { position: absolute; background-size: cover; background-position: center; border-radius: 150px 150px 12px 12px; /* Arch shape */ border: 1px solid rgba(230, 179, 37, 0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.7); will-change: transform; opacity: 0; /* Hidden for initial GSAP reveal */ } /* Specific Positions for the Floating Elements */ .floating-arch.arch-left { width: 280px; height: 380px; top: 15%; left: 12%; filter: brightness(0.7); } .floating-arch.arch-right { width: 320px; height: 420px; top: 35%; right: 10%; filter: brightness(0.85); } .floating-arch.arch-bottom { width: 240px; height: 320px; bottom: -5%; left: 25%; filter: brightness(0.6); } /* Minimalist Scroll Line Indicator */ .scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, rgba(230, 179, 37, 1) 0%, rgba(230, 179, 37, 0) 100%); position: relative; overflow: hidden; } /* Animated dot running down the scroll line */ .scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 15px; background: #fff; animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @keyframes scrollDrop { 0% { transform: translateY(-15px); } 100% { transform: translateY(60px); } } /* Mobile Adjustments */ @media (max-width: 768px) { .floating-arch { display: none; } /* Hide floating elements on mobile to prevent clutter */ .hero-glow { width: 100vw; height: 100vw; } } /* --- GALLERY MASONRY SYSTEM --- */ #gallery-grid-section { background-color: #030101; overflow: hidden; } /* Base Gallery Cards */ .gallery-item-container { will-change: transform; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .gallery-card { width: 100%; background-color: #120b08; box-shadow: 0 15px 40px rgba(0,0,0,0.5); border: 1px solid rgba(230, 179, 37, 0.08); cursor: pointer; aspect-ratio: 3/4; /* Set uniform portrait aspect ratio */ border-radius: 16px; position: relative; overflow: hidden; } /* Image zoom interactions */ .gallery-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform: scale(1.02); } .gallery-card:hover .gallery-img { transform: scale(1.08); } /* Premium Reveal Overlays */ .gallery-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(3,1,1,0) 55%, rgba(3,1,1,0.92) 100%); z-index: 2; opacity: 0; transition: opacity 0.4s ease; } .gallery-card:hover .gallery-card-overlay { opacity: 1; } .category-tag { font-size: 0.8rem; transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .gallery-card-overlay h3 { font-size: 1.2rem; /* Adjusted for smaller 4-column cards */ line-height: 1.25; transform: translateY(15px); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; } .gallery-card:hover .category-tag, .gallery-card:hover .gallery-card-overlay h3 { transform: translateY(0); } /* Custom States for smooth filtering */ .gallery-item-container.is-filtered-out { opacity: 0 !important; transform: scale(0.8) translateY(30px) !important; pointer-events: none; position: absolute; visibility: hidden; } /* Tablet & Mobile Adjustments */ @media (max-width: 768px) { .gallery-card { border-radius: 15px; aspect-ratio: 4/5; /* Adjust to 4:5 on mobile for better portrait fitting */ } .gallery-card-overlay { opacity: 1; padding: 15px 12px !important; /* Tighter padding for 2-column mobile layout */ } .gallery-card-overlay .category-tag { font-size: 0.7rem; } .gallery-card-overlay h3 { font-size: 0.95rem !important; /* Scale text down to prevent wrapping/overflow in small cards */ line-height: 1.2; } .category-tag, .gallery-card-overlay h3 { transform: translateY(0); } .gallery-item-container { transform: none !important; } /* Kill parallax on mobile track */ } /* --- GALLERY LIGHTBOX SYSTEM --- */ .gallery-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1050; /* Sits above all components, navs, and elements */ display: none; opacity: 0; align-items: center; justify-content: center; overflow: hidden; } .lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 1, 1, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1; } /* Lightbox Content Wrapper */ .lightbox-content-wrapper { position: relative; z-index: 2; max-width: 90%; max-height: 85%; display: flex; align-items: center; justify-content: center; } .lightbox-card { background: rgba(18, 11, 8, 0.6); border: 1px solid rgba(230, 179, 37, 0.15); border-radius: 200px 200px 24px 24px; /* Matches the gallery arches but larger scale */ overflow: hidden; max-width: 480px; /* Restrict width for elegant portrait proportion */ width: 100%; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; transform: scale(0.9); } .lightbox-img-container { width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 200px 200px 0 0; } #lightbox-img { width: 100%; height: 100%; object-fit: cover; } .lightbox-info { text-align: center; background: rgba(18, 11, 8, 0.95); border-top: 1px solid rgba(230, 179, 37, 0.08); } /* Close & Navigation Buttons */ .lightbox-close-btn { position: absolute; top: 30px; right: 40px; background: transparent; border: none; cursor: pointer; z-index: 10; color: rgba(255, 255, 255, 0.7); padding: 0; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease; } .lightbox-close-btn .close-btn-svg { width: 54px; height: 54px; } .lightbox-close-btn .outer-circle { fill: none; stroke: rgba(230, 179, 37, 0.2); stroke-width: 1px; } .lightbox-close-btn .inner-circle { fill: none; stroke: rgba(230, 179, 37, 0.4); stroke-width: 1px; transform-origin: center; transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); } .lightbox-close-btn .star-square { fill: rgba(230, 179, 37, 0.03); stroke: rgba(230, 179, 37, 0.2); stroke-width: 1px; transform-origin: center; } .lightbox-close-btn .close-path { stroke: #ffffff; } .lightbox-close-btn:hover { color: #e6b325; transform: scale(1.05); } .lightbox-close-btn:hover .inner-circle { transform: rotate(90deg); } .lightbox-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(18, 11, 8, 0.6); border: 1px solid rgba(230, 179, 37, 0.15); color: #ffffff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all 0.3s ease; } .lightbox-nav-btn svg { width: 24px; height: 24px; transition: transform 0.3s ease; } .lightbox-nav-btn:hover { background: #e6b325; color: #030101; box-shadow: 0 0 20px rgba(230, 179, 37, 0.4); } .prev-btn { left: 40px; } .next-btn { right: 40px; } .prev-btn:hover svg { transform: translateX(-3px); } .next-btn:hover svg { transform: translateX(3px); } /* Lightbox Mobile Adjustments */ @media (max-width: 768px) { .lightbox-card { max-width: 85vw; border-radius: 120px 120px 16px 16px; } .lightbox-img-container { border-radius: 120px 120px 0 0; aspect-ratio: 4/5; } .lightbox-close-btn { top: 20px; right: 20px; } .lightbox-close-btn .close-btn-svg { width: 44px; height: 44px; } .lightbox-nav-btn { width: 44px; height: 44px; } .prev-btn { left: 15px; } .next-btn { right: 15px; } } /* --- CONTACT HERO SECTION --- */ #contact-hero { border-bottom: 1px solid rgba(230, 179, 37, 0.05); } /* Ensure the spotlight glow doesn't block text selection or clicks */ .pointer-events-none { pointer-events: none; } /* Premium Mouse Scroll Icon */ .mouse-scroll-icon { width: 28px; height: 46px; border: 1px solid rgba(230, 179, 37, 0.3); border-radius: 20px; position: relative; background: rgba(10, 5, 3, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); } .mouse-wheel { width: 4px; height: 8px; background-color: #e6b325; /* Gold wheel */ border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: mouseWheelScroll 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @keyframes mouseWheelScroll { 0% { top: 6px; opacity: 1; height: 8px; } 50% { opacity: 1; height: 12px; } 100% { top: 26px; opacity: 0; height: 4px; } } /* Mobile Adjustments */ @media (max-width: 768px) { #contact-spotlight { /* On mobile, center the glow statically since there is no mouse to track */ width: 100vw !important; height: 100vw !important; top: 50% !important; left: 50% !important; opacity: 1 !important; } } /* --- CONTACT GATEWAY & FORM --- */ .location-card { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; border: 1px solid rgba(230, 179, 37, 0.1); background: rgba(18, 11, 8, 0.35) !important; } .location-card:hover { transform: translateY(-5px) scale(1.015); border-color: rgba(230, 179, 37, 0.45) !important; background: rgba(18, 11, 8, 0.6) !important; box-shadow: 0 20px 40px rgba(230, 179, 37, 0.05); } .location-card .contact-icon { width: 18px; height: 18px; color: #e6b325; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease; } .location-card:hover .contact-icon { transform: scale(1.2); color: #ffffff !important; } /* Premium Form Styling */ .premium-form .form-floating-custom { position: relative; width: 100%; } .premium-form .form-control-custom { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 12px 0 8px 0; font-size: 1.05rem; transition: border-color 0.3s ease; border-radius: 0; } .premium-form .form-control-custom:focus { outline: none; border-bottom: 1px solid #e6b325; /* Gold underline on focus */ } /* Floating Label Logic */ .premium-form .form-floating-custom label { position: absolute; top: 12px; left: 0; color: rgba(255, 255, 255, 0.5); font-size: 1rem; pointer-events: none; transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); } /* When input is focused, OR when it has a value (placeholder not shown) */ .premium-form .form-control-custom:focus ~ label, .premium-form .form-control-custom:not(:placeholder-shown) ~ label, .premium-form select.form-control-custom:valid ~ label { top: -16px; font-size: 0.75rem; color: #e6b325; letter-spacing: 1px; } /* Custom Select Arrow Styling */ .select-custom-wrapper select { appearance: none; -webkit-appearance: none; cursor: pointer; } .select-custom-wrapper select option { background-color: #120b08; /* Dark brown majlis theme */ color: #ffffff; padding: 12px; } .select-custom-wrapper .select-arrow { position: absolute; right: 5px; top: 16px; font-size: 0.65rem; pointer-events: none; transition: transform 0.3s ease; } .select-custom-wrapper select:focus ~ .select-arrow { transform: rotate(180deg); } /* Premium Submit Button */ .btn-premium { background: rgba(230, 179, 37, 0.08); border: 1px solid rgba(230, 179, 37, 0.4); color: #e6b325; border-radius: 50px; transition: color 0.4s ease, border-color 0.4s ease; cursor: pointer; } .btn-premium .btn-glow { width: 0; height: 0; background: #e6b325; border-radius: 50%; transition: width 0.5s ease, height 0.5s ease; z-index: 0; } .btn-premium:hover { color: #030101; border-color: #e6b325; } .btn-premium:hover .btn-glow { width: 160%; height: 320px; /* Expands to fill the button */ } /* Premium Map Card Layout */ .map-card { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid rgba(230, 179, 37, 0.1); background: rgba(18, 11, 8, 0.35) !important; } .map-card:hover { transform: translateY(-6px); border-color: rgba(230, 179, 37, 0.4) !important; background: rgba(18, 11, 8, 0.55) !important; box-shadow: 0 25px 50px rgba(230, 179, 37, 0.05); } .map-iframe-container { width: 100%; height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #0d0603; position: relative; } .map-iframe-container iframe { width: 100%; height: 100%; border: 0; /* Custom premium dark filter for Google Maps iframe */ filter: grayscale(1) invert(0.92) contrast(1.1) brightness(0.9); transition: filter 0.5s cubic-bezier(0.25, 1, 0.5, 1); will-change: filter; } .map-card:hover iframe { /* Color bleed back slightly on hover */ filter: grayscale(0.4) invert(0.9) contrast(1.15) brightness(0.95); } /* Placeholder shown while the map iframe is lazy-loaded on scroll */ .map-placeholder { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(205, 162, 80, 0.65); font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase; background: radial-gradient(circle at center, rgba(18, 11, 8, 0.7) 0%, #0d0603 100%); transition: opacity 0.6s ease; pointer-events: none; } .map-placeholder svg { animation: mapPinPulse 2s ease-in-out infinite; } @keyframes mapPinPulse { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-4px); opacity: 1; } } /* Fade the placeholder out once the iframe has finished loading */ .map-iframe-container.map-loaded .map-placeholder { opacity: 0; } @media (max-width: 768px) { .map-iframe-container { height: 280px; /* shorter on mobile */ } } /* --- MENU HERO SECTION --- */ #menu-hero { border-bottom: 1px solid rgba(230, 179, 37, 0.1); } /* Cinematic Aroma / Steam Effect */ .aroma-layer { width: 150vw; height: 150vh; border-radius: 50%; filter: blur(80px); opacity: 0.4; mix-blend-mode: screen; will-change: transform, opacity; /* GPU layer promotion */ contain: strict; /* Isolate from layout/paint of other elements */ } .aroma-1 { background: radial-gradient(circle, rgba(230, 179, 37, 0.08) 0%, rgba(3, 1, 1, 0) 60%); top: -20%; left: -20%; animation: driftAroma1 25s infinite alternate cubic-bezier(0.4, 0, 0.6, 1); } .aroma-2 { background: radial-gradient(circle, rgba(200, 100, 30, 0.05) 0%, rgba(3, 1, 1, 0) 60%); bottom: -30%; right: -20%; animation: driftAroma2 30s infinite alternate cubic-bezier(0.4, 0, 0.6, 1); } @keyframes driftAroma1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10%, 15%) scale(1.1); } } @keyframes driftAroma2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-15%, -10%) scale(1.2); } } /* Elegant Vertical Line Indicator */ .vertical-line-indicator { width: 1px; height: 80px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .vertical-line-indicator::before { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #e6b325, transparent); animation: lineDrop 2.5s infinite ease-in-out; } @keyframes lineDrop { 0% { top: -100%; } 100% { top: 100%; } } /* --- EPICUREAN LEDGER SECTION --- */ .border-dark { border-color: rgba(255, 255, 255, 0.1) !important; } /* Premium Menu Grid and Card Styling (Distinct from Index Page) */ .premium-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 45px; } .premium-menu-card { background: linear-gradient(135deg, rgba(20, 16, 14, 0.95) 0%, rgba(10, 8, 7, 0.98) 100%); /* Opaque bg replaces backdrop-filter blur for scroll performance */ border: 1px solid rgba(205, 162, 80, 0.12); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; height: 100%; position: relative; transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; /* No transform transition during initial load/GSAP anim to prevent clash */ cursor: pointer; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); will-change: transform, opacity; /* Promote to GPU layer covering GSAP + hover states */ transform: translateZ(0); /* Force compositor layer */ contain: layout style paint; /* Isolate repaints */ } /* Enable transform transition only after GSAP scroll animation is complete */ .premium-menu-card.reveal-done { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; } .premium-menu-card:hover { transform: translateY(-5px); border-color: rgba(205, 162, 80, 0.35); box-shadow: 0 25px 50px rgba(205, 162, 80, 0.06), 0 20px 40px rgba(0, 0, 0, 0.8); } .premium-menu-card:active { transform: translateY(-2px) scale(0.99); } .premium-dish-img-wrapper { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 20px; position: relative; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.05); } .premium-dish-img-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 60%, rgba(10, 8, 7, 0.95) 100%); pointer-events: none; } .premium-dish-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) contrast(1.05) sepia(0.05); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .premium-menu-card:hover .premium-dish-img { transform: scale(1.08); filter: brightness(0.9) contrast(1.05) sepia(0.0); } .premium-card-info { display: flex; flex-direction: column; flex-grow: 1; } .premium-card-category { font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(205, 162, 80, 0.7); font-weight: 700; margin-bottom: 4px; text-align: left; } .premium-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 12px; } .premium-dish-title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 600; color: #f5eedf; margin: 0; line-height: 1.3; text-align: left; } .premium-dish-price { font-family: 'Amiri', serif; font-size: 1.2rem; font-weight: 700; color: #cda250; white-space: nowrap; } .premium-dish-desc { font-size: 0.85rem; color: #b5a79e; line-height: 1.6; margin-bottom: 22px; font-weight: 300; text-align: left; } .premium-actions { margin-top: auto; display: flex; gap: 12px; width: 100%; } .premium-action-group { position: relative; display: flex; } .premium-action-group.order-group { flex: 1.2; } .premium-action-group.call-group { flex: 1; } .premium-action-group .order-btn-gold, .premium-action-group .call-btn-outline { width: 100%; } .premium-order-btn { background: #cda250; color: #0b0807; font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; border: 1px solid #cda250; border-radius: 50px; padding: 12px 20px; width: 100%; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .premium-order-btn:hover { background: transparent; color: #cda250; box-shadow: 0 6px 20px rgba(205, 162, 80, 0.35); transform: translateY(-2px); } .premium-order-btn:active { transform: translateY(-0.5px); } .premium-call-btn { background: transparent; color: #e5dac9; font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; border: 1px solid rgba(229, 218, 201, 0.25); border-radius: 50px; padding: 12px 20px; width: 100%; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .premium-call-btn:hover { background: #e5dac9; color: #0b0807; border-color: #e5dac9; transform: translateY(-2px); } .premium-call-btn:active { transform: translateY(-0.5px); } /* Location Dropdown Popover */ .location-dropdown { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px); background: linear-gradient(135deg, rgba(20, 16, 14, 0.98) 0%, rgba(10, 8, 7, 0.99) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(205, 162, 80, 0.35); border-radius: 12px; padding: 6px 0; width: max-content; min-width: 180px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 15px rgba(205, 162, 80, 0.05); opacity: 0; visibility: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease; z-index: 100; } .location-dropdown.active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Symmetrical fine arrow */ .location-dropdown::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: rgba(20, 16, 14, 0.98) transparent transparent transparent; } /* Arrow border to match the gold border of dropdown */ .location-dropdown::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 7px; border-style: solid; border-color: rgba(205, 162, 80, 0.35) transparent transparent transparent; z-index: -1; } .location-option { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; color: #e5dac9; font-size: 0.7rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s ease; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .location-option:last-child { border-bottom: none; } .location-option:hover { background: rgba(205, 162, 80, 0.12); color: #cda250; text-decoration: none; } /* Bento-style featured cards for menu page */ .premium-menu-card.featured-span-2 { grid-column: span 2; } .premium-menu-card.featured-span-3 { grid-column: span 3; } .premium-menu-card.featured-span-2 .premium-dish-img-wrapper { aspect-ratio: 2.1 / 1; } .premium-menu-card.featured-span-3 .premium-dish-img-wrapper { aspect-ratio: 3.2 / 1; } /* Responsive Grid overrides */ @media (max-width: 991px) { .premium-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .premium-menu-card.featured-span-2, .premium-menu-card.featured-span-3 { grid-column: span 2; } } @media (max-width: 768px) { .premium-menu-grid { grid-template-columns: 1fr; gap: 25px; } .premium-menu-card.featured-span-2, .premium-menu-card.featured-span-3 { grid-column: span 1 !important; } .premium-menu-card.featured-span-2 .premium-dish-img-wrapper, .premium-menu-card.featured-span-3 .premium-dish-img-wrapper { aspect-ratio: 1.5 / 1; } } /* Menu Background Embers Canvas */ .menu-particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }