/* Nova Petshop - Custom Styles */ /* _Layout.cshtml */ body, h1, h2, h3, h4, h5, h6, p, a, span, div { font-family: 'Inter', sans-serif; } .footer-widget__desc, .footer .footer-widget__list-item span, .footer-widget__title { color: rgba(255, 255, 255, 0.8) !important; } .footer-widget__list-item i { color: #ffd100 !important; } .footer-bottom__copyright { color: rgba(255, 255, 255, 0.6); } /* LatestBlogs */ .blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; } /* _GallerySection */ .gallery-img-container { overflow: hidden; border-radius: 0.5rem; } .gallery-img { transition: transform 0.3s ease; } .gallery-img-container:hover .gallery-img { transform: scale(1.05); } /* Breadcrumb */ .modern-page-header { background: linear-gradient(135deg, #ffffff 0%, #f5f6f9 100%); padding: 130px 0 50px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .modern-page-header::before { content: ''; position: absolute; top: -70px; left: -50px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 175, 56, 0.08) 0%, rgba(255,255,255,0) 70%); z-index: 0; } .modern-page-header::after { content: ''; position: absolute; bottom: -100px; right: 5%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(62, 191, 203, 0.05) 0%, rgba(255,255,255,0) 70%); z-index: 0; } .modern-page-title { font-size: 2.5rem; font-weight: 800; color: #1a1e29; letter-spacing: -0.5px; position: relative; z-index: 1; } .modern-breadcrumb { background: rgba(255, 255, 255, 0.85); padding: 12px 24px; border-radius: 50px; box-shadow: 0 8px 25px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); position: relative; z-index: 1; font-size: 0.95rem; align-items: center; } .modern-breadcrumb .breadcrumb-item a { color: #6c757d; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .modern-breadcrumb .breadcrumb-item a:hover { color: #ff9f1c; text-shadow: 0 0 10px rgba(255, 159, 28, 0.2); } .modern-breadcrumb .breadcrumb-item.active { color: #1a1e29; font-weight: 700; } .modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f105"; font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif; font-weight: 900; color: #adb5bd; font-size: 0.8rem; vertical-align: middle; margin: 0 10px; } /* Home/Index & Appointment */ .slot-btn { min-width: 120px; font-size: 1.1rem; } .transition-all { transition: all 0.3s ease; } /* Blog/Detail */ .blog-content h2, .blog-content h3 { margin-top: 2rem; margin-bottom: 1rem; font-weight: bold; } .blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; } /* ======================================= */ /* PREMIUM UI ADDITIONS */ /* ======================================= */ /* Glassmorphism */ .glass-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); border-radius: 20px; } .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; position: relative; } /* Micro-animations */ .hover-lift { transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important; } .hover-glow { transition: all 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 20px rgba(255, 209, 0, 0.6) !important; transform: scale(1.02); } .image-zoom-container { overflow: hidden; } .image-zoom-container img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .image-zoom-container:hover img { transform: scale(1.1); } /* Gradients and Shadows */ .bg-gradient-primary { background: linear-gradient(135deg, #ffd100 0%, #ffaa00 100%); } .bg-gradient-soft { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } .bg-gradient-dark { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); } .text-gradient { background: linear-gradient(135deg, #ffd100 0%, #ffaa00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .shadow-premium { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; } .shadow-colored { box-shadow: 0 15px 35px rgba(255, 209, 0, 0.2) !important; } /* Icon containers */ .icon-box { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); margin: 0 auto 20px auto; transition: all 0.4s ease; position: relative; z-index: 1; } .icon-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 209, 0, 0.1) 0%, rgba(255, 209, 0, 0) 100%); z-index: -1; transition: opacity 0.4s ease; } .hover-lift:hover .icon-box { transform: scale(1.1) rotate(5deg); background: #ffd100; } .hover-lift:hover .icon-box i { color: #fff !important; }