/* === IMPROVEMENT 10/10: Mayagri Design Sublimation === */ /* Animations au scroll */ @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-up { animation: fadeUp 0.8s ease forwards; } .animate-slide-left { animation: slideInLeft 0.8s ease forwards; } .animate-slide-right { animation: slideInRight 0.8s ease forwards; } /* Delay classes */ .anim-delay-1 { animation-delay: 0.15s; } .anim-delay-2 { animation-delay: 0.3s; } .anim-delay-3 { animation-delay: 0.45s; } .anim-delay-4 { animation-delay: 0.6s; } /* Cartes produits avec hover elevation */ .oe_product_cart, .product_item, .o_wsale_product_grid_wrapper .card, section .card.product { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } .oe_product_cart:hover, .product_item:hover, .o_wsale_product_grid_wrapper .card:hover, section .card.product:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(200, 169, 110, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15); } .oe_product_cart:hover .oe_product_image, .product_item:hover img { transform: scale(1.05); } /* Hero section avec parallax et overlay */ .o_header_affix ~ #wrapwrap > main > section:first-child, section.o_we_parallax, section[style*="background-image"]:first-of-type { position: relative; overflow: hidden; } .o_header_affix ~ #wrapwrap > main > section:first-child::before, section.o_we_parallax::before, section[style*="background-image"]:first-of-type::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 50%, rgba(200, 169, 110, 0.15) 0%, rgba(18, 18, 18, 0.7) 70%); pointer-events: none; z-index: 1; } .o_header_affix ~ #wrapwrap > main > section:first-child > *, section.o_we_parallax > *, section[style*="background-image"]:first-of-type > * { position: relative; z-index: 2; } /* Navigation sticky avec backdrop-filter */ header.o_header_affix, nav.navbar.navbar-expand-lg.fixed-top, #top_menu_container.affix { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); background-color: rgba(18, 18, 18, 0.88) !important; border-bottom: 1px solid rgba(200, 169, 110, 0.2); transition: backdrop-filter 0.3s ease, background-color 0.3s ease; } /* Bordures deco tribal pattern via pseudo-elements */ section:not(.o_we_force_no_tribal)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, #C8A96E 0px, #C8A96E 8px, transparent 8px, transparent 12px, #8B0000 12px, #8B0000 20px, transparent 20px, transparent 24px, #C8A96E 24px, #C8A96E 30px, transparent 30px, transparent 36px ); z-index: 1; opacity: 0.6; } section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #121212, #C8A96E, #8B0000, #121212); opacity: 0.3; } /* Transition douce sur tous les boutons */ .btn, button, a.btn, .o_wsale_products_grid_item .btn, .oe_product_cart .btn, .product_price .btn, .o_wsale_add_to_cart { transition: all 0.3s ease; } .btn:hover, button:hover, a.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200, 169, 110, 0.25); } /* Palette accent colors */ section h2, section h3 { color: #F5F0E8; } .text-gold { color: #C8A96E; } .bg-dark-charcoal { background-color: #121212; } .text-bordeaux { color: #8B0000; } .bg-offwhite { background-color: #F5F0E8; } /* Gold accent borders on product cards */ .oe_product_cart { border: 1px solid rgba(200, 169, 110, 0.15); border-radius: 12px; overflow: hidden; } .oe_product_cart:hover { border-color: rgba(200, 169, 110, 0.4); }