/* Root CSS */ p{font-family: var(--para_font);} h1{font-family: var(--h1_font);} h2{font-family: var(--h2_font);} h3{font-family: var(--h3_font);} h4{font-family: var(--h4_font);} h4{font-size: 20px;} h5{font-family: var(--h5_font);} h6{font-family: var(--h6_font);} a{font-family: var(--link_font);} button{font-family: var(--button_font);} a{text-decoration:none;color:black;} a:hover{color: var(--primary_color);} body{background-color:#ffffff;font-size:13px;-webkit-font-smoothing: antialiased;-webkit-font-size:13px;} li{text-decoration: none;list-style: none;} li a{text-decoration: none;color: black;font-family: var(--link_font);font-size: 15px;line-height: 2;} /* Builder css */ .premium-beauty-hero { position: relative; height: 80vh; min-height: 500px; width: 100%; overflow: hidden; color: #fff; background: #000; } .premium-beauty-hero .hero-slides-container { position: relative; width: 100%; height: 100%; display: flex; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); } .premium-beauty-hero .hero-slide { position: relative; min-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .premium-beauty-hero .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--slide-img); background-size: cover; background-position: center; z-index: 1; /* Changed from -1 to 1 */ transform: scale(1.1); transition: transform 8s linear; } .premium-beauty-hero .hero-slide.active .hero-bg { transform: scale(1); } .premium-beauty-hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%); z-index: 2; /* Changed from 0 to 2 */ } .premium-beauty-hero .hero-main-content { position: relative; z-index: 3; /* Increased to stay above overlay */ padding-bottom: 80px; } .premium-beauty-hero .hero-text-box { max-width: 800px; margin: 0 auto; } .premium-beauty-hero .slide-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .premium-beauty-hero .hero-slide.active .slide-up { opacity: 1; transform: translateY(0); } .premium-beauty-hero .delay-1 { transition-delay: 0.2s; } .premium-beauty-hero .delay-2 { transition-delay: 0.4s; } .premium-beauty-hero .hero-heading { margin-bottom: 1rem; letter-spacing: -1px; text-transform: capitalize; } .premium-beauty-hero .hero-subheading { margin-bottom: 2rem; opacity: 0.8; max-width: 600px; margin-left: auto; margin-right: auto; } .premium-beauty-hero .hero-btn-outlined { position: relative; display: inline-block; padding: 15px 45px; border: 1px solid rgba(255, 255, 255, 0.4); color: #ffffff; text-decoration: none !important; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 500; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); background: transparent; backdrop-filter: blur(5px); overflow: hidden; } .premium-beauty-hero .hero-btn-outlined::after { content: ''; position: absolute; bottom: 12px; left: 45px; right: 45px; height: 1.5px; background-color:white; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .premium-beauty-hero .hero-btn-outlined:hover::after { transform: scaleX(1); transform-origin: left; } .premium-beauty-hero .hero-btn-outlined:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: rgba(255, 255, 255, 0.8); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .premium-beauty-hero .hero-footer { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; background: transparent; } .premium-beauty-hero .footer-item { padding: 30px 20px; cursor: pointer; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.3; /* Dimmed by default */ } .premium-beauty-hero .footer-item.active { opacity: 1; } .premium-beauty-hero .footer-item:hover { opacity: 0.7; } .premium-beauty-hero .footer-item.active:hover { opacity: 1; } .premium-beauty-hero .footer-label { display: block; opacity: 0.6; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 2px; transition: all 0.4s ease; } .premium-beauty-hero .footer-item.active .footer-label { opacity: 1; letter-spacing: 2.5px; } .premium-beauty-hero .footer-value { margin: 0; transition: all 0.6s ease; letter-spacing: 0.5px; } .premium-beauty-hero .footer-item.active .footer-value { text-shadow: 0 0 20px rgba(255, 255, 255, 0.4); transform: translateY(-2px); } /* Dots Navigation */ .premium-beauty-hero .hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; display: none; gap: 15px; } .premium-beauty-hero .hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.5); } .premium-beauty-hero .hero-dot.active { background: #fff; transform: scale(1.2); } @media (max-width: 991px) { .premium-beauty-hero .hero-dots { display: flex; } .premium-beauty-hero .hero-footer { display: none; } .premium-beauty-hero .hero-heading { } }.new-arrival-slider { padding: 60px 0; position: relative; background-color: var(--nas-bg, transparent); overflow-x: hidden; } .new-arrival-slider .section-header { margin-bottom: 40px; } .new-arrival-slider .section-title { color: var(--nas-text, #333); } .new-arrival-slider .owl-stage-outer { overflow: hidden; } .new-arrival-slider .product-card { background: #fff; padding: 0px; border-radius: 8px; transition: transform 0.3s ease; height: 100%; margin: 2px !important; } .new-arrival-slider-dark .product-card { background: #1f2937; } .new-arrival-slider .product-box-container { padding: 2px !important; } .new-arrival-slider .owl-nav { display: none !important; /* Hide default Owl nav */ } .new-arrival-slider .owl-nav-custom { display: flex; justify-content: center; align-items: center; margin-top: 5px; } .new-arrival-slider .owl-nav-custom button { cursor: pointer; transition: transform 0.2s, opacity 0.2s; outline: none; } .new-arrival-slider .owl-nav-custom button:hover:not([style*="opacity: 0.3"]) { transform: scale(1.2); } .new-arrival-slider .owl-nav-custom i { color: var(--nas-text, #333333); } .new-arrival-slider .slider-counter { min-width: 60px; text-align: center; color: var(--nas-text, #333333); } .new-arrival-slider-dark .slider-counter { color: #f3f4f6; }.premium-product-grid-section { overflow: hidden; position: relative; /* padding: 2%; */ background-color: var(--ppg-bg, transparent); color: var(--ppg-text, inherit); } .premium-product-grid-section .main-top-heading { margin-bottom: 0.5rem; color: inherit; } .premium-product-grid-section .main-top-subheading { opacity: 0.7; margin-bottom: 0; } .premium-product-grid-section .collection-heading { color: inherit; /* Respect text_color */ margin-bottom: 0.5rem; /* Reduced to sit closer to subheading */ } .premium-product-grid-section .collection-subheading { margin-bottom: 1.5rem; color: inherit; } .premium-product-grid-section .collection-description { color: inherit; opacity: 0.8; line-height: 1.6; max-width: 90%; } .premium-product-grid-section .collection-btn { display: inline-block; padding: 12px 35px; background: transparent; color: var(--ppg-text, #000); text-decoration: none !important; border: 1px solid black; letter-spacing: 0.1em; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); position: relative; overflow: hidden; } .premium-product-grid-section .collection-btn::after { content: ''; position: absolute; bottom: 10px; left: 35px; right: 35px; height: 1.5px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .premium-product-grid-section .collection-btn:hover::after { transform: scaleX(1); transform-origin: left; } .premium-product-grid-section .collection-btn:hover { color: var(--ppg-text, #000); } /* Card Styling */ .premium-product-grid-section .collection-card { display: block; text-decoration: none; position: relative; border-radius: 0; overflow: hidden; width: 100%; } .premium-product-grid-section .card-image-wrapper { position: relative; aspect-ratio: 3 / 4; /* Clean vertical portrait ratio */ background-color: #f9f9f9; overflow: hidden; } .premium-product-grid-section .card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .premium-product-grid-section .collection-card:hover .card-img { transform: scale(1.1); } .premium-product-grid-section .card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 60%); opacity: 1; z-index: 1; } .premium-product-grid-section .card-label { position: absolute; bottom: 25px; left: 20px; right: 20px; color: #fff; z-index: 2; } .premium-product-grid-section .card-label h4 { margin: 0; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Slider Layout */ .premium-product-grid-section .collection-slider-wrapper { position: relative; width: 100%; } .premium-product-grid-section .collection-slider-track { display: flex; gap: 20px; /* Consistent spacing */ overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding-bottom: 20px; } .premium-product-grid-section .collection-slider-track::-webkit-scrollbar { display: none; } .premium-product-grid-section .slider-item { min-width: calc(25% - 15px); width: calc(25% - 15px); /* 4 items per row on desktop */ scroll-snap-align: start; flex-shrink: 0; } .premium-product-grid-section .collection-slider-track.few-items .slider-item { min-width: calc(33.333% - 14px); width: calc(33.333% - 14px); } /* Nav Text Buttons */ .premium-product-grid-section .collection-nav-wrapper { display: flex; gap: 15px; align-items: center; } .premium-product-grid-section .nav-text-btn { letter-spacing: 2px; color: #999; cursor: pointer; position: relative; padding-bottom: 8px; transition: color 0.3s ease; } .premium-product-grid-section .nav-text-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ddd; transition: all 0.3s ease; } .premium-product-grid-section .nav-text-btn.active, .premium-product-grid-section .nav-text-btn:hover { color: #000; /* This will be updated dynamically via JS color picker if used */ } .premium-product-grid-section .nav-text-btn.active::after, .premium-product-grid-section .nav-text-btn:hover::after { height: 2px; background-color: #000; } .premium-product-grid-section .nav-separator { width: 4px; height: 4px; background-color: #ccc; border-radius: 0; /* Square-ish as per image */ } /* Bottom line */ .premium-product-grid-section .collection-footer-line { width: 100%; height: 2px; background-color: #eee; margin-top: 10px; position: relative; overflow: hidden; } .premium-product-grid-section .footer-line-active { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #000; transition: width 0.3s ease, left 0.3s ease; } /* Show buttons all the time */ .premium-product-grid-section .nav-text-btn.prev-text, .premium-product-grid-section .nav-text-btn.next-text, .premium-product-grid-section .nav-separator { opacity: 1; visibility: visible; transition: all 0.3s ease; } @media (max-width: 991px) { .premium-product-grid-section .collection-content { text-align: center; padding: 0 15px; /* margin-bottom: 30px; */ } .premium-product-grid-section .collection-description { max-width: 100%; } .premium-product-grid-section .collection-nav-wrapper { justify-content: center; margin-bottom: 30px; } .premium-product-grid-section .slider-item { min-width: calc(45% - 10px); width: calc(45% - 10px); } } @media (max-width: 576px) { .premium-product-grid-section .slider-item { min-width: calc(75% - 10px); width: calc(75% - 10px); } .premium-product-grid-section .collection-heading {} }.pss-section-fluid { width: 100%; position: relative; background-color: var(--pss-bg, #fff); color: var(--pss-text, #333); } .pss-section { width: 100%; position: relative; overflow: visible; margin-top: 0; padding: 0; z-index: 2; isolation: isolate; } .pss-header { padding: 40px 50px 20px 50px; text-align: center; } .pss-section-heading { margin: 0 0 10px 0; letter-spacing: 0.5px; line-height: 1.2; } .pss-section-subheading { margin: 0; opacity: 0.7; letter-spacing: 0.3px; } @media (max-width: 767px) { .pss-header { padding: 30px 20px 15px 20px; } .pss-section-heading { } } .pss-container { display: flex; width: 100%; flex-wrap: wrap; } .pss-block { flex: 1 1 50%; min-width: 320px; height: 85vh; min-height: 600px; position: relative; display: block; text-decoration: none; overflow: hidden; background-color: #f1f1f1; -webkit-tap-highlight-color: transparent; outline: none; transform: translateZ(0); backface-visibility: hidden; will-change: transform; } @media (max-width: 991px) { .pss-block { flex: 1 1 100%; height: 60vh; min-width: 0; } .pss-container { flex-direction: column; } } .pss-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .pss-bg-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform-origin: center center; } .pss-block:hover .pss-bg-img { transform: scale(1.04); } .pss-block:active { transform: translateZ(0); } .pss-block:focus, .pss-block:focus-visible { outline: none; } .pss-block:focus-visible .pss-overlay-gradient { opacity: 0.9; } .pss-overlay-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 2; transition: opacity 0.5s ease; transform: translateZ(0); } .pss-text-content { position: absolute; bottom: 50px; left: 50px; right: 50px; z-index: 3; color: white; display: flex; flex-direction: column; justify-content: flex-end; } @media (max-width: 767px) { .pss-section { margin-top: 0; } .pss-header { padding: 24px 16px 12px 16px; } .pss-section-heading { } .pss-section-subheading { line-height: 1.5; } .pss-container { flex-direction: column; } .pss-block { width: 100%; height: 44vh !important; min-height: 320px; min-width: 0; } .pss-image-wrapper { inset: 0; } .pss-overlay-gradient { height: 70%; } .pss-text-content { left: 16px; right: 16px; bottom: 18px; } .pss-title { margin-bottom: 8px; } .pss-description { line-height: 1.5; } } .pss-title { margin: 0 0 10px 0; color: #ffffff; letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .pss-description { line-height: 1.6; margin: 0; color: #f1f1f1; max-width: 450px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* Main Section */ .ihs-section { width: 100%; display: flex; flex-direction: column; overflow-x: hidden; position: relative; padding: 1.5rem 0; z-index: 2; background-color: var(--ihs-bg, #ffffff); color: var(--ihs-text, #1a1a1a); } .ihs-section.is-dragging { cursor: grabbing; } .ihs-section.is-dragging * { user-select: none; } .ihs-bg-img { pointer-events: none; } .ihs-main-title, .ihs-subtitle { color: inherit; } .ihs-scrolling-wrapper { overflow: hidden; white-space: nowrap; width: 100%; display: flex; position: relative; min-height: 40vh; } .ihs-scrolling-track { display: flex; width: max-content; animation: ihs-scroll-anim 80s linear infinite; } .ihs-scrolling-wrapper:hover .ihs-scrolling-track { animation-play-state: paused; } @keyframes ihs-scroll-anim { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Navigation Buttons */ .ihs-nav-btn { position: absolute; top: 0; bottom: 0; width: 15vw; background: transparent; border: none; color: white; letter-spacing: 2px; z-index: 10; cursor: pointer; display: flex; align-items: center; pointer-events: auto; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); outline: none; } .ihs-nav-btn span { display: inline-block; border-bottom: 2px solid white; padding-bottom: 5px; opacity: 0; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .ihs-prev-btn { left: 0; justify-content: flex-start; padding-left: 30px; } .ihs-prev-btn span { transform: translateX(-40px); } .ihs-next-btn { right: 0; justify-content: flex-end; padding-right: 30px; } .ihs-next-btn span { transform: translateX(40px); } .ihs-prev-btn:hover span, .ihs-next-btn:hover span { opacity: 1; transform: translateX(0); } /* Column / Item Styling */ .ihs-column { width: 25vw; height: 50vh; min-height: 400px; position: relative; overflow: hidden; cursor: pointer; display: block; flex-shrink: 0; transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .ihs-bg-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; transform: translateZ(0); backface-visibility: hidden; will-change: transform; } .ihs-column:hover .ihs-bg-img { transform: scale(1.08); } .ihs-overlay-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; opacity: 0; transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity; backface-visibility: hidden; } .ihs-column:hover .ihs-overlay-gradient { opacity: 1; } /* Hover Content */ .ihs-hover-content { opacity: 0; transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s; will-change: opacity; } .ihs-column:hover .ihs-hover-content { opacity: 1; } .ihs-bottom-info { position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 2; transform: translateY(15px); transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; will-change: transform; } .ihs-item-name { color: #ffffff; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .ihs-item-desc { color: #ffffff; line-height: 1.5; margin-bottom: 15px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4); white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .ihs-column:hover .ihs-bottom-info { transform: translateY(0); } /* Responsive */ @media (max-width: 1200px) { .ihs-column { width: 33.333vw; } } @media (max-width: 991px) { .ihs-column { width: 50vw; height: 40vh; min-height: 350px; } } @media (max-width: 767px) { .ihs-column { width: 100vw; height: 40vh; min-height: 300px; } .ihs-hover-content, .ihs-overlay-gradient { opacity: 1; visibility: visible; } .ihs-bottom-info { transform: translateY(0); bottom: 20px; left: 20px; right: 20px; } .ihs-nav-btn { display: none; } }.modern-lifestyle-product-split { background-color: var(--mlps-bg, #f2f2f2); color: var(--mlps-text, #222222); } .modern-lifestyle-product-split .mlps-header { max-width: 800px; margin-bottom: 30px; } .modern-lifestyle-product-split .mlps-heading { line-height: 1.1; margin-bottom: 12px; letter-spacing: -0.02em; color: inherit; } .modern-lifestyle-product-split .mlps-subheading { line-height: 1.6; opacity: 0.7; margin-bottom: 0; color: inherit; } .modern-lifestyle-product-split .mlps-shell { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1fr); gap: 24px; align-items: stretch; overflow: visible; } .modern-lifestyle-product-split .mlps-left-panel { position: relative; width: 100%; height: 100%; min-height: 300px; background: #e9e9e9; overflow: hidden; } .modern-lifestyle-product-split .mlps-left-empty { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 35%), linear-gradient(135deg, #efefef 0%, #d9d9d9 100%); } .modern-lifestyle-product-split .mlps-left-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .modern-lifestyle-product-split .mlps-overlay-text { position: absolute; left: 16px; bottom: 14px; color: #ffffff; letter-spacing: 0.3px; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .modern-lifestyle-product-split .mlps-right-panel { position: relative; padding-left: 0; padding-right: 0; min-height: 450px; display: flex; align-items: center; justify-content: center; overflow: visible; } .modern-lifestyle-product-split .mlps-carousel-wrap { position: relative; width: 100%; max-width: 360px; margin: 0 auto; } .modern-lifestyle-product-split .mlps-product-carousel { width: 100%; max-width: 360px; margin: 0 auto; } .modern-lifestyle-product-split .mlps-product-slide { padding: 8px 2px 18px; } .modern-lifestyle-product-split .mlps-product-card { max-width: 340px; margin: 0 auto; background: #ffffff; border-radius: 0; box-shadow: none; overflow: hidden; } .modern-lifestyle-product-split .mlps-product-card .item.box-height { background: #ffffff; } .modern-lifestyle-product-split .mlps-prev-btn, .modern-lifestyle-product-split .mlps-next-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #ffffff; color: #111111; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; padding: 10px 22px; border-radius: 30px; z-index: 999; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none !important; } .modern-lifestyle-product-split .mlps-prev-btn::after, .modern-lifestyle-product-split .mlps-next-btn::after { content: ''; position: absolute; bottom: 8px; left: 20px; right: 20px; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); } .modern-lifestyle-product-split .mlps-prev-btn:hover::after, .modern-lifestyle-product-split .mlps-next-btn:hover::after { transform: scaleX(1); transform-origin: left; } .modern-lifestyle-product-split .mlps-prev-btn { left: -100px; } .modern-lifestyle-product-split .mlps-next-btn { right: -100px; } .modern-lifestyle-product-split .mlps-prev-btn:hover, .modern-lifestyle-product-split .mlps-next-btn:hover { background: #ffffff; color: #111111; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); transform: translateY(-50%) scale(1.05); } @media (hover: hover) { .modern-lifestyle-product-split .mlps-right-panel:hover .mlps-prev-btn { opacity: 1; visibility: visible; pointer-events: auto; left: -25px; } .modern-lifestyle-product-split .mlps-right-panel:hover .mlps-next-btn { opacity: 1; visibility: visible; pointer-events: auto; right: -25px; } .modern-lifestyle-product-split .mlps-right-panel:has(.owl-dots:hover) .mlps-prev-btn, .modern-lifestyle-product-split .mlps-right-panel:has(.owl-dots:hover) .mlps-next-btn { opacity: 0; visibility: hidden; } } .modern-lifestyle-product-split .owl-theme .owl-dots { margin-top: -20px; text-align: center; } .modern-lifestyle-product-split .owl-theme .owl-dots .owl-dot span { width: 5px; height: 5px; margin: 3px; background: #b4b4b4; } .modern-lifestyle-product-split .owl-theme .owl-dots .owl-dot.active span, .modern-lifestyle-product-split .owl-theme .owl-dots .owl-dot:hover span { background: #2a2a2a; } @media (max-width: 991px) { .modern-lifestyle-product-split { padding: 40px 0 !important; overflow: hidden; } .modern-lifestyle-product-split .mlps-shell { display: flex; flex-direction: column; gap: 30px; width: 100%; } .modern-lifestyle-product-split .mlps-left-panel { min-height: 350px; width: 100%; border-radius: 0; order: 1; } .modern-lifestyle-product-split .mlps-right-panel { width: 100%; padding: 0 15px; order: 2; min-height: auto; } .modern-lifestyle-product-split .mlps-carousel-wrap, .modern-lifestyle-product-split .mlps-product-carousel { max-width: 100%; width: 100%; } .modern-lifestyle-product-split .mlps-product-card { max-width: 100%; } } @media (max-width: 575px) { .modern-lifestyle-product-split { padding: 30px 0 !important; } .modern-lifestyle-product-split .mlps-left-panel { min-height: 280px; } }.cps-section { width: 100%; display: flex; flex-direction: column; overflow: hidden; background-color: #f8f8f8; position: relative; z-index: 2; padding: 1.5rem 0; } .cps-section.is-dragging { cursor: grabbing; } .cps-section.is-dragging * { user-select: none; } .cps-bg-img { pointer-events: none; } .cps-scrolling-wrapper { overflow: hidden; white-space: nowrap; width: 100%; display: flex; position: relative; } .cps-scrolling-track { display: flex; width: max-content; animation: cps-scroll-anim 400s linear infinite; } .cps-scrolling-wrapper:hover .cps-scrolling-track { animation-play-state: paused; } .cps-nav-btn { position: absolute; top: 0; bottom: 0; width: 15vw; background: transparent; border: none; color: white; letter-spacing: 2px; z-index: 10; cursor: pointer; display: flex; align-items: center; pointer-events: auto; text-shadow: 0 4px 10px rgba(0,0,0,0.6); outline: none; } .cps-nav-btn span { display: inline-block; border-bottom: 1px solid white; padding-bottom: 3px; opacity: 0; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .cps-prev-btn { left: 0; justify-content: flex-start; padding-left: 30px; } .cps-prev-btn span { transform: translateX(-40px); } .cps-next-btn { right: 0; justify-content: flex-end; padding-right: 30px; } .cps-next-btn span { transform: translateX(40px); } .cps-prev-btn:hover span, .cps-next-btn:hover span { opacity: 1; transform: translateX(0); } @keyframes cps-scroll-anim { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .cps-column { width: 25vw; height: 50vh; min-height: 400px; position: relative; overflow: hidden; cursor: pointer; border-right: 1px solid white; display: block; flex-shrink: 0; transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .cps-column:last-child { border-right: none; } .cps-bg-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; transform: translateZ(0); backface-visibility: hidden; will-change: transform; } .cps-column:hover .cps-bg-img { transform: scale(1.05); /* elegant slow zoom */ } .cps-overlay-gradient { /* Subtle gradients top and bottom to make text readable */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; opacity: 0; transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity; backface-visibility: hidden; } /* Show gradient ONLY on hover */ .cps-column:hover .cps-overlay-gradient { opacity: 1; } /* Wrapper for everything that hides/shows */ .cps-hover-content { opacity: 0; transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s; will-change: opacity; } .cps-column:hover .cps-hover-content { opacity: 1; } .cps-top-info { position: absolute; top: 40px; left: 40px; right: 40px; z-index: 2; /* Drop in from top on hover */ transform: translateY(-20px); transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; will-change: transform; } .cps-heading { color: #ffffff; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .cps-top-product-name { color: #ffffff; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .cps-column:hover .cps-top-info { transform: translateY(0); } .cps-product-card { position: absolute; bottom: 40px; left: 40px; display: flex; align-items: center; gap: 15px; z-index: 2; text-decoration: none; /* Rise up from bottom on hover */ transform: translateY(20px); transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; will-change: transform; } /* Trigger transforms on hover */ .cps-column:hover .cps-heading, .cps-column:hover .cps-product-card { transform: translateY(0); } .cps-product-image-box { background: #ffffff; padding: 5px; width: 60px; height: 60px; border-radius: 4px; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); flex-shrink: 0; } .cps-product-image-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .cps-product-info { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .cps-product-name { margin-bottom: 5px; letter-spacing: 0.5px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } .cps-product-price-row { display: flex; align-items: center; gap: 8px; font-size: 15px; } .cps-new-price { color: #ffffff; } .cps-old-price { text-decoration: line-through; opacity: 0.7; } /* Responsiveness fixed to perfect native css marquee multiples */ @media (max-width: 1200px) { .cps-column { width: 33.333vw; } } @media (max-width: 991px) { .cps-column { width: 50vw; height: 40vh; min-height: 320px; } } @media (max-width: 767px) { .cps-column { width: 100vw; height: 40vh; min-height: 300px; } /* Always show details on mobile since there is no hover */ .cps-hover-content, .cps-overlay-gradient { opacity: 1; visibility: visible; } .cps-top-info, .cps-product-card { transform: translateY(0); } /* Show buttons on mobile, and force them to be visible since there is no hover on touch screens */ /* .cps-nav-btn span { opacity: 1; transform: translateX(0); } */ /* Prevent tapping the screen from freezing the slider on mobile */ }.mas-section { width: 100%; position: relative; z-index: 2; background-color: var(--mas-bg, #ffffff); color: var(--mas-text, #1a1a1a); } .mas-header-top { max-width: 800px; margin: 0 auto 60px; padding: 0 40px; } .mas-container { margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr 1.1fr; gap: 60px; align-items: center; } /* Left Column */ .mas-side-heading { text-transform: uppercase; letter-spacing: 2px; line-height: 1.4; /* max-width: 120px; */ margin: 0; } /* Middle Column */ .mas-col-content { display: flex; justify-content: center; text-align: center; } .mas-content-inner { max-width: 600px; } .mas-subheading { text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; opacity: 0.7; } .mas-main-heading { line-height: 1.1; margin-bottom: 30px; } .mas-description { line-height: 1.5; margin-bottom: 40px; font-style: italic; opacity: 0.9; } .mas-action { display: flex; justify-content: center; } .mas-button { display: inline-block; padding: 12px 35px; background: transparent; color: #1a1a1a; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); position: relative; overflow: hidden; } .mas-button::after { content: ''; position: absolute; bottom: 10px; left: 35px; right: 35px; height: 1.5px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .mas-button:hover::after { transform: scaleX(1); transform-origin: left; } .mas-button:hover { color: #1a1a1a; } /* Right Column */ .mas-image-wrapper { width: 90%; margin-left: auto; aspect-ratio: 4/5; overflow: hidden; background: #eee; } .mas-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .mas-section:hover .mas-img { transform: scale(1.05); } /* Responsive */ @media (max-width: 1200px) { .mas-description {} } @media (max-width: 991px) { .mas-container { grid-template-columns: 1fr 1fr; gap: 40px; } .mas-col-side { grid-column: span 2; text-align: center; } .mas-side-heading { max-width: none; /* margin: 0 auto 30px; */ } .mas-col-content { order: 2; } .mas-col-image { order: 1; } .mas-image-wrapper { width: 100% !important; /* Forces full width to create equal spacing */ margin: 0 auto !important; /* Perfectly centered */ } } @media (max-width: 767px) { .mas-section { /* padding: 60px 0; */ } .mas-container { grid-template-columns: 1fr; } .mas-col-side, .mas-col-content, .mas-col-image { grid-column: span 1; } .mas-description {} .mas-image-wrapper { aspect-ratio: 1/1; } } /* Font Size Helpers */ .wct-xs { font-size: 1.2rem; } .wct-sm { font-size: 1.8rem; } .wct-md { font-size: 3.2rem; } .wct-lg { font-size: 4.8rem; } .wct-xl { font-size: 6.5rem; } @media (max-width: 1200px) { .wct-xl { font-size: 5.5rem; } .wct-lg { font-size: 4rem; } .wct-md { font-size: 2.8rem; } } @media (max-width: 991px) { .wct-xl { font-size: 4.5rem; } .wct-lg { font-size: 3.5rem; } .wct-md { font-size: 2.5rem; } .wct-sm { font-size: 2rem; } } @media (max-width: 768px) { .wct-xl { font-size: 3.2rem; } .wct-lg { font-size: 2.8rem; } .wct-md { font-size: 2.2rem; } .wct-sm { font-size: 1.6rem; } .wct-xs { font-size: 1.3rem; } }.modern-product-split-showcase { width: 100%; position: relative; overflow: hidden; background-color: var(--mpss-bg, #ffffff); color: var(--mpss-text, #121212); z-index: 2; } .mpss-container { display: flex; flex-wrap: wrap; min-height: 70vh; } .mpss-left-div { flex: 0 0 50%; max-width: 50%; position: relative; overflow: hidden; background-color: #f5f5f5; } .mpss-fade-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mpss-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; animation: mpssFadeTransition 12s infinite; /* Adjusted for max 3 items (4s per slide) */ } @keyframes mpssFadeTransition { 0%, 100% { opacity: 0; } 5%, 33% { opacity: 1; } 38%, 95% { opacity: 0; } } .mpss-right-div { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; padding: 60px 10%; } .mpss-content { max-width: 500px; } .mpss-heading { line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.02em; color: inherit; } .mpss-subheading { text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 25px; opacity: 0.8; color: inherit; } .mpss-description { line-height: 1.6; margin-bottom: 35px; color: inherit; } .mpss-button { display: inline-block; padding: 12px 35px; background: transparent; color: #121212; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); position: relative; overflow: hidden; } /* The growing line */ .mpss-button::after { content: ''; position: absolute; bottom: 10px; /* Positions the line just under the text */ left: 35px; /* Matches the horizontal padding */ right: 35px; height: 1.5px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } /* Hover effect triggers the line */ .mpss-button:hover::after { transform: scaleX(1); transform-origin: left; } /* Optional premium hover state for the button itself */ .mpss-button:hover { /* Only the line animation will play, button stays still */ } /* Responsiveness */ @media (max-width: 991px) { .mpss-left-div, .mpss-right-div { flex: 0 0 100%; max-width: 100%; } .mpss-left-div { height: 50vh; } .mpss-right-div { padding: 50px 30px; text-align: center; } .mpss-content { margin: 0 auto; } } @media (max-width: 576px) { .mpss-left-div { height: 40vh; } .mpss-heading {} .mpss-button { width: 100%; text-align: center; } } /* Post css */