/* ============================================ ELFI'S ANGELS - PREMIUM LUXURY ENHANCEMENTS ============================================ Elite styling enhancements for Elfi's Angels kennel Sophisticated typography, luxury animations, and high-end aesthetics Premium color palette with silver accents and elegant transitions ============================================ */ /* ============================================ */ /* PREMIUM LUXURY COLOR PALETTE - CASUAL EDITION */ /* ============================================ */ :root { /* Softer Dark Background Gradient */ --luxury-dark: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%); --elite-black: #0f0f0f; --premium-charcoal: #2a2a2a; --sophisticated-gray: #3a3a3a; /* Warmer Silver Accents */ --royal-silver: #D3D3D3; /* Lighter, warmer silver */ --platinum: #E8E8E8; /* Softer platinum */ --sterling-silver: #C0C0C0; /* Classic silver */ --chrome: #DCDCDC; /* Warm chrome accent */ --pearl-silver: #F5F5F5; /* Very light pearl */ /* Friendlier Text Colors */ --luxury-white: #F8F8F8; /* Softer white */ --pearl-white: #F0F0F0; /* Warm pearl white */ --silver-text: #E0E0E0; /* Lighter silver text */ --chrome-text: #CCCCCC; /* Softer chrome accents */ /* Gentler Shadows */ --luxury-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); --silver-glow: 0 0 15px rgba(211, 211, 211, 0.2); --premium-border: 1px solid rgba(211, 211, 211, 0.15); } /* Feedback implementation: clearer IA, warmer palette, compact content. */ :root { --ea-ink: #f7f2e9; --ea-muted: #c9beb0; --ea-cream: #050505; --ea-paper: #121212; --ea-sage: #d0d0d0; --ea-sage-dark: #0a0a0a; --ea-gold: #bfc1c4; --ea-gold-soft: #f3f4f6; --ea-line: rgba(225, 225, 225, 0.16); --ea-shadow: 0 18px 45px rgba(0, 0, 0, 0.34); } html body { background: var(--ea-cream) !important; color: var(--ea-ink) !important; } html body::before, html body::after { display: none !important; } html body .navbar { height: 78px !important; padding: 0 !important; background: rgba(8, 10, 9, 0.96) !important; border-bottom: 1px solid rgba(240, 210, 138, 0.16) !important; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.36) !important; } html body .nav-container { padding: 0 clamp(18px, 4vw, 42px) !important; gap: clamp(0.75rem, 2vw, 1.5rem) !important; } html body .logo-svg { height: 70px !important; filter: none !important; } html body .nav-menu { gap: 0.35rem !important; align-items: center; } html body .nav-link { color: var(--ea-ink) !important; padding: 0.55rem 0.75rem !important; border-radius: 8px !important; font-size: 0.92rem !important; font-weight: 650 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body .nav-link::before, html body .nav-link::after { display: none !important; } html body .nav-link:hover, html body .nav-link:focus, html body .nav-link.active { background: rgba(214, 167, 86, 0.12) !important; color: var(--ea-ink) !important; box-shadow: none !important; transform: none !important; text-shadow: none !important; } html body .hamburger .bar, html body .bar { background: var(--ea-ink) !important; } html body .hero, html body .gsd-hero { background: linear-gradient(135deg, rgba(0, 0, 0, 0.94), rgba(35, 35, 35, 0.84)), url('../images/optimized/dogs/cover/WhatsApp%20Image%202026-04-14%20at%205.36.57%20PM.jpeg') center/cover !important; } html body .hero::before, html body .gsd-hero::before { display: none !important; } html body .hero-content h1, html body .gsd-hero h1 { background: none !important; -webkit-text-fill-color: var(--ea-ink) !important; color: var(--ea-ink) !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32) !important; filter: none !important; letter-spacing: 0 !important; } html body .hero-content h1::after, html body .gsd-hero h1::after { display: none !important; } html body .hero-content p, html body .hero-seo-copy, html body .gsd-hero__lead { color: rgba(247, 242, 233, 0.86) !important; letter-spacing: 0 !important; } html body .hero-content p.breed-type { background: rgba(18, 23, 19, 0.88) !important; color: var(--ea-ink) !important; border: 1px solid rgba(240, 210, 138, 0.45) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important; border-radius: 8px !important; } html body .hero-image img, html body .gsd-hero__media, html body .dog-slider, html body .puppy-card { border-radius: 8px !important; } html body .btn { border-radius: 8px !important; letter-spacing: 0 !important; text-transform: none !important; } html body .btn-primary { background: linear-gradient(135deg, var(--ea-gold-soft), var(--ea-gold)) !important; color: #11140f !important; border-color: rgba(225, 225, 225, 0.55) !important; box-shadow: 0 12px 26px rgba(255, 255, 255, 0.16) !important; } html body .btn-secondary { background: rgba(247, 242, 233, 0.08) !important; color: var(--ea-ink) !important; border-color: rgba(247, 242, 233, 0.46) !important; } html body .about, html body .puppies, html body .breed-programs, html body .breed-program-row, html body .gsd-parent-section, html body .faq-section, html body .youtube-videos { background: var(--ea-cream) !important; color: var(--ea-ink) !important; } html body #puppies { height: auto !important; min-height: auto !important; padding: 105px 0 72px !important; align-items: flex-start !important; } html body #about { height: auto !important; min-height: auto !important; } html body .section-header h2, html body .section-header h3, html body .breed-programs__header h3, html body .dogs-section__header h3, html body .youtube-videos h3, html body .faq-section h2, html body .faq-section h3 { background: none !important; -webkit-text-fill-color: var(--ea-ink) !important; color: var(--ea-ink) !important; text-shadow: none !important; filter: none !important; letter-spacing: 0 !important; } html body h2::before, html body h2::after { background: linear-gradient(90deg, transparent, var(--ea-gold), transparent) !important; box-shadow: none !important; } html body .section-header p, html body .about-description-full p, html body .puppies-description p, html body .breed-programs__header p, html body .dogs-section__header p, html body .gsd-parent-section .section-header p { color: var(--ea-muted) !important; letter-spacing: 0 !important; } html body .availability-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr); gap: 1.5rem; align-items: stretch; margin: 2rem auto 1.5rem; padding: clamp(1.2rem, 2vw, 1.6rem); max-width: 980px; background: linear-gradient(135deg, rgba(28, 28, 28, 0.98), rgba(5, 5, 5, 0.98)); border: 1px solid rgba(225, 225, 225, 0.22); border-radius: 8px; box-shadow: var(--ea-shadow); } html body .availability-panel__eyebrow { display: inline-flex; margin-bottom: 0.55rem; color: var(--ea-gold-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } html body .availability-panel h3 { margin: 0 0 0.55rem; color: var(--ea-ink) !important; font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: 0 !important; text-shadow: none !important; } html body .availability-panel p { margin: 0; color: rgba(247, 242, 233, 0.82) !important; line-height: 1.65; } html body .availability-panel__contact { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; margin-top: 1rem; padding: 0.7rem 0.9rem; color: var(--ea-sage) !important; border: 1px solid rgba(225, 225, 225, 0.34); border-radius: 8px; background: rgba(225, 225, 225, 0.08); font-weight: 750; text-decoration: none !important; } html body .availability-panel__contact:hover, html body .availability-panel__contact:focus { background: var(--ea-sage); color: #07100a !important; } html body .litter-schedule { min-width: 0; padding: 1rem; border: 1px solid rgba(225, 225, 225, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.04); } html body .litter-schedule h4, html body .breeding-care-note h4 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.85rem; color: var(--ea-ink) !important; font-size: 1rem; letter-spacing: 0 !important; text-shadow: none !important; } html body .litter-schedule ul { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; } html body .litter-schedule li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(225, 225, 225, 0.12); color: var(--ea-muted); overflow-wrap: anywhere; } html body .litter-schedule li:last-child { padding-bottom: 0; border-bottom: 0; } html body .litter-schedule time { flex: 0 0 auto; color: var(--ea-ink); font-weight: 750; } html body .breeding-care-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 980px; margin: 0 auto 1.75rem; } html body .breeding-care-note__item { padding: 1.15rem; background: var(--ea-paper); border: 1px solid var(--ea-line); border-radius: 8px; box-shadow: var(--ea-shadow); } html body .breeding-care-note p { margin: 0; color: var(--ea-muted) !important; line-height: 1.65; } html body .sold-section-heading { max-width: 980px; margin: 2rem auto 0; text-align: left; } html body .sold-section-heading span { display: inline-flex; color: var(--ea-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } html body .sold-section-heading h3 { margin: 0.35rem 0 0.25rem; color: var(--ea-ink) !important; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: 0 !important; text-shadow: none !important; } html body .sold-section-heading p { margin: 0; color: var(--ea-muted) !important; } html body .puppies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 980px; margin: 1.25rem auto 0 !important; } html body .puppy-card, html body .feature, html body .breed-male-card, html body .breed-female-card, html body .dogs-profile-card, html body .gsd-proof__grid div { background: var(--ea-paper) !important; border: 1px solid var(--ea-line) !important; box-shadow: var(--ea-shadow) !important; color: var(--ea-ink) !important; } html body .puppy-card:hover { transform: translateY(-4px) !important; border-color: rgba(185, 130, 55, 0.45) !important; } html body .card-content h3, html body .feature h4, html body .breed-card-heading h5, html body .dogs-profile-card h3, html body .dogs-profile-card h4, html body .breed-credentials h6, html body .gsd-proof__grid strong { color: var(--ea-ink) !important; text-shadow: none !important; letter-spacing: 0 !important; } html body .details, html body .card-content h3 .gender-prefix, html body .feature p, html body .breed-info-list dd, html body .breed-info-list dt, html body .breed-credential-list li, html body .dogs-profile-card__body p, html body .gsd-proof__grid span { color: var(--ea-muted) !important; letter-spacing: 0 !important; } html body .sold-badge { background: #7f1d1d !important; color: #f7f2e9 !important; border-color: rgba(127, 29, 29, 0.2) !important; } html body .faq-section { max-width: 1100px; margin: 2.5rem auto 0 !important; padding: clamp(2rem, 4vw, 3rem) !important; border: 1px solid var(--ea-line) !important; border-radius: 8px !important; box-shadow: var(--ea-shadow); } html body .faq-list { display: grid; gap: 0.75rem; max-width: 920px; margin: 1.75rem auto 0; } html body .faq-card { min-height: 0 !important; padding: 0 !important; background: var(--ea-paper) !important; border: 1px solid var(--ea-line) !important; border-radius: 8px !important; box-shadow: none !important; overflow: hidden; } html body .faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem 1.1rem; color: var(--ea-ink); font-weight: 750; line-height: 1.4; list-style: none; } html body .faq-card summary::-webkit-details-marker { display: none; } html body .faq-card summary::after { content: "+"; flex: 0 0 28px; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(225, 225, 225, 0.1); color: var(--ea-sage); font-size: 1.1rem; line-height: 1; } html body .faq-card[open] summary::after { content: "-"; background: var(--ea-sage); color: #07100a; } html body .faq-card p { margin: 0 !important; padding: 0 1.1rem 1.1rem; color: var(--ea-muted) !important; line-height: 1.65 !important; } html body .faq-card a, html body .footer a { color: var(--ea-gold) !important; } html body .gsd-proof { background: #0e0e0e !important; } html body .footer { background: linear-gradient(135deg, #020202, #111111) !important; color: var(--ea-ink) !important; } html body .footer-section h2, html body .footer-section h4, html body .footer-section p, html body .footer-contact-info p { color: var(--ea-ink) !important; } html body .footer-logo-img { height: 58px !important; } @media (min-width: 1101px) { html body #home, html body #puppies, html body #about, html body #faq { min-height: auto !important; } html body #puppies { display: block !important; padding: 105px 0 72px !important; } html body #faq .faq-list { max-width: 920px; } } @media (max-width: 980px) { html body .availability-panel { grid-template-columns: 1fr; text-align: left; } html body .availability-panel__contact { width: 100%; justify-content: center; } html body .puppies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body .breeding-care-note { grid-template-columns: 1fr; max-width: 720px; } } @media (max-width: 520px) { html body .litter-schedule li { align-items: flex-start; flex-direction: column; gap: 0.2rem; } html body .litter-schedule time { flex: 0 1 auto; } } @media (max-width: 768px) { html body .navbar { height: 64px !important; } html body .logo-svg { height: 52px !important; } html body .nav-menu { top: 64px !important; height: calc(100vh - 64px) !important; background: rgba(8, 10, 9, 0.98) !important; border-top: 1px solid var(--ea-line) !important; } html body .nav-menu li { margin: 0.45rem 0 !important; } html body .nav-link { font-size: 1rem !important; color: var(--ea-ink) !important; } html body #puppies { padding: 88px 0 52px !important; } html body .puppies-grid { grid-template-columns: 1fr !important; } html body .sold-section-heading { text-align: center; } } /* Softer body background with subtle texture */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(211, 211, 211, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.03) 0%, transparent 50%), url('data:image/svg+xml,'); pointer-events: none; z-index: -1; } /* Gentle floating particles animation - Warmer Silver */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,'); pointer-events: none; z-index: -1; } /* ============================================ */ /* PREMIUM TYPOGRAPHY ENHANCEMENTS */ /* ============================================ */ /* Casual body typography */ body { font-family: 'Poppins', sans-serif; background: linear-gradient(180deg, rgba(80, 80, 80, 0.9) 0%, rgba(40, 40, 40, 0.95) 50%, rgba(20, 20, 20, 0.98) 100%); color: var(--luxury-white); font-weight: 400; letter-spacing: 0.3px; } /* Enable smooth scrolling for the entire page */ html { scroll-behavior: smooth; } /* Friendly headings with casual fonts */ h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--luxury-white); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); letter-spacing: 0.5px; } h1 { font-size: 4.5rem; background: linear-gradient(45deg, #E8E8E8 0%, #FFFFFF 20%, #C0C0C0 40%, #FFFFFF 60%, #B8B8B8 80%, #E8E8E8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; text-align: center; margin-bottom: 2rem; text-shadow: 0 0 20px rgba(192, 192, 192, 0.5); filter: drop-shadow(0 4px 8px rgba(192, 192, 192, 0.3)); position: relative; } h1::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.6), rgba(224, 224, 224, 0.8), rgba(192, 192, 192, 0.6), transparent); box-shadow: 0 0 10px rgba(192, 192, 192, 0.4); } h2 { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--platinum); margin-bottom: 1.5rem; position: relative; font-weight: 600; text-shadow: 0 0 15px rgba(192, 192, 192, 0.4); filter: drop-shadow(0 2px 6px rgba(192, 192, 192, 0.2)); } h2::before { content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.7), rgba(224, 224, 224, 0.9), rgba(192, 192, 192, 0.7), transparent); box-shadow: 0 0 8px rgba(192, 192, 192, 0.3); } h2::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--royal-silver), transparent); border-radius: 2px; } /* Casual paragraph styling */ p { font-family: 'Poppins', sans-serif; font-size: 1.1rem; line-height: 1.7; color: var(--silver-text); margin-bottom: 1.5rem; font-weight: 400; letter-spacing: 0.2px; } /* ============================================ */ /* LUXURY NAVIGATION ENHANCEMENTS */ /* ============================================ */ .navbar { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(15px) saturate(150%); border-bottom: 1px solid rgba(192, 192, 192, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(192, 192, 192, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); padding: 1.5rem 0; height: 80px; /* Fixed height for consistent navigation */ display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* NO TRANSFORMS OR ANIMATIONS */ transform: none !important; } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 50px; display: flex; justify-content: space-between; align-items: center; } .logo-svg { height: 85px; width: auto; filter: drop-shadow(0 3px 10px rgba(192, 192, 192, 0.2)); transition: all 0.3s ease; } .logo-svg:hover { filter: drop-shadow(0 5px 15px rgba(192, 192, 192, 0.3)); transform: scale(1.03); } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1rem; color: var(--pearl-white); text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 25px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; letter-spacing: 0.3px; text-transform: capitalize; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .nav-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent, rgba(192, 192, 192, 0.1), transparent); border-radius: 25px; opacity: 0; transition: opacity 0.3s ease; } .nav-link:hover::before { opacity: 1; } .nav-link:hover { color: #E8E8E8; text-shadow: 0 0 10px rgba(192, 192, 192, 0.6), 0 0 20px rgba(224, 224, 224, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: translateY(-2px); background: rgba(192, 192, 192, 0.1); box-shadow: 0 4px 15px rgba(192, 192, 192, 0.15); } /* ============================================ */ /* PREMIUM HERO SECTION */ /* ============================================ */ /* ============================================ */ /* HERO SECTION - CLEAN IMPLEMENTATION */ /* ============================================ */ .hero { min-height: 100vh !important; height: 100vh !important; background: linear-gradient(135deg, rgba(26, 26, 26, 0.85) 0%, rgba(42, 42, 42, 0.75) 50%, rgba(26, 26, 26, 0.9) 100%), url('data:image/svg+xml,') !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; position: relative !important; overflow: hidden !important; padding: 140px 0 120px 0 !important; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(211, 211, 211, 0.03) 75%); pointer-events: none; animation: pulse 4s ease-in-out infinite; } .hero .container { width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 60px !important; align-self: flex-end !important; } .hero-wrapper { display: flex; align-items: center; gap: 3rem; width: 100%; } .hero-content { flex: 1; max-width: 600px; z-index: 2; text-align: left; margin: 0; padding: 0; } .hero-image { flex: 1; display: flex; justify-content: center; align-items: center; z-index: 2; margin: 0; padding: 0; } .hero-image img { max-width: 100%; height: auto; max-height: 70vh; border-radius: 15px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease; } .hero-image img:hover { transform: scale(1.02); } .hero-content h1 { font-family: 'Cinzel', serif; font-size: 4.2rem; font-weight: 500; background: linear-gradient(45deg, var(--royal-silver) 0%, var(--platinum) 25%, var(--royal-silver) 50%, var(--chrome) 75%, var(--royal-silver) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gentleShimmer 4s ease-in-out infinite; line-height: 1.3; margin-bottom: 1.5rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); filter: drop-shadow(0 0 5px rgba(211, 211, 211, 0.15)); letter-spacing: 0.5px; } .hero-subtitle { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 400; color: var(--platinum); text-transform: none; letter-spacing: 0.8px; margin-bottom: 2rem; text-align: center; position: relative; opacity: 0.9; } .hero-subtitle::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 2px; background: linear-gradient(90deg, transparent, var(--royal-silver), transparent); } @keyframes gentleShimmer { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(211, 211, 211, 0.15)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 12px rgba(232, 232, 232, 0.3)); } } @keyframes shimmerSilver { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.3)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(229, 228, 226, 0.6)); } } .hero-content p { font-size: 1.3rem; color: var(--pearl-white); margin-bottom: 1.5rem; font-weight: 300; line-height: 1.6; } .hero-content p i { color: var(--royal-silver); margin-right: 0.5rem; } .breed-type { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--royal-silver); font-weight: 500; letter-spacing: 0.5px; margin-bottom: 2.5rem; text-transform: none; } .learn-more-link { color: var(--platinum); text-decoration: underline; text-decoration-color: var(--royal-silver); transition: all 0.3s ease; } .learn-more-link:hover { color: var(--royal-silver); text-shadow: 0 0 8px rgba(192, 192, 192, 0.5); } /* ============================================ */ /* LUXURY BUTTON STYLES */ /* ============================================ */ .btn { font-family: 'Poppins', sans-serif; font-weight: 500; padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.8rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; text-transform: none; letter-spacing: 0.3px; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } .btn:hover::before { left: 100%; } .btn-primary { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%); color: var(--elite-black); font-weight: 600; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3), 0 2px 8px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: 2px solid var(--royal-silver); border-radius: 8px; position: relative; overflow: hidden; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-primary::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); animation: silverShimmer 3s infinite; } .btn-primary:hover { background: linear-gradient(135deg, var(--sterling-silver) 0%, var(--royal-silver) 50%, var(--sterling-silver) 100%); transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 35px rgba(192, 192, 192, 0.4), 0 5px 15px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(192, 192, 192, 0.3); color: var(--elite-black); border-color: var(--sterling-silver); } .btn-secondary { background: linear-gradient(135deg, rgba(192, 192, 192, 0.05), rgba(220, 220, 220, 0.1)); color: var(--royal-silver); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border: 2px solid var(--royal-silver); border-radius: 8px; box-shadow: 0 6px 20px rgba(192, 192, 192, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .btn-secondary:hover::before { left: 100%; } .btn-secondary:hover { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%); color: var(--elite-black); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(192, 192, 192, 0.3), 0 3px 10px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 15px rgba(192, 192, 192, 0.2); border-color: var(--sterling-silver); } .hero-buttons { display: flex; gap: 2rem; margin-top: 2.5rem; } /* ============================================ */ /* CASUAL SECTION STYLING */ /* ============================================ */ .about, .puppies { padding: 7rem 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(35, 35, 35, 0.9) 50%, rgba(26, 26, 26, 0.95) 100%); position: relative; } .about::before, .puppies::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(211, 211, 211, 0.3), transparent); } .container { max-width: 1400px; margin: 0 auto; padding: 0 60px; } .section-header { text-align: center; margin-bottom: 6rem; position: relative; padding: 0 2rem; } .section-header h2 { font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 600; margin-bottom: 1.5rem; position: relative; letter-spacing: 0.8px; line-height: 1.3; } .section-header h2 i { color: var(--royal-silver); margin-right: 0.8rem; font-size: 2.8rem; } .premium-tagline { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--royal-silver); text-transform: none; letter-spacing: 1px; margin-bottom: 1rem; text-align: center; } .elite-description { font-family: 'Poppins', sans-serif; font-size: 1.3rem; color: var(--silver-text); font-style: normal; text-align: center; font-weight: 400; line-height: 1.6; } /* ============================================ */ /* LUXURY CARD ENHANCEMENTS */ /* ============================================ */ .feature, .portfolio-item { background: linear-gradient(145deg, rgba(26, 26, 26, 0.9) 0%, rgba(40, 40, 40, 0.8) 50%, rgba(26, 26, 26, 0.9) 100%); border: 1px solid rgba(192, 192, 192, 0.2); border-radius: 20px; padding: 1rem; margin: 0.25rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(10px); } /* Puppy cards with black background */ .puppy-card { background: linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%) !important; border: 1px solid rgba(192, 192, 192, 0.4) !important; border-radius: 20px; padding: 1rem; margin: 0.25rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(10px); color: #ffffff !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(192, 192, 192, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Smaller font size for sire and dam names */ .puppy-card .sire, .puppy-card .dam { font-size: 0.85rem; color: var(--chrome-text); margin-bottom: 0.3rem; font-weight: 400; } .puppy-card .sire i, .puppy-card .dam i { font-size: 0.8rem; margin-right: 0.4rem; } .feature::before, .portfolio-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(192, 192, 192, 0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .puppy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .feature:hover::before, .portfolio-item:hover::before { opacity: 1; } .puppy-card:hover::before { opacity: 1; } .feature:hover, .portfolio-item:hover { transform: translateY(-5px) scale(1.01); border-color: rgba(211, 211, 211, 0.3); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2), 0 0 20px rgba(211, 211, 211, 0.1); } .puppy-card:hover { transform: translateY(-5px) scale(1.01); border-color: rgba(224, 224, 224, 0.6) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(192, 192, 192, 0.3), 0 0 60px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .puppy-card img { border-radius: 15px; transition: all 0.3s ease; filter: brightness(0.95) contrast(1.05); } .puppy-card:hover img { filter: brightness(1) contrast(1.1); transform: scale(1.02); } /* ============================================ */ /* CASUAL FOOTER */ /* ============================================ */ .footer { background: linear-gradient(135deg, rgba(70, 70, 70, 0.95) 0%, rgba(60, 60, 60, 0.97) 25%, rgba(50, 50, 50, 0.98) 50%, rgba(60, 60, 60, 0.97) 75%, rgba(70, 70, 70, 0.95) 100%); border-top: 1px solid rgba(120, 120, 120, 0.4); padding: 3rem 0 1.5rem; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--royal-silver), var(--platinum), var(--royal-silver), transparent); } /* ============================================ */ /* PREMIUM ANIMATIONS */ /* ============================================ */ @keyframes casualFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes silverGlow { 0%, 100% { box-shadow: 0 0 15px rgba(211, 211, 211, 0.2); } 50% { box-shadow: 0 0 25px rgba(232, 232, 232, 0.4); } } @keyframes gentleSparkle { 0%, 100% { filter: drop-shadow(0 0 3px rgba(211, 211, 211, 0.2)); } 50% { filter: drop-shadow(0 0 8px rgba(232, 232, 232, 0.5)); } } @keyframes silverShimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } .casual-animate { animation: casualFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Add gentle sparkle animation to elements */ .section-header h2 i, .trust-item i, .nav-link:hover { animation: gentleSparkle 3s ease-in-out infinite; } /* ============================================ */ /* CASUAL MOBILE RESPONSIVENESS */ /* ============================================ */ @media (max-width: 768px) { h1 { font-family: 'Cinzel', serif; font-size: 3.2rem; font-weight: 500; letter-spacing: 0.3px; } h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 600; letter-spacing: 0.5px; } .hero { padding: 60px 0 100px 0; } .hero .container { padding: 0 30px; } .hero-wrapper { flex-direction: column; gap: 2rem; align-items: center; } .hero-content { text-align: center; } .hero-content { max-width: 100%; text-align: center; } .hero-buttons { flex-direction: column; align-items: center; gap: 1.5rem; } .btn { padding: 1rem 2rem; font-size: 0.9rem; } .nav-container { padding: 0 30px; } .container { padding: 0 30px; } .section-header { padding: 0 1rem; } .puppy-card, .feature, .portfolio-item { margin: 0.1rem; padding: 0.75rem; } /* Fix for YouTube Videos section on mobile */ .youtube-videos { padding: 0.75rem; margin: 0.25rem 0; } .videos-grid { gap: 1rem; } /* Fix for Puppies Content Grid on mobile */ .puppies-content-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; } .puppies-description { text-align: center; } } /* ============================================ */ /* SECTION SPACING AND LAYOUT FIXES */ /* ============================================ */ /* Fix section padding and spacing issues */ section { padding: 25px 0 !important; margin: 0 !important; } .puppies { height: auto !important; min-height: auto !important; padding: 25px 0 !important; background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(15, 15, 15, 0.99) 25%, rgba(10, 10, 10, 1) 50%, rgba(15, 15, 15, 0.99) 75%, rgba(20, 20, 20, 0.98) 100%) !important; display: block !important; } .about { padding: 25px 0 0 0 !important; background: linear-gradient(180deg, rgba(80, 80, 80, 0.95) 0%, rgba(70, 70, 70, 0.97) 25%, rgba(60, 60, 60, 0.98) 50%, rgba(70, 70, 70, 0.97) 75%, rgba(80, 80, 80, 0.95) 100%) !important; } /* Container consistent padding */ .container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 15px !important; } /* Section headers */ .section-header { text-align: center !important; margin-bottom: 1rem !important; padding: 0 2rem !important; } .section-header h2 { font-size: 3rem !important; color: var(--royal-silver) !important; margin-bottom: 1.5rem !important; font-family: 'Playfair Display', serif !important; font-weight: 600 !important; line-height: 1.2 !important; } /* ============================================ */ /* STANDALONE SECTIONS LAYOUT */ /* ============================================ */ /* YouTube Videos Section - Full width standalone */ .youtube-videos { width: 100% !important; margin: 0 0 0.5rem 0 !important; padding: 1rem !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 15px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; } /* Remove gap between article and YouTube videos */ .about-content article { margin-bottom: 0 !important; padding-bottom: 0 !important; } .about-content { margin-bottom: 0 !important; } .youtube-videos h3 { text-align: center !important; margin-bottom: 0.75rem !important; color: #2c3e50 !important; font-size: 1.8rem !important; } /* Championship Gallery - Full width standalone */ .championship-gallery { width: 100% !important; margin: 0.5rem 0 !important; padding: 1rem !important; background: rgba(10, 10, 10, 0.95) !important; border-radius: 15px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } .championship-gallery h3 { text-align: center !important; margin-bottom: 0.75rem !important; color: var(--royal-silver) !important; font-size: 1.8rem !important; background: linear-gradient(45deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } /* Responsive design for standalone sections */ @media (max-width: 768px) { .videos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .youtube-videos, .championship-gallery { margin: 0.5rem 0 !important; padding: 0.75rem !important; background: rgba(10, 10, 10, 0.95) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } .youtube-videos h3, .championship-gallery h3 { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; color: var(--royal-silver) !important; background: linear-gradient(45deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } section { padding: 20px 0 !important; } } @media (max-width: 480px) { .videos-grid { grid-template-columns: 1fr !important; } .youtube-videos h3, .championship-gallery h3 { font-size: 1.3rem !important; } } /* ============================================ */ /* YOUTUBE VIDEOS SECTION - PREMIUM STYLING */ /* ============================================ */ .youtube-videos { width: 100% !important; background: linear-gradient(145deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.9)) !important; border: 1px solid rgba(192, 192, 192, 0.1) !important; border-radius: 20px !important; padding: 1.5rem !important; box-shadow: 0 20px 60px rgba(192, 192, 192, 0.08) !important; backdrop-filter: blur(15px) !important; overflow: visible !important; margin: 2rem auto !important; max-width: 1400px !important; } .youtube-videos h3 { font-size: 2.5rem !important; color: var(--royal-silver) !important; margin-bottom: 2rem !important; text-align: center !important; font-weight: 700 !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important; font-family: 'Poppins', sans-serif !important; } .videos-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; margin-top: 0.5rem !important; } .video-thumbnail-link { text-decoration: none !important; color: inherit !important; display: block !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; border-radius: 15px !important; overflow: hidden !important; background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(40, 40, 40, 0.8)) !important; border: 1px solid rgba(192, 192, 192, 0.1) !important; } .video-thumbnail-link:hover { transform: translateY(-5px) scale(1.02) !important; box-shadow: 0 15px 40px rgba(192, 192, 192, 0.15) !important; border-color: var(--shimmer-silver) !important; } .video-thumbnail { position: relative !important; height: 60% !important; overflow: hidden !important; } .video-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s ease !important; } .video-thumbnail-link:hover .video-thumbnail img { transform: scale(1.1) !important; } .play-overlay { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(192, 192, 192, 0.9) !important; border-radius: 50% !important; width: 60px !important; height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; color: #000 !important; transition: all 0.3s ease !important; } .video-thumbnail-link:hover .play-overlay { background: var(--royal-silver) !important; transform: translate(-50%, -50%) scale(1.1) !important; } .video-thumbnail-link h4 { padding: 1rem !important; margin: 0 !important; font-size: 1.1rem !important; color: var(--pearl-white) !important; text-align: center !important; font-family: 'Poppins', sans-serif !important; font-weight: 500 !important; height: 40% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ============================================ */ /* PUPPIES SECTION - PREMIUM STYLING */ /* ============================================ */ .puppies-content-grid { display: grid !important; grid-template-columns: 50% 25% 25% !important; gap: 2rem !important; margin-top: 2rem !important; align-items: start !important; } .puppies-description { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 2rem !important; background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(20, 20, 20, 0.8)) !important; border: 1px solid rgba(192, 192, 192, 0.1) !important; border-radius: 20px !important; box-shadow: 0 10px 30px rgba(192, 192, 192, 0.05) !important; height: fit-content !important; } .puppies-description p { color: var(--silver-text) !important; font-size: 1.1rem !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; font-family: 'Poppins', sans-serif !important; } .price-display { background: linear-gradient(145deg, rgba(70, 70, 70, 0.95) 0%, rgba(60, 60, 60, 0.97) 25%, rgba(50, 50, 50, 0.98) 50%, rgba(60, 60, 60, 0.97) 75%, rgba(70, 70, 70, 0.95) 100%) !important; color: #fff !important; padding: 1.5rem 2rem !important; border-radius: 15px !important; font-size: 1.5rem !important; font-weight: 700 !important; text-align: center !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(192, 192, 192, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(192, 192, 192, 0.3) !important; font-family: 'Poppins', sans-serif !important; height: fit-content !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; position: relative !important; } .price-display::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, rgba(192, 192, 192, 0.3), rgba(224, 224, 224, 0.4), rgba(192, 192, 192, 0.3)); border-radius: 17px; z-index: -1; opacity: 0.7; } .contact-info { text-align: center !important; background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(20, 20, 20, 0.8)) !important; border: 1px solid rgba(192, 192, 192, 0.1) !important; border-radius: 20px !important; padding: 2rem !important; box-shadow: 0 10px 30px rgba(192, 192, 192, 0.05) !important; height: fit-content !important; } .contact-info h4 { color: var(--royal-silver) !important; margin-bottom: 1rem !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; } .contact-info p { color: var(--silver-text) !important; margin: 0.5rem 0 !important; font-family: 'Poppins', sans-serif !important; } /* Mobile Responsive fixes */ @media (max-width: 768px) { section { padding: 40px 0 !important; } .container { padding: 0 20px !important; } .section-header h2 { font-family: 'Playfair Display', serif !important; font-size: 2.2rem !important; font-weight: 600 !important; letter-spacing: 0.5px !important; } .media-content-container { flex-direction: column !important; gap: 1.5rem !important; } .media-content-container .youtube-videos, .media-content-container .championship-gallery { flex: 1 1 auto !important; } .youtube-videos { height: auto !important; min-height: 400px !important; padding: 1.5rem !important; margin: 2rem auto !important; } .videos-grid { grid-template-columns: 1fr !important; height: auto !important; gap: 1rem !important; min-height: auto !important; } .championship-gallery { margin: 1rem 0 !important; padding: 1rem !important; background: rgba(10, 10, 10, 0.95) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } .championship-gallery h3 { font-size: 1.4rem !important; color: var(--royal-silver) !important; background: linear-gradient(45deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .video-thumbnail-link { min-height: 250px !important; } .puppies-content-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .youtube-videos h3 { font-size: 2rem !important; } } @media (max-width: 480px) { .container { padding: 0 8px !important; } .section-header { padding: 0 0.25rem !important; margin-bottom: 0.75rem !important; } .youtube-videos { padding: 0.5rem !important; margin: 0.25rem auto !important; background: rgba(10, 10, 10, 0.95) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } .championship-gallery { padding: 0.5rem !important; margin: 0.25rem auto !important; background: rgba(10, 10, 10, 0.95) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } section { padding: 15px 0 !important; } } /* ============================================ */ /* FIXED HEADER NAVIGATION OFFSET */ /* ============================================ */ /* Simple fixed header approach - all sections positioned below 80px navbar */ section, footer { scroll-margin-top: 140px; position: relative; } /* Ensure consistent spacing for all navigable sections */ #home, #about, #puppies, #footer { scroll-margin-top: 140px; } /* ============================================ */ /* PREMIUM SILVER INTERACTIVE ELEMENTS */ /* ============================================ */ /* WhatsApp Button Premium Silver Styling */ .whatsapp-btn { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%) !important; color: var(--elite-black) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; border: 2px solid var(--royal-silver) !important; border-radius: 25px !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3), 0 2px 8px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; position: relative !important; overflow: hidden !important; letter-spacing: 0.5px !important; transition: all 0.3s ease !important; } .whatsapp-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); animation: silverShimmer 3s infinite; } .whatsapp-btn:hover { background: linear-gradient(135deg, var(--sterling-silver) 0%, var(--royal-silver) 50%, var(--sterling-silver) 100%) !important; transform: translateY(-3px) scale(1.05) !important; box-shadow: 0 15px 35px rgba(192, 192, 192, 0.4), 0 5px 15px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(192, 192, 192, 0.3) !important; border-color: var(--sterling-silver) !important; } /* Floating Buttons Premium Silver Styling */ .floating-whatsapp, .floating-puppies { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; color: var(--elite-black) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; border: 2px solid var(--royal-silver) !important; box-shadow: 0 10px 30px rgba(192, 192, 192, 0.3), 0 3px 10px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } /* FLOATING WHATSAPP BRAND COLOR OVERRIDE - MAXIMUM SPECIFICITY */ .floating-whatsapp, body .floating-whatsapp, html body .floating-whatsapp, .floating-whatsapp.floating-whatsapp { background: transparent !important; border: 3px solid #D3D3D3 !important; color: #D3D3D3 !important; box-shadow: 0 10px 40px rgba(211, 211, 211, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1) !important; } .floating-whatsapp::before, .floating-puppies::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } /* FLOATING WHATSAPP HOVER STATE OVERRIDE */ .floating-whatsapp:hover, body .floating-whatsapp:hover, html body .floating-whatsapp:hover, .floating-whatsapp.floating-whatsapp:hover { background: rgba(211, 211, 211, 0.15) !important; border: 3px solid #D3D3D3 !important; color: #ffffff !important; box-shadow: 0 15px 50px rgba(211, 211, 211, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important; transform: scale(1.1) translateY(-2px) !important; } .floating-whatsapp:hover::before, .floating-puppies:hover::before { left: 100%; } .floating-whatsapp:hover, .floating-puppies:hover { transform: translateY(-5px) scale(1.15) !important; box-shadow: 0 20px 40px rgba(192, 192, 192, 0.4), 0 8px 20px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 25px rgba(192, 192, 192, 0.3) !important; border-color: var(--sterling-silver) !important; } /* Social Media Buttons with Brand Colors and Transparent Background */ .social-btn { background: transparent !important; color: var(--royal-silver) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; border: 2px solid var(--royal-silver) !important; border-radius: 25px !important; box-shadow: 0 6px 20px rgba(192, 192, 192, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; position: relative !important; overflow: hidden !important; letter-spacing: 0.5px !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } /* WhatsApp Silver Styling - MAXIMUM SPECIFICITY */ .social-btn.whatsapp, .whatsapp-btn, body .whatsapp-btn, html body .whatsapp-btn { background: transparent !important; color: #D3D3D3 !important; /* WhatsApp Silver */ border: 2px solid #D3D3D3 !important; backdrop-filter: blur(10px) !important; } .social-btn.whatsapp:hover, .whatsapp-btn:hover, body .whatsapp-btn:hover, html body .whatsapp-btn:hover { background: rgba(211, 211, 211, 0.1) !important; color: #ffffff !important; border: 2px solid #D3D3D3 !important; box-shadow: 0 12px 30px rgba(211, 211, 211, 0.3) !important; transform: translateY(-3px) !important; } /* Facebook Brand Colors */ .social-btn.facebook { background: transparent !important; color: #1877F2 !important; /* Facebook Blue */ border: 2px solid #1877F2 !important; backdrop-filter: blur(10px) !important; } .social-btn.facebook:hover { background: rgba(24, 119, 242, 0.1) !important; color: #ffffff !important; border: 2px solid #1877F2 !important; box-shadow: 0 12px 30px rgba(24, 119, 242, 0.3) !important; transform: translateY(-3px) !important; } /* Instagram Brand Colors */ .social-btn.instagram { background: transparent !important; /* Instagram gradient colors */ background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; border: 2px solid #E4405F !important; border-radius: 25px !important; backdrop-filter: blur(10px) !important; } .social-btn.instagram:hover { background: rgba(228, 64, 95, 0.1) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #E4405F !important; border-radius: 25px !important; box-shadow: 0 12px 30px rgba(228, 64, 95, 0.3) !important; transform: translateY(-3px) !important; } .social-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .social-btn:hover::before { left: 100%; } .social-btn:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; transform: translateY(-3px) scale(1.05) !important; } /* Scroll to Top Button Premium Silver Styling */ .scroll-to-top { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; color: var(--elite-black) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; border: 2px solid var(--royal-silver) !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3), 0 2px 8px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } .scroll-to-top::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); animation: silverShimmer 3s infinite; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.1) !important; box-shadow: 0 15px 35px rgba(192, 192, 192, 0.4), 0 5px 15px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(192, 192, 192, 0.3) !important; border-color: var(--sterling-silver) !important; } /* Carousel Navigation Buttons Premium Silver Styling */ .prev, .next { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; color: var(--elite-black) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; border: 2px solid var(--royal-silver) !important; border-radius: 50% !important; box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3), 0 2px 8px rgba(220, 220, 220, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } .prev::before, .next::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); animation: silverShimmer 2s infinite; } .prev:hover, .next:hover { transform: scale(1.1) !important; box-shadow: 0 10px 25px rgba(192, 192, 192, 0.4), 0 3px 10px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 15px rgba(192, 192, 192, 0.3) !important; border-color: var(--sterling-silver) !important; } /* Slider Dots Premium Silver Styling */ .dot { background: rgba(192, 192, 192, 0.3) !important; border: 2px solid var(--royal-silver) !important; box-shadow: 0 2px 8px rgba(192, 192, 192, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transition: all 0.3s ease !important; } .dot.active, .dot:hover { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; border-color: var(--sterling-silver) !important; box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 8px rgba(192, 192, 192, 0.3) !important; transform: scale(1.2) !important; } /* Form Elements Premium Silver Styling */ input, textarea, select { background: linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(20, 20, 20, 0.8)) !important; color: var(--royal-silver) !important; border: 2px solid rgba(192, 192, 192, 0.2) !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(192, 192, 192, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transition: all 0.3s ease !important; } input:focus, textarea:focus, select:focus { border-color: var(--royal-silver) !important; box-shadow: 0 6px 20px rgba(192, 192, 192, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px rgba(192, 192, 192, 0.2) !important; background: linear-gradient(135deg, rgba(15, 15, 15, 0.9), rgba(25, 25, 25, 0.8)) !important; } input::placeholder, textarea::placeholder { color: rgba(192, 192, 192, 0.6) !important; } /* ============================================ */ /* MOBILE-SPECIFIC LUXURY ENHANCEMENTS */ /* ============================================ */ /* Enhanced Mobile Floating Buttons with Premium Silver Styling */ @media (max-width: 768px) { .floating-buttons { bottom: 20px !important; right: 20px !important; gap: 15px !important; z-index: 1000 !important; display: flex !important; flex-direction: column !important; } .floating-whatsapp, .floating-puppies { min-width: 60px !important; height: 60px !important; padding: 0 12px !important; background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; color: var(--elite-black) !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; border: 2px solid var(--royal-silver) !important; border-radius: 30px !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.4), 0 3px 12px rgba(220, 220, 220, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; font-size: 1.2rem !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .floating-whatsapp::before, .floating-puppies::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); animation: silverShimmer 3s infinite; } .floating-whatsapp:hover, .floating-puppies:hover, .floating-whatsapp:active, .floating-puppies:active { transform: translateY(-3px) scale(1.05) !important; box-shadow: 0 12px 30px rgba(192, 192, 192, 0.5), 0 5px 15px rgba(220, 220, 220, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(192, 192, 192, 0.3) !important; border-color: var(--sterling-silver) !important; } .floating-text { display: none !important; } /* Strong overrides for specific button colors */ .floating-whatsapp.floating-whatsapp { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; border: 2px solid var(--royal-silver) !important; color: var(--elite-black) !important; } .floating-puppies.floating-puppies { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; border: 2px solid var(--royal-silver) !important; color: var(--elite-black) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .floating-puppies.show.show { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 100%) !important; border: 2px solid var(--royal-silver) !important; color: var(--elite-black) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .floating-puppies.hide.hide { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Mobile Button Colors Override */ .btn-primary { background: linear-gradient(135deg, var(--royal-silver) 0%, var(--sterling-silver) 50%, var(--royal-silver) 100%) !important; color: var(--elite-black) !important; border: 2px solid var(--royal-silver) !important; font-size: 0.9rem !important; padding: 0.8rem 1.5rem !important; } .btn-secondary { background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(220, 220, 220, 0.15)) !important; color: var(--royal-silver) !important; border: 2px solid var(--royal-silver) !important; font-size: 0.9rem !important; padding: 0.8rem 1.5rem !important; } /* Hero Section Button Fixes */ .hero .btn-primary, .hero-buttons .btn-primary, .hero-content .btn-primary { background: linear-gradient(135deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%) !important; color: #1a1a1a !important; border: 2px solid #C0C0C0 !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .hero .btn-secondary, .hero-buttons .btn-secondary, .hero-content .btn-secondary { background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(220, 220, 220, 0.15)) !important; color: #C0C0C0 !important; border: 2px solid #C0C0C0 !important; font-weight: 600 !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } /* Hero WhatsApp Button - MAXIMUM SPECIFICITY OVERRIDE */ .hero .whatsapp-btn, .hero-buttons .whatsapp-btn, .hero-content .whatsapp-btn, body .hero .whatsapp-btn, html body .hero .whatsapp-btn { background: transparent !important; color: #D3D3D3 !important; border: 2px solid #D3D3D3 !important; font-weight: 600 !important; box-shadow: 0 8px 25px rgba(211, 211, 211, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .hero .whatsapp-btn:hover, .hero-buttons .whatsapp-btn:hover, .hero-content .whatsapp-btn:hover, body .hero .whatsapp-btn:hover, html body .hero .whatsapp-btn:hover { background: rgba(211, 211, 211, 0.1) !important; color: #ffffff !important; box-shadow: 0 12px 30px rgba(211, 211, 211, 0.3) !important; } /* Remove any red colors from buttons */ .btn[style*="red"], .btn[style*="rgb(255"], button[style*="red"], button[style*="rgb(255"], a[style*="red"], a[style*="rgb(255"] { background: linear-gradient(135deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%) !important; color: #1a1a1a !important; border: 2px solid #C0C0C0 !important; } .whatsapp-btn, body .whatsapp-btn, html body .whatsapp-btn { background: transparent !important; color: #D3D3D3 !important; border: 2px solid #D3D3D3 !important; font-size: 0.9rem !important; padding: 0.8rem 1.5rem !important; } .whatsapp-btn:hover, body .whatsapp-btn:hover, html body .whatsapp-btn:hover { background: rgba(211, 211, 211, 0.1) !important; color: #ffffff !important; border: 2px solid #D3D3D3 !important; } .social-btn { background: transparent !important; font-size: 0.85rem !important; padding: 0.7rem 1.2rem !important; } .social-btn.whatsapp { color: #D3D3D3 !important; border: 2px solid #D3D3D3 !important; } .social-btn.facebook { color: #1877F2 !important; border: 2px solid #1877F2 !important; } .social-btn.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; border: 2px solid #E4405F !important; border-radius: 25px !important; } /* Mobile Scroll to Top Button Fix */ .scroll-to-top { bottom: 180px !important; right: 25px !important; width: 55px !important; height: 55px !important; font-size: 1.2rem !important; z-index: 999998 !important; opacity: 1 !important; visibility: visible !important; margin-right: 5px !important; border-radius: 50% !important; } /* Enhanced Mobile Luxury Experience - Now properly scoped */ @media (max-width: 768px) { .hero { background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(42, 42, 42, 0.85) 50%, rgba(26, 26, 26, 0.95) 100%) !important; } } .hero-content h1 { font-family: 'Cinzel', serif !important; background: linear-gradient(45deg, #C0C0C0 0%, #E0E0E0 25%, #F5F5F5 50%, #E0E0E0 75%, #C0C0C0 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-size: 2.8rem !important; line-height: 1.2 !important; margin-bottom: 1.5rem !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.2)) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } .hero-subtitle { color: #E0E0E0 !important; font-size: 1.2rem !important; margin-bottom: 2rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } .breed-type { color: #C0C0C0 !important; font-size: 1rem !important; background: rgba(192, 192, 192, 0.1) !important; border: 1px solid rgba(192, 192, 192, 0.3) !important; border-radius: 25px !important; padding: 0.5rem 1rem !important; backdrop-filter: blur(10px) !important; } /* Mobile Navigation Enhancement */ .navbar { background: rgba(10, 10, 10, 0.95) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(192, 192, 192, 0.1) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important; } .nav-link { color: #C0C0C0 !important; font-weight: 500 !important; padding: 0.8rem 1.2rem !important; border-radius: 8px !important; transition: all 0.3s ease !important; } .nav-link:hover, .nav-link.active { color: #E0E0E0 !important; background: rgba(192, 192, 192, 0.1) !important; text-shadow: 0 0 8px rgba(192, 192, 192, 0.4) !important; } /* Mobile Puppy Cards Enhancement */ .puppy-card { background: linear-gradient(145deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.9)) !important; border: 2px solid rgba(192, 192, 192, 0.2) !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.1), 0 2px 8px rgba(220, 220, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; margin-bottom: 1.5rem !important; } .puppy-card:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(192, 192, 192, 0.15), 0 4px 12px rgba(220, 220, 220, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px rgba(192, 192, 192, 0.1) !important; } /* Mobile Typography Enhancement */ h1 { background: linear-gradient(135deg, var(--platinum) 0%, var(--royal-silver) 50%, var(--sterling-silver) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-shadow: none !important; font-size: 2rem !important; } h2 { font-family: 'Playfair Display', serif !important; color: var(--royal-silver) !important; text-shadow: 0 2px 4px rgba(192, 192, 192, 0.3) !important; font-size: 1.5rem !important; } /* Mobile Navigation Enhancement */ .navbar { background: linear-gradient(135deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.9)) !important; border-bottom: 1px solid rgba(192, 192, 192, 0.2) !important; box-shadow: 0 4px 15px rgba(192, 192, 192, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px) !important; } .nav-link { color: var(--royal-silver) !important; font-weight: 500 !important; transition: all 0.3s ease !important; } .nav-link:hover, .nav-link:active { color: var(--sterling-silver) !important; text-shadow: 0 0 8px rgba(192, 192, 192, 0.5) !important; } /* Mobile Hero Section Enhancement */ .hero { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important; } .hero::before { background: radial-gradient(circle at 30% 70%, rgba(192, 192, 192, 0.03) 0%, transparent 50%) !important; } .price-display { background: linear-gradient(135deg, rgba(40, 40, 40, 0.9), rgba(60, 60, 60, 0.8)) !important; border: 2px solid rgba(192, 192, 192, 0.2) !important; box-shadow: 0 8px 25px rgba(192, 192, 192, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .price-amount { color: var(--royal-silver) !important; text-shadow: 0 2px 4px rgba(192, 192, 192, 0.3) !important; } /* Mobile Footer Enhancement */ .footer { background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%) !important; border-top: 1px solid rgba(192, 192, 192, 0.1) !important; } .footer-section h4 { color: var(--royal-silver) !important; text-shadow: 0 1px 2px rgba(192, 192, 192, 0.3) !important; } } /* Extra Mobile Enhancements for smaller screens */ @media (max-width: 480px) { .floating-buttons { bottom: 90px !important; right: 15px !important; gap: 10px !important; } .floating-whatsapp, .floating-puppies { min-width: 60px !important; height: 60px !important; font-size: 1.1rem !important; border-radius: 30px !important; } .hero { padding: 140px 0 60px !important; } .hero .container { padding: 0 8px !important; } .hero-wrapper { flex-direction: column !important; gap: 1.5rem !important; } .hero-buttons { flex-direction: column !important; gap: 1rem !important; align-items: center !important; margin-top: 2rem !important; } .btn-primary, .btn-secondary { width: 100% !important; max-width: 280px !important; justify-content: center !important; font-size: 0.85rem !important; padding: 0.75rem 1.25rem !important; border-radius: 25px !important; } .puppy-card { margin-bottom: 1rem !important; border-radius: 15px !important; background: linear-gradient(145deg, rgba(15, 15, 15, 0.95), rgba(25, 25, 25, 0.9)) !important; border: 2px solid rgba(192, 192, 192, 0.15) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .price-display { margin: 1rem 0 !important; padding: 1rem !important; border-radius: 15px !important; background: linear-gradient(135deg, rgba(192, 192, 192, 0.05), rgba(220, 220, 220, 0.1)) !important; border: 1px solid rgba(192, 192, 192, 0.2) !important; } .section-header h2 { font-family: 'Playfair Display', serif !important; font-size: 1.8rem !important; font-weight: 600 !important; margin-bottom: 0.75rem !important; letter-spacing: 0.3px !important; background: linear-gradient(45deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } } /* Portrait Mobile - Extra Safe Positioning */ @media (max-width: 480px) and (orientation: portrait) { .floating-buttons { bottom: 100px !important; right: 15px !important; } /* Scroll to Top Button Mobile Fix */ .scroll-to-top { bottom: 200px !important; right: 20px !important; width: 50px !important; height: 50px !important; font-size: 1.1rem !important; z-index: 999999 !important; opacity: 1 !important; visibility: visible !important; margin-right: 5px !important; border-radius: 50% !important; left: auto !important; } } /* Landscape Mobile Orientation */ @media (max-width: 768px) and (orientation: landscape) { .floating-buttons { bottom: 10px !important; right: 15px !important; gap: 10px !important; } .floating-whatsapp, .floating-puppies { min-width: 50px !important; height: 50px !important; font-size: 1rem !important; } .hero { min-height: 60vh !important; padding: 40px 0 !important; } .hero-wrapper { flex-direction: row !important; gap: 1.5rem !important; } /* Scroll-to-top in landscape */ .scroll-to-top { bottom: 120px !important; right: 20px !important; width: 45px !important; height: 45px !important; } } /* ============================================ */ /* CRITICAL MOBILE FLOATING BUTTON FIXES */ /* ============================================ */ /* Maximum specificity overrides for mobile floating buttons */ @media screen and (max-width: 768px) { /* EMERGENCY FLOATING BUTTON FIXES - HIGHEST PRIORITY */ html body .floating-buttons, html body div.floating-buttons, .floating-buttons.floating-buttons.floating-buttons.floating-buttons { position: fixed !important; bottom: 80px !important; right: 20px !important; z-index: 2147483647 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; max-height: calc(100vh - 120px) !important; overflow: visible !important; } /* EMERGENCY SCROLL-TO-TOP BUTTON FIX */ html body .scroll-to-top, .scroll-to-top.scroll-to-top.scroll-to-top { position: fixed !important; bottom: 250px !important; right: 25px !important; left: auto !important; width: 55px !important; height: 55px !important; z-index: 999999 !important; opacity: 1 !important; visibility: visible !important; border-radius: 50% !important; margin: 0 !important; transform: none !important; } html body .floating-whatsapp, html body a.floating-whatsapp, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp { /* WhatsApp Silver Styling */ background: transparent !important; border: 3px solid #D3D3D3 !important; color: #D3D3D3 !important; /* Size and positioning */ min-width: 65px !important; width: 65px !important; height: 65px !important; border-radius: 32px !important; /* Visibility and layering */ z-index: 2147483647 !important; position: relative !important; opacity: 1 !important; visibility: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; /* Visual effects */ box-shadow: 0 12px 40px rgba(211, 211, 211, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 0 25px rgba(211, 211, 211, 0.2) !important; backdrop-filter: blur(20px) !important; /* Typography */ font-size: 1.3rem !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* Animation and interaction */ transform: translateY(0) scale(1) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: auto !important; } html body .floating-puppies, html body a.floating-puppies, .floating-puppies.floating-puppies.floating-puppies.floating-puppies { /* Keep puppies button silver since it's not a social media platform */ background: transparent !important; border: 3px solid #C0C0C0 !important; color: #C0C0C0 !important; /* Size and positioning */ min-width: 65px !important; width: 65px !important; height: 65px !important; border-radius: 32px !important; /* Visibility and layering */ z-index: 2147483647 !important; position: relative !important; opacity: 1 !important; visibility: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; /* Visual effects */ box-shadow: 0 12px 40px rgba(192, 192, 192, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 0 25px rgba(224, 224, 224, 0.2) !important; backdrop-filter: blur(20px) !important; /* Typography */ font-size: 1.3rem !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; /* Animation and interaction */ transform: translateY(0) scale(1) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: auto !important; } /* Hover states with maximum specificity */ html body .floating-whatsapp:hover, html body a.floating-whatsapp:hover, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp:hover { background: rgba(211, 211, 211, 0.15) !important; border: 3px solid #D3D3D3 !important; color: #ffffff !important; transform: scale(1.1) translateY(-2px) !important; box-shadow: 0 18px 50px rgba(211, 211, 211, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 35px rgba(211, 211, 211, 0.3) !important; } html body .floating-puppies:hover, html body a.floating-puppies:hover, .floating-puppies.floating-puppies.floating-puppies.floating-puppies:hover { background: rgba(192, 192, 192, 0.15) !important; border: 3px solid #D3D3D3 !important; color: #ffffff !important; transform: scale(1.1) translateY(-2px) !important; box-shadow: 0 18px 50px rgba(192, 192, 192, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 35px rgba(224, 224, 224, 0.3) !important; } /* Remove any animation conflicts */ html body .floating-whatsapp, html body .floating-puppies, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp, .floating-puppies.floating-puppies.floating-puppies.floating-puppies { animation: none !important; } /* Show/hide state overrides */ html body .floating-puppies.show, html body .floating-puppies.hide, .floating-puppies.floating-puppies.floating-puppies.show, .floating-puppies.floating-puppies.floating-puppies.hide { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; background: linear-gradient(135deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%) !important; border: 3px solid #C0C0C0 !important; color: #1a1a1a !important; } /* Override any inline styles that might be applied */ html body .floating-whatsapp[style], html body .floating-puppies[style], .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp[style], .floating-puppies.floating-puppies.floating-puppies.floating-puppies[style] { background: linear-gradient(135deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%) !important; border: 3px solid #C0C0C0 !important; color: #1a1a1a !important; opacity: 1 !important; visibility: visible !important; display: flex !important; z-index: 2147483647 !important; } } html body .floating-buttons.floating-buttons--compact, html body div.floating-buttons.floating-buttons--compact, .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; right: 14px !important; bottom: 24px !important; gap: 10px !important; } html body .floating-buttons.floating-buttons--compact .floating-whatsapp, html body .floating-buttons.floating-buttons--compact .floating-puppies, .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact .floating-whatsapp, .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact .floating-puppies { width: 52px !important; min-width: 52px !important; height: 52px !important; padding: 0 !important; border-radius: 50% !important; font-size: 1.05rem !important; } html body .floating-buttons.floating-buttons--compact .floating-text, .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact .floating-text { display: none !important; } /* Elfi's Angels — dog mini-sliders: one visible slide (loads after styles.css) */ .about-portfolio .dog-slider__slides { overflow: hidden !important; } .about-portfolio .dog-slider__slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: none !important; margin: 0 !important; } .about-portfolio .dog-slider__slide.is-active { display: block !important; } /* Scoped fixes for the parent program cards after the global section reset. */ .about .breed-programs { margin-top: 2rem !important; padding: clamp(1.1rem, 2vw, 1.6rem) !important; } .about .breed-program-row { margin: 0 !important; padding: clamp(1.15rem, 2vw, 1.6rem) !important; } .puppies .faq-section { margin-top: 2.5rem !important; padding: 3rem clamp(1rem, 2vw, 1.5rem) 2rem !important; } @media (max-width: 768px) { .about .breed-program-row { padding: 1rem !important; } } @media (max-width: 540px) { .about .breed-programs { padding: 0.5rem !important; } .about .breed-program-row { padding: 0.6rem !important; } .about .breed-male-card, .about .breed-female-card { padding: 0.8rem !important; } } /* Requested parent-section proportions without changing card internals. */ .program-sections-container { max-width: 1400px !important; padding: 0 15px !important; } html body div.floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body .floating-whatsapp, html body a.floating-whatsapp, html body .floating-whatsapp[style], html body a.floating-whatsapp[style], html body .floating-buttons.floating-buttons--compact .floating-whatsapp, html body .floating-buttons.floating-buttons--compact .floating-whatsapp[style], .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp[style], .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact .floating-whatsapp { background: #1fa95a !important; border-color: #1fa95a !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; display: flex !important; box-shadow: 0 12px 28px rgba(31, 169, 90, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } html body .floating-whatsapp:hover, html body a.floating-whatsapp:hover, html body .floating-whatsapp[style]:hover, html body a.floating-whatsapp[style]:hover, html body .floating-buttons.floating-buttons--compact .floating-whatsapp:hover, html body .floating-buttons.floating-buttons--compact .floating-whatsapp[style]:hover, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp:hover, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp[style]:hover, .floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact .floating-whatsapp:hover { background: #188b49 !important; border-color: #188b49 !important; color: #ffffff !important; box-shadow: 0 16px 36px rgba(31, 169, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } @media (min-width: 1101px) { html body #home .hero-buttons { flex-wrap: nowrap; gap: 1rem; } html body #home .hero-buttons .btn { flex: 1 1 0; min-width: 0; padding-right: 1rem; padding-left: 1rem; letter-spacing: 0; text-align: center; } html body #home, html body #puppies, html body #about, html body .breed-program-row, html body #gsd, html body #faq { box-sizing: border-box; min-height: 100svh !important; scroll-margin-top: 0; } html body #puppies { display: flex !important; align-items: center; padding: 90px 0 35px !important; } html body #puppies .puppies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; } html body #about { display: flex !important; align-items: center; padding: 90px 0 35px !important; } html body #about .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } html body .breed-programs { margin: 0 !important; padding: 1rem !important; } html body .breed-program-row { gap: 0.9rem; padding: 90px 1rem 1.25rem !important; } html body .breed-program-row__layout, html body .breed-program-row--standard .breed-program-row__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } html body .breed-female-grid, html body .breed-female-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; } html body .breed-program-row--standard .breed-female-grid--two { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); } html body .breed-male-card, html body .breed-female-card { height: 100%; } html body #gsd { padding: 90px 1rem 1.25rem !important; } html body #gsd .dogs-profile-grid, html body .gsd-parent-section .dogs-profile-grid { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: stretch; } html body #gsd .dogs-profile-card, html body .gsd-parent-section .dogs-profile-card { height: 100%; } html body #gsd .dogs-profile-card__media--captioned .dog-slider, html body .gsd-parent-section .dogs-profile-card__media--captioned .dog-slider { height: clamp(250px, 22vw, 300px); } html body #faq { padding: 90px 1.25rem 1.5rem !important; } html body #faq .faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } /* Final feedback cascade lock: keep the redesigned sections from inheriting old full-screen rules. */ @media (min-width: 1101px) { html body #home, html body #puppies, html body #about, html body #faq, html body #gsd-faq { min-height: auto !important; } html body #puppies { display: block !important; height: auto !important; padding: 105px 0 72px !important; align-items: flex-start !important; } html body #faq, html body #gsd-faq { padding: clamp(2rem, 4vw, 3rem) !important; } } html body .faq-list { display: grid !important; grid-template-columns: 1fr !important; } html body .faq-card { min-height: 0 !important; } html body .faq-card summary { display: flex !important; } html body #puppies .puppies-content-grid { grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) !important; gap: 1rem !important; align-items: stretch !important; max-width: 860px !important; margin: 1.75rem auto 0 !important; } html body #puppies .puppies-description, html body #puppies .price-display, html body #puppies .contact-display { min-width: 0 !important; height: auto !important; padding: 1.25rem !important; background: var(--ea-paper) !important; border: 1px solid var(--ea-line) !important; border-radius: 8px !important; box-shadow: var(--ea-shadow) !important; color: var(--ea-ink) !important; text-shadow: none !important; } html body #puppies .price-display::before { display: none !important; } html body #puppies .puppies-description p, html body #puppies .price-note, html body #puppies .price-breeds, html body #puppies .phone-number { color: var(--ea-muted) !important; margin: 0 !important; letter-spacing: 0 !important; } html body #puppies .price-breeds { display: block !important; margin-top: 0.75rem !important; padding-top: 0.75rem !important; border-top: 1px solid rgba(225, 225, 225, 0.14) !important; color: var(--ea-ink) !important; font-size: 0.9rem !important; font-weight: 650 !important; line-height: 1.45 !important; } html body #puppies .price-amount { color: var(--ea-ink) !important; font-size: clamp(2rem, 4vw, 2.85rem) !important; letter-spacing: 0 !important; } html body #puppies .whatsapp-btn { width: 100% !important; min-height: 54px !important; justify-content: center !important; padding: 0.8rem 1rem !important; background: rgba(225, 225, 225, 0.1) !important; color: var(--ea-sage) !important; border: 1px solid rgba(225, 225, 225, 0.34) !important; border-radius: 8px !important; box-shadow: none !important; white-space: normal !important; } html body #puppies .whatsapp-btn:hover, html body #puppies .whatsapp-btn:focus { background: var(--ea-sage) !important; color: #07100a !important; transform: none !important; } @media (max-width: 980px) { html body #puppies .puppies-content-grid { grid-template-columns: 1fr !important; max-width: 720px !important; } } @media (max-width: 768px) { html body .nav-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-right: 18px !important; padding-left: 18px !important; } html body .nav-logo .logo-svg { height: 44px !important; max-width: 156px !important; } } /* Compact home availability section */ html body .hero-content p.hero-breed-list { max-width: 580px; margin: 0.65rem 0 1rem !important; color: rgba(247, 242, 233, 0.84) !important; font-size: clamp(0.9rem, 1.1vw, 1rem) !important; font-weight: 650; line-height: 1.45; } html body #puppies { padding: 78px 0 46px !important; } html body #puppies .section-header { margin-bottom: 0 !important; } html body #puppies .section-header h2 { margin-bottom: 0 !important; } html body #puppies .availability-panel { grid-template-columns: minmax(0, 0.9fr) minmax(240px, 0.78fr) minmax(290px, 1fr) !important; gap: 0.85rem !important; max-width: 1120px !important; margin: 1rem auto 0.85rem !important; padding: 0.95rem !important; } html body #puppies .availability-panel__content, html body #puppies .litter-schedule, html body #puppies .puppy-care-summary { min-width: 0; } html body #puppies .availability-panel__eyebrow { margin-bottom: 0.35rem !important; font-size: 0.72rem !important; } html body #puppies .availability-panel h3 { margin-bottom: 0.35rem !important; font-size: clamp(1.05rem, 1.35vw, 1.25rem) !important; line-height: 1.25 !important; } html body #puppies .availability-panel p { font-size: 0.9rem !important; line-height: 1.45 !important; } html body #puppies .availability-panel__contact { margin-top: 0.7rem !important; padding: 0.55rem 0.72rem !important; font-size: 0.9rem !important; } html body #puppies .litter-schedule, html body #puppies .puppy-care-summary { padding: 0.78rem !important; border: 1px solid rgba(225, 225, 225, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.04); } html body #puppies .litter-schedule h4, html body #puppies .puppy-care-summary h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.55rem !important; color: var(--ea-ink) !important; font-size: 0.9rem !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body #puppies .litter-schedule ul, html body #puppies .puppy-care-summary ul { display: grid; gap: 0.38rem; margin: 0; padding: 0; list-style: none; } html body #puppies .litter-schedule li { gap: 0.5rem !important; padding-bottom: 0.38rem !important; font-size: 0.86rem !important; line-height: 1.3 !important; } html body #puppies .litter-schedule time { font-size: 0.84rem !important; } html body #puppies .puppy-care-summary li { display: grid; gap: 0.16rem; color: rgba(247, 242, 233, 0.82); font-size: 0.86rem; line-height: 1.35; } html body #puppies .puppy-care-summary li + li { padding-top: 0.38rem; border-top: 1px solid rgba(225, 225, 225, 0.12); } html body #puppies .puppy-care-summary strong { color: var(--ea-ink); font-size: 0.85rem; } html body #puppies .puppy-care-summary span { color: rgba(247, 242, 233, 0.76); } html body #puppies .sold-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: 1120px !important; margin: 0.85rem auto 0 !important; text-align: left !important; } html body #puppies .sold-section-heading h3 { margin: 0 !important; font-size: clamp(1rem, 1.45vw, 1.25rem) !important; line-height: 1.25 !important; } html body #puppies .sold-section-heading span { flex: 0 0 auto; font-size: 0.72rem !important; } html body #puppies .puppies-grid { gap: 0.75rem !important; max-width: 1120px !important; margin: 0.65rem auto 0 !important; } html body #puppies .puppy-card { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0.45rem !important; } html body #puppies .puppy-card img { width: 100% !important; height: clamp(112px, 11vw, 145px) !important; object-fit: cover !important; } html body #puppies .puppy-card .card-content { padding: 0.65rem 0.7rem 0.75rem !important; } html body #puppies .puppy-card h3 { margin: 0 0 0.25rem !important; font-size: 0.9rem !important; line-height: 1.25 !important; } html body #puppies .details { font-size: 0.78rem !important; line-height: 1.35 !important; } html body #puppies .sold-badge { top: 0.55rem !important; right: 0.55rem !important; padding: 0.24rem 0.46rem !important; font-size: 0.68rem !important; } @media (min-width: 1101px) { html body #puppies { padding: 78px 0 46px !important; } } @media (max-width: 1100px) { html body #puppies .availability-panel { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr) !important; } html body #puppies .puppy-care-summary { grid-column: 1 / -1; } } @media (max-width: 768px) { html body .hero-content p.hero-breed-list { margin: 0.55rem auto 0.85rem !important; text-align: center; } html body #puppies { padding: 56px 0 24px !important; } html body #puppies .section-header h2 { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.45rem; font-size: 1.45rem !important; line-height: 1.15 !important; } html body #puppies .section-header h2::before, html body #puppies .section-header h2::after { display: none !important; } html body #puppies .availability-panel { grid-template-columns: 1fr !important; gap: 0.55rem !important; margin-top: 0.8rem !important; padding: 0.65rem !important; line-height: 1.35 !important; } html body #puppies .availability-panel h3 { font-size: 1rem !important; } html body #puppies .availability-panel p { font-size: 0.84rem !important; line-height: 1.35 !important; } html body #puppies .availability-panel__contact { width: 100% !important; justify-content: center !important; margin-top: 0.45rem !important; padding: 0.4rem 0.55rem !important; font-size: 0.84rem !important; line-height: 1.2 !important; } html body #puppies .litter-schedule, html body #puppies .puppy-care-summary { padding: 0.55rem !important; line-height: 1.3 !important; } html body #puppies .litter-schedule h4, html body #puppies .puppy-care-summary h4 { margin-bottom: 0.4rem !important; font-size: 0.82rem !important; } html body #puppies .litter-schedule li { align-items: center !important; flex-direction: row !important; justify-content: space-between !important; gap: 0.45rem !important; padding-bottom: 0.28rem !important; font-size: 0.8rem !important; } html body #puppies .litter-schedule time { flex: 0 0 auto !important; font-size: 0.78rem !important; } html body #puppies .puppy-care-summary li { gap: 0.12rem; font-size: 0.76rem; line-height: 1.24; } html body #puppies .puppy-care-summary li + li { padding-top: 0; border-top: 0; } html body #puppies .puppy-care-summary strong { font-size: 0.78rem; } html body #puppies .puppy-care-summary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } html body #puppies .sold-section-heading { align-items: flex-start; flex-direction: column; gap: 0.25rem; text-align: left !important; } html body #puppies .puppies-grid { display: flex !important; grid-template-columns: none !important; gap: 0.55rem !important; overflow-x: auto; padding-bottom: 0.2rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } html body #puppies .puppy-card { flex: 0 0 140px; scroll-snap-align: start; padding: 0.38rem !important; } html body #puppies .puppy-card img { height: 70px !important; } html body #puppies .puppy-card .card-content { padding: 0.42rem !important; } html body #puppies .puppy-card h3, html body #puppies .details { font-size: 0.68rem !important; } } /* Casual color pass: keep the dark theme, add clearer action colors and softer accents. */ :root { --ea-whatsapp: #1fa95a; --ea-whatsapp-dark: #188b49; --ea-amber: #f6c453; --ea-coral: #ff8a65; --ea-sky: #75d7ff; --ea-lavender: #c9a7ff; --ea-mint: #7ee2b8; } html body #home .hero-buttons a[href*="wa.me"], html body #home .hero-buttons a[href*="wa.me"].btn, html body #home .hero-buttons a[href*="wa.me"].btn-secondary, html body #puppies .availability-panel__contact, html body .floating-whatsapp, html body a.floating-whatsapp { background: var(--ea-whatsapp) !important; color: #ffffff !important; border-color: var(--ea-whatsapp) !important; text-shadow: none !important; box-shadow: 0 12px 28px rgba(31, 169, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } html body #home .hero-buttons a[href*="wa.me"] i, html body #puppies .availability-panel__contact i, html body .floating-whatsapp i { color: #ffffff !important; } html body #home .hero-buttons a[href*="wa.me"]:hover, html body #home .hero-buttons a[href*="wa.me"]:focus, html body #puppies .availability-panel__contact:hover, html body #puppies .availability-panel__contact:focus, html body .floating-whatsapp:hover, html body .floating-whatsapp:focus { background: var(--ea-whatsapp-dark) !important; color: #ffffff !important; border-color: var(--ea-whatsapp-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 16px 36px rgba(31, 169, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } html body .nav-link:hover, html body .nav-link:focus, html body .nav-link.active { background: linear-gradient(135deg, rgba(246, 196, 83, 0.16), rgba(117, 215, 255, 0.1)) !important; border: 1px solid rgba(246, 196, 83, 0.18) !important; } html body .hero-content p.breed-type { background: linear-gradient(135deg, rgba(246, 196, 83, 0.17), rgba(255, 138, 101, 0.11)) !important; border-color: rgba(246, 196, 83, 0.46) !important; } html body .section-header h2 i, html body .breed-programs__header h3 i, html body .dogs-section__header h3 i { color: var(--ea-amber) !important; } html body #puppies .availability-panel { border-color: rgba(126, 226, 184, 0.28) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(31, 169, 90, 0.08) !important; } html body #puppies .availability-panel__eyebrow, html body #puppies .sold-section-heading span { color: var(--ea-amber) !important; } html body #puppies .litter-schedule { border-top: 3px solid var(--ea-sky) !important; } html body #puppies .puppy-care-summary { border-top: 3px solid var(--ea-mint) !important; } html body .feature:nth-child(6n + 1), html body .puppy-card:nth-child(4n + 1), html body .breed-program-row--mini { border-color: rgba(255, 138, 101, 0.36) !important; } html body .feature:nth-child(6n + 2), html body .puppy-card:nth-child(4n + 2), html body .breed-program-row--toy { border-color: rgba(201, 167, 255, 0.36) !important; } html body .feature:nth-child(6n + 3), html body .puppy-card:nth-child(4n + 3), html body .breed-program-row--standard { border-color: rgba(117, 215, 255, 0.34) !important; } html body .feature:nth-child(6n + 4), html body .puppy-card:nth-child(4n + 4) { border-color: rgba(126, 226, 184, 0.34) !important; } html body .feature:nth-child(6n + 1) i { color: var(--ea-coral) !important; } html body .feature:nth-child(6n + 2) i { color: var(--ea-lavender) !important; } html body .feature:nth-child(6n + 3) i { color: var(--ea-sky) !important; } html body .feature:nth-child(6n + 4) i, html body .feature:nth-child(6n + 5) i, html body .feature:nth-child(6n + 6) i { color: var(--ea-mint) !important; } html body .breed-program-row--mini .breed-program-row__eyebrow, html body .breed-program-row--mini .breed-card-heading h5 i { color: var(--ea-coral) !important; } html body .breed-program-row--toy .breed-program-row__eyebrow, html body .breed-program-row--toy .breed-card-heading h5 i { color: var(--ea-lavender) !important; } html body .breed-program-row--standard .breed-program-row__eyebrow, html body .breed-program-row--standard .breed-card-heading h5 i { color: var(--ea-sky) !important; } html body .floating-buttons .floating-whatsapp, html body .floating-buttons a.floating-whatsapp, html body .floating-buttons.floating-buttons--compact .floating-whatsapp, html body .floating-whatsapp.floating-whatsapp, html body a.floating-whatsapp.floating-whatsapp, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp { background: var(--ea-whatsapp) !important; border-color: var(--ea-whatsapp) !important; color: #ffffff !important; box-shadow: 0 12px 28px rgba(31, 169, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } html body .floating-buttons .floating-whatsapp:hover, html body .floating-buttons a.floating-whatsapp:hover, html body .floating-buttons.floating-buttons--compact .floating-whatsapp:hover, html body .floating-whatsapp.floating-whatsapp:hover, html body a.floating-whatsapp.floating-whatsapp:hover, .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp:hover { background: var(--ea-whatsapp-dark) !important; border-color: var(--ea-whatsapp-dark) !important; box-shadow: 0 16px 36px rgba(31, 169, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; }