.rivax-promo-box-widget { width: 100%; } .rivax-promo-box { margin: 0 auto; max-width: 100%; position: relative; display: flex; overflow: hidden; border-radius: var(--soft-radius); } .rivax-promo-box .image-wrapper { position: relative; overflow: hidden; width: 100%; transition: 0.35s; border-radius: inherit; } .rivax-promo-box .image-wrapper::before { content: ''; position: absolute; transition: inherit; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: transparent; } .rivax-promo-box .image-wrapper::after { content: ''; position: absolute; transition: inherit; left: 30px; top: 30px; right: 30px; bottom: 30px; border-radius: inherit; z-index: 2; } .rivax-promo-box img { width: 100%; height: 100%; object-fit: cover; transition: inherit; transform: scale(1.15); } .rivax-promo-box .content-wrapper { display: flex; flex-direction: column; gap: 5px; z-index: 3; padding: 40px; transition: 0.35s; } .rivax-promo-box a { z-index: 10; } .rivax-promo-box .promo-title { font-size: 1.2rem; font-weight: 600; color: #ffffff; transition: inherit; margin: 0; } .rivax-promo-box p { color: #ffffff; transition: inherit; margin: 0; } .rivax-promo-box.effect-lily:hover img { transform-origin: left; } .rivax-promo-box.effect-lily .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-lily:hover .image-wrapper::before { opacity: 0; } .rivax-promo-box.effect-lily .content-wrapper { top: auto; } .rivax-promo-box.effect-lily p { opacity: 0; margin-bottom: -30px; transition: 0.25s opacity, 0.35s; } .rivax-promo-box.effect-lily:hover .promo-title { transform: translateY(-30px); } .rivax-promo-box.effect-lily:hover p { transform: translateY(-30px); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-sadie .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-sadie p { position: absolute; bottom: 0; left: 0; right: 0; padding: inherit; padding-bottom: 4px; opacity: 0; transform: translateY(10px); } .rivax-promo-box.effect-sadie:hover .promo-title { transform: translateY(-40px); } .rivax-promo-box.effect-sadie:hover p { transform: translateY(0); opacity: 1; } .rivax-promo-box.effect-sadie .image-wrapper::before { background: linear-gradient(to bottom, #484c6100 0%, #484c61cc 50%); opacity: 0; transform: scaleY(0.5); transform-origin: bottom; } .rivax-promo-box.effect-sadie:hover .image-wrapper::before { transform: scaleY(1); opacity: 1; } .rivax-promo-box.effect-layla:hover img { transform-origin: left; } .rivax-promo-box.effect-layla .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-layla .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-layla .promo-title { transform: translateX(-30px); } .rivax-promo-box.effect-layla:hover .promo-title { transform: translateX(0); } .rivax-promo-box.effect-layla p { opacity: 0; transform: translateY(-20px); transition: 0.25s opacity, 0.35s; } .rivax-promo-box.effect-layla:hover p { transform: translateY(0); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-oscar .image-wrapper::before { background: linear-gradient(45deg, #22682a94 0%, #9b4a1b94 40%, #3a342a94 100%); } .rivax-promo-box.effect-oscar .image-wrapper::after { border: 1px solid #fff; opacity: 0; transform: scale(0.5); } .rivax-promo-box.effect-oscar:hover .image-wrapper::after { opacity: 1; transform: scale(1); } .rivax-promo-box.effect-oscar .content-wrapper { justify-content: center; text-align: center; padding: 50px; } .rivax-promo-box.effect-oscar .promo-title { transform: translateY(30px); } .rivax-promo-box.effect-oscar:hover .promo-title { transform: translateY(0); } .rivax-promo-box.effect-oscar p { opacity: 0; transform: scale(0.5); } .rivax-promo-box.effect-oscar:hover p { transform: scale(1); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-marley .content-wrapper { text-align: right; justify-content: space-between; } .rivax-promo-box.effect-marley .promo-title { transform: translateY(30px); } .rivax-promo-box.effect-marley:hover .promo-title { transform: translateY(0); } .rivax-promo-box.effect-marley p { transform: translateY(50px); opacity: 0; } .rivax-promo-box.effect-marley:hover p { transform: translateY(20px); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-marley .promo-title::after { position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background-color: #fff; content: ""; transform: translateY(30px); opacity: 0; transition: inherit; } .rivax-promo-box.effect-marley:hover .promo-title::after { transform: translateY(0); opacity: 1; } .rivax-promo-box.effect-ruby:hover img { transform: scale(1); } .rivax-promo-box.effect-ruby .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-ruby .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-ruby .promo-title { transform: translateY(30px); } .rivax-promo-box.effect-ruby:hover .promo-title { transform: translateY(0); } .rivax-promo-box.effect-ruby p { opacity: 0; transform: translateY(30px) scale(1.2); transition: 0.25s opacity, 0.35s; } .rivax-promo-box.effect-ruby:hover p { transform: translateY(0) scale(1); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-roxy .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-roxy .image-wrapper::after { border: 1px solid #fff; opacity: 0; transform: translateX(-20px); } .rivax-promo-box.effect-roxy:hover .image-wrapper::after { opacity: 1; transform: translateX(0); } .rivax-promo-box.effect-roxy .content-wrapper { justify-content: center; padding: 60px; } .rivax-promo-box.effect-roxy p { opacity: 0; transform: translateX(-10px); } .rivax-promo-box.effect-roxy:hover p { transform: translateY(0); opacity: 1; } .rivax-promo-box.effect-bubba .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-bubba .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-bubba .promo-title { transform: translateY(-30px); } .rivax-promo-box.effect-bubba:hover .promo-title { transform: translateY(0); } .rivax-promo-box.effect-bubba p { opacity: 0; transform: translateY(30px); transition: 0.25s opacity, 0.35s; } .rivax-promo-box.effect-bubba:hover p { transform: translateY(0); opacity: 1; transition-delay: 0.05s; } .rivax-promo-box.effect-bubba .content-wrapper::before, .rivax-promo-box.effect-bubba .content-wrapper::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ""; opacity: 0; transition: inherit; } .rivax-promo-box.effect-bubba .content-wrapper::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0, 1); } .rivax-promo-box.effect-bubba .content-wrapper::after { border-right: 1px solid #fff; border-left: 1px solid #fff; transform: scale(1, 0); } .rivax-promo-box.effect-bubba:hover .content-wrapper::before, .rivax-promo-box.effect-bubba:hover .content-wrapper::after { opacity: 1; transform: scale(1); } .rivax-promo-box.effect-romeo:hover img { transform: scale(1); } .rivax-promo-box.effect-romeo .image-wrapper::before { background: #3c43536e; } .rivax-promo-box.effect-romeo .content-wrapper { justify-content: center; text-align: center; gap: 20px; } .rivax-promo-box.effect-romeo .promo-title { transform: translateY(-20px); } .rivax-promo-box.effect-romeo:hover .promo-title { transform: translateY(0); } .rivax-promo-box.effect-romeo p { transform: translateY(20px); } .rivax-promo-box.effect-romeo:hover p { transform: translateY(0); } .rivax-promo-box.effect-romeo .content-wrapper::before, .rivax-promo-box.effect-romeo .content-wrapper::after { position: absolute; top: 50%; right: 30px; left: 30px; height: 1px; content: ""; transition: inherit; background: white; } .rivax-promo-box.effect-romeo:hover .content-wrapper::before { transform: rotate(45deg) scale(0.85); } .rivax-promo-box.effect-romeo:hover .content-wrapper::after { transform: rotate(-45deg) scale(0.85); } .rivax-promo-box.effect-sarah:hover img { transform-origin: left; } .rivax-promo-box.effect-sarah .image-wrapper::before { background: #3c43536e; opacity: 0; } .rivax-promo-box.effect-sarah:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-sarah .content-wrapper { gap: 10px; } .rivax-promo-box.effect-sarah .promo-title { position: relative; } .rivax-promo-box.effect-sarah p { transform: translateX(100px); opacity: 0; } .rivax-promo-box.effect-sarah:hover p { transform: translateX(0); opacity: 1; } .rivax-promo-box.effect-sarah .promo-title::before { position: absolute; bottom: -5px; width: 100%; left: 0; height: 3px; content: ""; transition: inherit; background: white; transform: scaleX(0); transform-origin: left; } .rivax-promo-box.effect-sarah:hover .promo-title::before { transform: scaleX(1); } .rivax-promo-box.effect-chico:hover img { transform: scale(1); } .rivax-promo-box.effect-chico .image-wrapper::before { background: #3c43536e; opacity: 0; } .rivax-promo-box.effect-chico:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-chico .image-wrapper::after { border: 1px solid #fff; opacity: 0; transform: scale(1.3); } .rivax-promo-box.effect-chico:hover .image-wrapper::after { opacity: 1; transform: scale(1); } .rivax-promo-box.effect-chico .content-wrapper { justify-content: center; text-align: center; padding: 50px; } .rivax-promo-box.effect-chico p { opacity: 0; transform: scale(1.3); } .rivax-promo-box.effect-chico:hover p { transform: scale(1); opacity: 1; } .rivax-promo-box.effect-milo:hover img { transform-origin: left; } .rivax-promo-box.effect-milo .image-wrapper::before { background: #3c43536e; opacity: 0; } .rivax-promo-box.effect-milo:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-milo .content-wrapper { justify-content: space-between; flex-direction: column-reverse; } .rivax-promo-box.effect-milo .promo-title { text-align: right; } .rivax-promo-box.effect-milo p { opacity: 0; transform: translateX(-30px); max-width: 160px; border-inline-start: 3px solid; padding-inline-start: 12px; } .rivax-promo-box.effect-milo:hover p { transform: translateX(0); opacity: 1; } .rivax-promo-box.effect-apollo:hover img { transform: scale(1); } .rivax-promo-box.effect-apollo .image-wrapper::before { background: #3c43536e; opacity: 0; } .rivax-promo-box.effect-apollo:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-apollo .image-wrapper::after { background: rgba(255, 255, 255, 0.5); left: 0; top: 0; right: 0; bottom: 0; transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); } .rivax-promo-box.effect-apollo:hover .image-wrapper::after { transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); } .rivax-promo-box.effect-apollo .content-wrapper { justify-content: space-between; } .rivax-promo-box.effect-apollo p { opacity: 0; transform: translateX(-30px); max-width: 160px; border-inline-start: 3px solid; padding-inline-start: 12px; margin-inline-start: auto; } .rivax-promo-box.effect-apollo:hover p { transform: translateX(0); opacity: 1; } .rivax-promo-box.effect-jazz:hover img { transform: scale(1); } .rivax-promo-box.effect-jazz .image-wrapper::before { background: linear-gradient(-45deg, #f3cf3f4f 0%, #f33f584f 100%); opacity: 0; } .rivax-promo-box.effect-jazz:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-jazz .image-wrapper::after { border-top: 1px solid #fff; border-bottom: 1px solid #fff; opacity: 0; transform: rotate(45deg) scale3d(1, 2, 1); } .rivax-promo-box.effect-jazz:hover .image-wrapper::after { opacity: 1; transform: rotate(45deg) scale3d(1, 1.5, 1); } .rivax-promo-box.effect-jazz .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-jazz .promo-title { transform: translateY(-10px); } .rivax-promo-box.effect-jazz:hover .promo-title { transform: scale(1.15); } .rivax-promo-box.effect-jazz p { opacity: 0; } .rivax-promo-box.effect-jazz:hover p { transform: scale(1.1); opacity: 1; } .rivax-promo-box.effect-ming:hover img { transform: scale(1); } .rivax-promo-box.effect-ming .image-wrapper::before { background: #3c43536e; opacity: 0; } .rivax-promo-box.effect-ming:hover .image-wrapper::before { opacity: 1; } .rivax-promo-box.effect-ming .image-wrapper::after { border: 3px solid #fff; } .rivax-promo-box.effect-ming .content-wrapper { justify-content: center; text-align: center; } .rivax-promo-box.effect-ming .promo-title { transform: translateY(-10px); } .rivax-promo-box.effect-ming:hover .promo-title { transform: scale(1.15); } .rivax-promo-box.effect-ming p { opacity: 0; } .rivax-promo-box.effect-ming:hover p { transform: scale(1.1); opacity: 1; }