/* Direct Darshan Ujjain - Divine Modern CSS System */ /* Fonts are loaded via high-performance preconnected tags in */ :root { --primary-orange: #d9480f; --primary-saffron: #f76707; --primary-gold: #d4af37; --gold-glow: rgba(212, 175, 55, 0.4); --deep-crimson: #9b111e; --dark-navy: #0f172a; --slate-dark: #1e293b; --divine-cream: #fffaf0; --gold-gradient: linear-gradient(135deg, #d4af37 0%, #f59e0b 50%, #b45309 100%); --saffron-gradient: linear-gradient(135deg, #e65100 0%, #f76707 50%, #ff922b 100%); --dark-gradient: linear-gradient(135deg, #0b0f19 0%, #171e2e 100%); --hero-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.94) 100%); --card-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.8); --card-hover-shadow: 0 20px 40px -10px rgba(230, 81, 0, 0.18), 0 0 0 1px rgba(247, 103, 7, 0.35); --font-serif: 'Cinzel', serif; --font-heading: 'Outfit', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; } body { font-family: var(--font-body); background-color: #faf8f5; color: #334155; overflow-x: hidden; } h1, h2, h3, .font-serif { font-family: var(--font-serif); } h4, h5, h6, .font-heading { font-family: var(--font-heading); } /* Om & Trishul Sacred Watermarks */ .sacred-pattern-bg { background-color: #fffaf0; background-image: radial-gradient(#f76707 0.75px, transparent 0.75px), radial-gradient(#d4af37 0.75px, #fffaf0 0.75px); background-size: 30px 30px; background-position: 0 0, 15px 15px; } .gold-border-glow { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 0 25px rgba(212, 175, 55, 0.15); } /* Glassmorphism Classes */ .glass-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8); } .glass-dark { background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Custom Gradients & Text */ .gradient-text-saffron { background: linear-gradient(135deg, #e65100, #f76707, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient-text-gold { background: linear-gradient(135deg, #f59e0b, #d4af37, #fef08a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg-saffron-gradient { background: var(--saffron-gradient); } .bg-gold-gradient { background: var(--gold-gradient); } .bg-dark-gradient { background: var(--dark-gradient); } /* Animations */ @keyframes floatAnim { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 15px rgba(247, 103, 7, 0.4); } 50% { box-shadow: 0 0 30px rgba(247, 103, 7, 0.8); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-float { animation: floatAnim 4s ease-in-out infinite; } .animate-glow { animation: pulseGlow 2.5s infinite; } .badge-shimmer { background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4), rgba(255,255,255,0.1)); background-size: 200% 100%; animation: shimmer 3s infinite; } /* Custom Buttons */ .btn-saffron { background: linear-gradient(135deg, #e65100 0%, #f76707 100%); color: #ffffff; font-weight: 600; box-shadow: 0 4px 15px rgba(230, 81, 0, 0.3); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .btn-saffron:hover { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(230, 81, 0, 0.45); } .btn-gold { background: linear-gradient(135deg, #d4af37 0%, #f59e0b 100%); color: #0f172a; font-weight: 700; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35); transition: all 0.3s ease; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.55); } .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #ffffff; font-weight: 600; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35); transition: all 0.3s ease; } .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.55); } /* Card Hover Effects */ .temple-card, .package-card, .service-card { transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .temple-card:hover, .package-card:hover, .service-card:hover { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); } /* Sticky WhatsApp & Call Bar */ .floating-action-btn { position: fixed; bottom: 24px; right: 24px; z-index: 999; } .floating-call-btn { position: fixed; bottom: 90px; right: 24px; z-index: 999; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #f97316; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #c2410c; } /* Mobile Responsiveness & Safe Area Utility */ @media (max-width: 1024px) { body { padding-bottom: 72px; /* Prevent bottom content from being obscured by sticky mobile bar */ } } /* Touch targets and input enhancements */ input, select, textarea, button { font-size: 16px; /* Prevents auto-zoom on iOS mobile */ } @media (min-width: 640px) { input, select, textarea { font-size: 0.875rem; } } /* Image aspect ratio containers */ .img-ratio-card { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; } /* Mobile Drawer Overlay Animation */ .drawer-backdrop { transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } /* Responsive Table container */ .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }