diff --git a/addons/theme_clicks2cart/static/src/img/featured_collection_cart.png b/addons/theme_clicks2cart/static/src/img/featured_collection_cart.png new file mode 100644 index 0000000..457160a Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/featured_collection_cart.png differ diff --git a/addons/theme_clicks2cart/static/src/img/festive_hero_slide.png b/addons/theme_clicks2cart/static/src/img/festive_hero_slide.png new file mode 100644 index 0000000..8330046 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/festive_hero_slide.png differ diff --git a/addons/theme_clicks2cart/static/src/img/floral_gift_box_countdown_bg.png b/addons/theme_clicks2cart/static/src/img/floral_gift_box_countdown_bg.png new file mode 100644 index 0000000..0945054 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/floral_gift_box_countdown_bg.png differ diff --git a/addons/theme_clicks2cart/static/src/img/fresh_produce_hero_slide.png b/addons/theme_clicks2cart/static/src/img/fresh_produce_hero_slide.png new file mode 100644 index 0000000..5a3f834 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/fresh_produce_hero_slide.png differ diff --git a/addons/theme_clicks2cart/static/src/img/puja_hero_slide.png b/addons/theme_clicks2cart/static/src/img/puja_hero_slide.png new file mode 100644 index 0000000..ca4e4ef Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/puja_hero_slide.png differ diff --git a/addons/theme_clicks2cart/static/src/scss/theme.scss b/addons/theme_clicks2cart/static/src/scss/theme.scss index 53a9e81..833b756 100644 --- a/addons/theme_clicks2cart/static/src/scss/theme.scss +++ b/addons/theme_clicks2cart/static/src/scss/theme.scss @@ -7,9 +7,9 @@ } header#top { - background: transparent; + background: #fff; transition: background 0.3s ease; - padding: 15px 0; + padding: 10px 0; &.o_header_is_scrolled { background: rgba(255, 255, 255, 0.95) !important; @@ -52,8 +52,274 @@ header#top { right: -8px; } } + + // Desktop: Absolutely center the logo + @media (min-width: 992px) { + .c2c-logo-wrap { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 10; + + a { + pointer-events: all; + } + } + } + + // Mobile: Flexbox for 3 columns + @media (max-width: 991px) { + .container { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + justify-content: space-between !important; + align-items: center !important; + } + + .c2c-header-left, + .c2c-header-right { + flex: 0 0 50px; // Fixed width for icons + } + + .c2c-logo-wrap { + flex: 1; + padding: 0 10px; + min-width: 0; // Allow content to shrink if needed + + .navbar-brand { + white-space: normal; // Allow text to wrap if name is long + + span { + font-size: 0.9rem !important; + display: block; + } + + .small { + font-size: 0.55rem !important; + } + } + } + + .c2c-header-right { + justify-content: flex-end; + } + } } +// ========================================= +// Mobile Hamburger Toggle Button +// ========================================= +.c2c-mobile-toggle { + background: transparent; + border: none; + padding: 0; + font-size: 1.5rem; + color: #000; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + + &:focus { + outline: none; + box-shadow: none; + } +} + +// ========================================= +// Mobile Off-Canvas Overlay +// ========================================= +.c2c-mobile-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + z-index: 9998; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + + &.c2c-overlay--visible { + opacity: 1; + pointer-events: all; + } +} + +// ========================================= +// Mobile Off-Canvas Side Drawer +// ========================================= +.c2c-mobile-drawer { + position: fixed; + top: 0; + left: 0; + width: 280px; + height: 100vh; + background: #fff; + z-index: 9999; + transform: translateX(-100%); + transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + overflow-y: auto; + box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); + + &.c2c-drawer--open { + transform: translateX(0); + } + + // --- Close button row --- + .c2c-drawer-header { + display: flex; + justify-content: flex-end; + padding: 16px 20px 10px; + border-bottom: 1px solid #f0f0f0; + } + + .c2c-drawer-close { + background: none; + border: none; + font-size: 1.4rem; + color: #333; + cursor: pointer; + padding: 0; + line-height: 1; + + &:hover { + color: #000; + } + + &:focus { + outline: none; + } + } + + // --- Search bar --- + .c2c-drawer-search { + display: flex; + align-items: center; + border-bottom: 1px solid #f0f0f0; + padding: 12px 20px; + gap: 10px; + + .c2c-search-input { + flex: 1; + border: none; + outline: none; + font-size: 0.95rem; + color: #333; + background: transparent; + font-family: inherit; + + &::placeholder { + color: #aaa; + } + } + + .c2c-search-btn { + background: none; + border: none; + padding: 0; + color: #555; + font-size: 1rem; + cursor: pointer; + + &:hover { + color: #000; + } + } + } + + // --- Navigation links --- + .c2c-drawer-nav { + display: flex; + flex-direction: column; + padding: 10px 0; + flex: 1; + } + + .c2c-drawer-link { + display: block; + padding: 14px 24px; + font-size: 1rem; + font-weight: 500; + text-decoration: none; + color: #111; + transition: color 0.2s ease, background 0.2s ease; + font-family: inherit; + + &:hover { + color: #e6b3a3; + background: #fafafa; + } + + // "Home" — bold black (active) + &--active { + font-weight: 700; + color: #000; + } + + // "Shop +" — reddish/accent + &--accent { + color: #c0392b; + } + + // Other links — muted dark + &--muted { + color: #444; + } + + .c2c-plus { + font-weight: 400; + } + } + + // --- Footer area (My Account + contact) --- + .c2c-drawer-footer { + padding: 16px 24px 24px; + border-top: 1px solid #f0f0f0; + } + + .c2c-drawer-account { + display: flex; + align-items: center; + font-size: 0.95rem; + font-weight: 600; + color: #111; + text-decoration: none; + margin-bottom: 12px; + + i { + font-size: 1rem; + } + + &:hover { + color: #e6b3a3; + } + } + + .c2c-drawer-contact { + font-size: 0.9rem; + color: #444; + margin-bottom: 6px; + + a { + color: #e6b3a3; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} + + + // Hero Section .s_hero_premium { position: relative; @@ -87,11 +353,15 @@ header#top { } &.slide-2 { - background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png'); + background-image: url('/theme_clicks2cart/static/src/img/festive_hero_slide.png'); } &.slide-3 { - background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png'); + background-image: url('/theme_clicks2cart/static/src/img/puja_hero_slide.png'); + } + + &.slide-4 { + background-image: url('/theme_clicks2cart/static/src/img/fresh_produce_hero_slide.png'); } } @@ -182,12 +452,12 @@ header#top { // Who We Are Section .s_who_we_are { padding: 100px 0; + background-repeat: no-repeat; + background-position: center; + background-size: 100% auto; .who-we-are-wrapper { position: relative; - background-repeat: no-repeat; - background-position: center; - background-size: 100% auto; min-height: 1000px; display: flex; flex-direction: column; @@ -1229,12 +1499,96 @@ footer#bottom.o_footer { .s_wedding_section { overflow: hidden; - .s_wedding_card { - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + .s_wedding_slider_container { + padding: 40px 0; + overflow: hidden; + position: relative; + } + + .s_wedding_slider_track { + display: flex; + width: max-content; + animation: weddingMarquee 40s linear infinite; + gap: 30px; &:hover { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12); - transform: translateY(-4px); + animation-play-state: paused; + } + } + + .s_wedding_slider_item { + width: 300px; + flex: 0 0 300px; + } + + .s_wedding_card { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: all 0.4s ease; + + .category-img { + transition: transform 0.6s ease; + } + + .s_wedding_card_overlay { + background-color: rgba(255, 255, 255, 0.85) !important; + opacity: 0; + visibility: hidden; + transition: all 0.4s ease; + z-index: 5; + + .category-title-wrapper { + transform: translateY(20px); + transition: transform 0.4s ease; + } + + .category-btn-wrapper { + transform: translateY(20px); + transition: transform 0.4s ease 0.1s; + } + } + + &:hover { + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + + .category-img { + transform: scale(1.08); + } + + .s_wedding_card_overlay { + opacity: 1; + visibility: visible; + + .category-title-wrapper, + .category-btn-wrapper { + transform: translateY(0); + } + } + } + } + + .btn_view_cat { + font-family: 'Outfit', sans-serif; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 2px; + text-transform: uppercase; + color: #000; + background: transparent; + border: 1px solid #000; + padding: 10px 25px; + transition: all 0.3s ease; + text-decoration: none !important; + display: inline-block; + width: fit-content; + margin: 0 auto; + + &:hover { + background: #000; + color: #fff; } } @@ -1254,6 +1608,144 @@ footer#bottom.o_footer { } } +@keyframes weddingMarquee { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } +} + +// ========================================= +// Promo Banners Section (Replaced Featured Collections) +// ========================================= +.s_promo_grid { + .promo-banner-card { + border-radius: 0; + + .banner-bg { + transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + &:hover { + .banner-bg { + transform: scale(1.05); + } + } + } +} + +// ========================================= +// Elementor-style Global Animations +// ========================================= +@keyframes floatUpDown { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-30px); + } + + 100% { + transform: translateY(0); + } +} + +@keyframes spinSlow { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes floatSideSide { + 0% { + transform: translateX(0) scaleX(-1); + } + + 50% { + transform: translateX(-25px) scaleX(-1); + } + + 100% { + transform: translateX(0) scaleX(-1); + } +} + +.elementor-anim-float-up-down { + animation: floatUpDown 8s ease-in-out infinite; +} + +.elementor-anim-spin-slow { + animation: spinSlow 40s linear infinite; +} + +.elementor-anim-float-side { + animation: floatSideSide 10s ease-in-out infinite; +} + +// ========================================= +// Jewelry Editorial Section (Creative Redesign) +// ========================================= +.s_jewelry_editorial { + .editorial-text-wrap { + z-index: 2; + + .btn-dark { + &:hover { + background-color: #e6b3a3; + border-color: #e6b3a3; + color: #fff; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(230, 179, 163, 0.3); + } + } + } + + .offset-grid { + position: relative; + z-index: 2; + } + + .editorial-product-card { + .editorial-img-wrap { + border-radius: 4px; + + .transition-zoom { + transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); + mix-blend-mode: multiply; + } + } + + &:hover { + .transition-zoom { + transform: scale(1.08); + } + + .editorial-action-overlay { + transform: translateY(0) !important; + opacity: 1 !important; + } + + .editorial-product-info a { + color: #e6b3a3 !important; + } + } + + .editorial-product-info { + a { + transition: color 0.3s ease; + } + } + } +} + .s_holiday_section { position: relative; // padding: 120px 0; @@ -1353,13 +1845,13 @@ footer#bottom.o_footer { // Wedding Section Image Wrapper .s_wedding_card_img_wrap { - background: #f8f8f8; + // background: #f8f8f8; height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; - margin-bottom: 20px; + // margin-bottom: 20px; transition: all 0.3s ease; img { @@ -1782,4 +2274,473 @@ footer#bottom.o_footer { opacity: 1; transform: scale(1); } +} + +// ========================================= +// Mobile Responsiveness +// ========================================= + +@media (max-width: 1199px) { + .s_hero_premium { + h1 { + font-size: 5rem; + } + } + + .s_holiday_promo_wrap .s_holiday_promo_content .s_holiday_promo_title { + font-size: 4.5rem; + } +} + +@media (max-width: 991px) { + header#top { + .navbar-brand { + position: relative !important; + transform: none !important; + left: 0 !important; + margin: 0 auto; + + img { + max-height: 40px !important; + } + + span.fs-6 { + font-size: 0.8rem !important; + } + + span.small { + font-size: 0.45rem !important; + } + } + + .container { + flex-wrap: wrap; + justify-content: center !important; + gap: 15px; + } + + .header-icons { + width: 100%; + justify-content: center; + border-top: 1px solid #eee; + padding-top: 10px; + gap: 30px !important; + } + } + + .s_hero_premium { + height: auto; + min-height: 600px; + + .carousel-item { + padding: 80px 0; + } + + h1 { + font-size: 3.5rem; + } + + .hero-desc { + font-size: 1rem; + } + + .carousel-indicators { + justify-content: center; + padding-right: 0; + bottom: 30px; + } + } + + .s_who_we_are { + padding: 20px 0; + background-size: contain !important; + background-position: center center !important; + background-repeat: no-repeat !important; + + .who-we-are-wrapper { + min-height: auto; + padding: 120px 20px 60px !important; + + &::before { + display: none; + } + + h2.title { + font-size: 1.8rem; + margin-bottom: 15px; + } + + p.description { + font-size: 0.9rem; + line-height: 1.6; + padding: 0 !important; + margin-bottom: 30px; + } + + .founder-info { + margin-top: 10px; + justify-content: center; + } + } + } + + .s_collections { + .s_col_heading { + font-size: 2.2rem; + } + + .s_col_promo { + margin-bottom: 30px; + } + + .s_col_overlay_text { + padding: 30px; + + .s_col_sale_text { + font-size: 1.8rem; + } + } + + .row.g-3 { + margin-right: -5px !important; + margin-left: -5px !important; + + >.col-6 { + padding: 5px !important; + flex: 0 0 50% !important; + max-width: 50% !important; + } + } + + .s_col_product_card { + padding: 8px !important; + + .s_col_product_img { + height: 160px !important; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 10px !important; + + img { + max-height: 140px; + padding: 10px; + } + } + + .s_col_badge { + top: 0 !important; + right: 0 !important; + padding: 4px 8px !important; + font-size: 0.6rem !important; + } + + .s_col_product_name { + font-size: 0.85rem !important; + } + + .s_col_stars { + font-size: 0.65rem !important; + margin-bottom: 3px !important; + } + + .s_col_product_price { + font-size: 0.9rem !important; + } + } + } + + .s_wedding_section { + .container>div>h2 { + font-size: 2.8rem !important; + } + + .row.g-4 { + display: flex !important; + flex-wrap: wrap !important; + margin-right: -5px !important; + margin-left: -5px !important; + + >div { + padding: 5px !important; + flex: 0 0 50% !important; + max-width: 50% !important; + } + } + + .position-relative { + padding-top: 40px !important; + padding-bottom: 80px !important; + background-size: cover !important; + } + + .s_wedding_card { + border: 1px solid #f0f0f0; + + .badge { + top: 0 !important; + right: 0 !important; + margin: 0 !important; + padding: 4px 8px !important; + font-size: 0.6rem !important; + border-radius: 0 !important; + } + + .fw-bold { + font-size: 0.85rem !important; + margin-top: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .mb-1 { + margin-top: 3px; + + i { + font-size: 0.65rem !important; + } + } + + div[style*="font-size: 1rem"] { + margin-top: 5px; + font-size: 0.9rem !important; + + .text-decoration-line-through { + font-size: 0.7rem !important; + } + } + } + } + + .s_holiday_section { + padding-bottom: 60px; + + .container { + padding: 0 15px; + } + + .s_holiday_header { + margin-bottom: 40px; + + .s_holiday_title { + font-size: 2.8rem; + } + } + + .s_holiday_prod_grid { + margin-right: -5px !important; + margin-left: -5px !important; + + .col-md-6 { + padding: 5px !important; + flex: 0 0 50% !important; + max-width: 50% !important; + margin-bottom: 0 !important; + } + + .s_cat_card { + background: #fff; + border: 1px solid #f0f0f0; + padding: 8px !important; + margin-bottom: 10px; + + .s_cat_img_wrap { + height: 220px !important; + margin-bottom: 10px !important; + + img { + max-height: 200px; + padding: 10px; + } + } + + .s_cat_badge { + top: 0 !important; + right: 0 !important; + padding: 4px 8px !important; + font-size: 0.6rem !important; + border-radius: 0; + } + + .s_cat_prod_name { + font-size: 0.85rem !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .s_cat_stars { + font-size: 0.65rem !important; + margin-bottom: 3px !important; + } + + .s_cat_prod_price { + font-size: 0.9rem !important; + } + } + } + + .s_holiday_promo_wrap { + min-height: 350px; + margin-top: 20px; + + .s_holiday_promo_title { + font-size: 3.5rem; + } + } + } + + .s_sale_countdown { + .s_countdown_bg { + padding-top: 80px !important; + padding-bottom: 80px !important; + background-size: cover !important; + } + + .display-4 { + font-size: 2.5rem; + } + + .justify-content-end { + justify-content: center !important; + } + + .text-start { + text-align: center !important; + } + + .hero-desc { + margin: 0 auto; + } + + .gap-2.gap-md-3 { + justify-content: center; + } + } + + .s_blogs_section { + .s_blogs_header { + margin-bottom: 50px; + + &::before { + font-size: 6rem; + } + + .s_blogs_title { + font-size: 3rem; + } + } + } + + .s_quickview_container { + height: 90vh !important; + overflow-y: auto; + + .row { + flex-direction: column; + } + + .s_qv_images_col { + border-right: none; + border-bottom: 1px solid #eee; + padding: 20px; + } + + .s_qv_content_col { + padding: 20px; + } + } + + footer#bottom.o_footer { + padding-top: 150px !important; + background-size: cover; + + .footer-newsletter-card { + padding: 30px; + min-height: auto; + + .newsletter-content { + max-width: 100%; + } + + .newsletter-image { + display: none; + } + } + + .footer-bottom .row { + flex-direction: column; + gap: 15px; + text-align: center !important; + + div { + text-align: center !important; + } + } + } +} + +@media (max-width: 767px) { + .s_hero_premium { + h1 { + font-size: 2.8rem; + } + + .hero-pre-title { + font-size: 1rem; + letter-spacing: 2px; + } + + .btn-shop-now { + padding: 12px 30px; + font-size: 0.8rem; + } + } + + .s_collections { + .col-6 { + width: 50% !important; + flex: 0 0 50% !important; + } + } + + .s_wedding_section { + .col-md-6 { + width: 50% !important; + flex: 0 0 50% !important; + } + } + + .s_quickview_container { + width: 95% !important; + } + + .s_brand_logo_item { + width: 150px; + } +} + +@media (max-width: 575px) { + .s_hero_premium { + h1 { + font-size: 2.2rem; + } + } + + .s_who_we_are .who-we-are-wrapper h2.title { + font-size: 2rem; + } + + .s_blogs_section .s_blogs_header .s_blogs_title { + font-size: 2.2rem; + } + + .s_blogs_section .s_blogs_header::before { + font-size: 4rem; + } + + .s_sale_countdown .display-4 { + font-size: 2rem; + } } \ No newline at end of file diff --git a/addons/theme_clicks2cart/views/layout.xml b/addons/theme_clicks2cart/views/layout.xml index 2b5839d..ac0939b 100644 --- a/addons/theme_clicks2cart/views/layout.xml +++ b/addons/theme_clicks2cart/views/layout.xml @@ -1,6 +1,6 @@ - +