/* ============================================ NFL — Nature Fresh Life Organic Custom CSS — Animations, Organic Shapes, Effects ============================================ */ /* ── Google Fonts Import ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap'); /* ── CSS Custom Properties ── */ :root { --nfl-green: #8CC63F; --nfl-dark-green: #2E7D32; --nfl-orange: #F7931E; --nfl-white: #FFFFFF; --nfl-light-gray: #F5F7F9; --nfl-dark: #1a1a2e; --nfl-text: #374151; --nfl-text-light: #6B7280; --nfl-green-gradient: linear-gradient(135deg, #2E7D32, #8CC63F); --nfl-orange-gradient: linear-gradient(135deg, #F7931E, #FDBA74); --nfl-hero-overlay: linear-gradient(135deg, rgba(46, 125, 50, 0.85), rgba(140, 198, 63, 0.7)); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); --shadow-xl: 0 20px 50px rgba(0,0,0,0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; } /* ── Base Styles ── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; /* The off-canvas mobile menu is position:fixed, so it escapes body's overflow clip and scrolls horizontally (white strip on mobile). Clipping here stops that page-level horizontal scroll on every page. */ overflow-x: hidden; } body { font-family: 'Inter', sans-serif; color: var(--nfl-text); line-height: 1.6; overflow-x: hidden; background-color: var(--nfl-white); } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; color: var(--nfl-dark); line-height: 1.2; } /* ── Custom Scrollbar ── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--nfl-light-gray); } ::-webkit-scrollbar-thumb { background: var(--nfl-green); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--nfl-dark-green); } /* ── Leaf Pattern SVG Background ── */ .leaf-pattern { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q40 15 35 30 Q30 45 20 35 Q10 25 20 15 Q25 10 30 5Z' fill='%238CC63F' fill-opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; } .leaf-pattern-dark { background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 Q55 20 48 40 Q40 58 25 45 Q12 32 25 18 Q32 12 40 8Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ── Organic Wave Dividers ── */ .wave-divider { position: relative; overflow: hidden; } .wave-divider::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q360 0 720 30 Q1080 60 1440 30 L1440 60 L0 60Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center; background-size: cover; } .wave-divider-green::after { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q360 0 720 30 Q1080 60 1440 30 L1440 60 L0 60Z' fill='%23F5F7F9'/%3E%3C/svg%3E") no-repeat center; background-size: cover; } .wave-top { position: relative; } .wave-top::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 60px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q360 60 720 30 Q1080 0 1440 30 L1440 0 L0 0Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center; background-size: cover; z-index: 1; } /* ── Glassmorphism Card ── */ .glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); backface-visibility: hidden; } .glass-card:hover { transform: translateY(-6px); } .glass-card-dark { background: rgba(46, 125, 50, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(140, 198, 63, 0.2); border-radius: var(--radius-lg); } /* ── Product Card Styles ── */ .product-card { background: var(--nfl-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); /* Specific transitions (not `all`) + GPU hints = smooth hover lift */ transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); overflow: hidden; border: 1px solid rgba(0,0,0,0.05); backface-visibility: hidden; transform: translateZ(0); } .product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--nfl-green); margin-top: 10px; } .carousel-track { padding-top: 14px; } /* ── Flippable Product Card ── */ .flip-card { perspective: 1500px; height: 480px; transition: transform var(--transition-base); } .flip-card:hover { transform: translateY(-8px); } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.2, 1); transform-style: preserve-3d; } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; inset: 0; display: flex; flex-direction: column; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: box-shadow var(--transition-base), border-color var(--transition-base); } .flip-card:hover .flip-card-front, .flip-card:hover .flip-card-back { box-shadow: var(--shadow-xl); border-color: var(--nfl-green); } .flip-card-back { transform: rotateY(180deg); } .flip-card-front .product-image { overflow: hidden; } .flip-card-front .product-image img { transition: transform 0.45s ease; transform-origin: center top; } .flip-card:hover .flip-card-front .product-image img { transform: scale(1.05); } /* Round flip toggle button (top-right of each face) */ .flip-toggle { position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(46, 125, 50, 0.2); color: var(--nfl-dark-green); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--transition-fast), color var(--transition-fast), transform 0.4s ease; } .flip-toggle:hover { background: var(--nfl-dark-green); color: #ffffff; transform: rotate(180deg); } .flip-card-back-body { flex: 1; overflow-y: auto; } /* ── Product language toggle (EN / ગુજરાતી) ── */ .lang-toggle { display: inline-flex; background: #ffffff; border: 1px solid #E5E7EB; border-radius: 9999px; padding: 3px; flex-shrink: 0; } .lang-toggle button { padding: 6px 16px; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; color: var(--nfl-text); cursor: pointer; border: none; background: transparent; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .lang-toggle button.active { background: var(--nfl-dark-green); color: #ffffff; } .product-card .product-image { overflow: hidden; position: relative; } .product-card .product-image img { transition: transform 0.45s ease; /* Anchor the zoom to the top so a ~1rem gap is always kept above the image on hover (it grows downward instead of eating the top space). */ transform-origin: center top; } /* Subtle, contained zoom — product packshots use object-contain, so a large scale made them look oversized/cropped. A gentle lift reads as premium. */ .product-card:hover .product-image img { transform: scale(1.05); } /* ── Category Badge ── */ .category-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .badge-organic { background: rgba(140, 198, 63, 0.15); color: #2E7D32; } .badge-micronutrient { background: rgba(59, 130, 246, 0.12); color: #1D4ED8; } .badge-soil { background: rgba(161, 98, 7, 0.12); color: #92400E; } .badge-bio { background: rgba(16, 185, 129, 0.12); color: #065F46; } .badge-water-soluble { background: rgba(247, 147, 30, 0.12); color: #C2410C; } /* ── Buttons ── */ .btn-primary { background: var(--nfl-green-gradient); color: white; padding: 12px 28px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-base); border: none; cursor: pointer; text-decoration: none; box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4); filter: brightness(1.05); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; color: var(--nfl-dark-green); padding: 12px 28px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-base); border: 2px solid var(--nfl-dark-green); cursor: pointer; text-decoration: none; } .btn-secondary:hover { background: var(--nfl-dark-green); color: white; transform: translateY(-2px); } .btn-orange { background: var(--nfl-orange-gradient); color: white; padding: 12px 28px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-base); border: none; cursor: pointer; text-decoration: none; box-shadow: 0 4px 15px rgba(247, 147, 30, 0.3); } .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(247, 147, 30, 0.4); filter: brightness(1.05); } .btn-whatsapp { background: #25D366; color: white; padding: 12px 28px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-base); border: none; cursor: pointer; text-decoration: none; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); } .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); background: #22C55E; } /* ── Floating WhatsApp Button ── */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 1000; transition: all var(--transition-base); text-decoration: none; animation: whatsappPulse 2s infinite; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5); } @keyframes whatsappPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6), 0 0 0 10px rgba(37, 211, 102, 0.1); } } /* ── Scroll to Top Button ── */ .scroll-top { position: fixed; bottom: 96px; right: 28px; width: 44px; height: 44px; background: var(--nfl-dark-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--shadow-md); z-index: 999; cursor: pointer; transition: all var(--transition-base); opacity: 0; pointer-events: none; transform: translateY(20px); border: none; } .scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { background: var(--nfl-green); transform: translateY(-3px); } /* ── Scroll Animations ── */ .animate-on-scroll { opacity: 0; transform: translateY(28px); /* Animate only opacity + transform (GPU-friendly) instead of `all`, and hint the compositor so the reveal is buttery-smooth. */ transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); will-change: auto; } .animate-on-scroll.slide-left { transform: translateX(-40px); } .animate-on-scroll.slide-left.animated { transform: translateX(0); } .animate-on-scroll.slide-right { transform: translateX(40px); } .animate-on-scroll.slide-right.animated { transform: translateX(0); } .animate-on-scroll.scale-up { transform: scale(0.9); } .animate-on-scroll.scale-up.animated { transform: scale(1); } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* Stagger children animation delays */ .stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; } .stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; } .stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 0.15s; } .stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 0.2s; } .stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 0.25s; } .stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 0.3s; } /* ── Hero Section ── */ .hero-section { position: relative; min-height: 90vh; display: flex; align-items: center; background-color: #2E7D32; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .hero-section::before { content: ''; position: absolute; inset: 0; background: var(--nfl-hero-overlay); z-index: 1; } .hero-section > * { position: relative; z-index: 2; } /* Floating leaf decorations */ .hero-leaf { position: absolute; opacity: 0.1; animation: floatLeaf 6s ease-in-out infinite; z-index: 1; } .hero-leaf:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; } .hero-leaf:nth-child(2) { top: 60%; right: 8%; animation-delay: 2s; } .hero-leaf:nth-child(3) { bottom: 15%; left: 15%; animation-delay: 4s; } @keyframes floatLeaf { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } } /* ── Header / Navbar ── */ /* IMPORTANT: the navbar must NOT use `filter`, `backdrop-filter`, `transform`, or `will-change`. The mobile menu & overlay are position:fixed children of