diff --git a/addons/theme_clicks2cart/static/src/scss/theme.scss b/addons/theme_clicks2cart/static/src/scss/theme.scss index a7422ae..6738814 100644 --- a/addons/theme_clicks2cart/static/src/scss/theme.scss +++ b/addons/theme_clicks2cart/static/src/scss/theme.scss @@ -351,7 +351,7 @@ header#top { padding: 40px 50px; text-align: center; min-width: 280px; - backdrop-filter: blur(5px); + // backdrop-filter: blur(5px); z-index: 5; // border: 1px solid rgba(0, 0, 0, 0.05); @@ -767,6 +767,7 @@ header#top { box-shadow: none; background: transparent; text-align: center; + position: relative; // Added for badge positioning &:hover { transform: none; @@ -786,17 +787,18 @@ header#top { .s_cat_badge { position: absolute; - top: 15px; - right: 15px; + top: 10px; // Snugger to the corner + right: 10px; // Snugger to the corner background: #000; color: #fff; font-size: 0.65rem; font-weight: 700; - padding: 4px 10px; - z-index: 12; + padding: 4px 12px; + z-index: 20; // Higher z-index to stay above everything letter-spacing: 1px; text-transform: uppercase; border-radius: 0; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); &.badge-hot { background: #e74c3c; @@ -808,14 +810,14 @@ header#top { } .s_cat_img_wrap { - background-color: #f7f7f7; + // background-color: #f7f7f7; border-radius: 4px; - margin-bottom: 20px; + // margin-bottom: 20px; aspect-ratio: 1 / 1.25; display: flex; align-items: center; justify-content: center; - padding: 10px; + // padding: 10px; position: relative; overflow: hidden; @@ -1172,12 +1174,36 @@ footer#bottom.o_footer { } .s_brand_logos { - img { - transition: transform 0.4s ease, filter 0.4s ease; + overflow: hidden; + white-space: nowrap; + + .s_brand_slider_track { + display: flex; + width: max-content; + animation: brandMarquee 30s linear infinite; &:hover { + animation-play-state: paused; + } + } + + .s_brand_logo_item { + width: 200px; // Standard spacing between logos + display: flex; + align-items: center; + justify-content: center; + padding: 0 20px; + opacity: 0.6; + transition: all 0.4s ease; + + &:hover { + opacity: 1; transform: scale(1.1); - filter: grayscale(0) !important; + + span, + i { + color: #e6b3a3 !important; + } } } @@ -1185,13 +1211,15 @@ footer#bottom.o_footer { i { transition: color 0.3s ease; } +} - div.col-4:hover { +@keyframes brandMarquee { + 0% { + transform: translateX(0); + } - span, - i { - color: #e6b3a3 !important; - } + 100% { + transform: translateX(-50%); // Because we duplicated the items exactly } } diff --git a/addons/theme_clicks2cart/views/pages.xml b/addons/theme_clicks2cart/views/pages.xml index ce99dd7..520db2a 100644 --- a/addons/theme_clicks2cart/views/pages.xml +++ b/addons/theme_clicks2cart/views/pages.xml @@ -274,10 +274,10 @@