// Custom Header & Top Bar .o_top_bar { font-size: 0.8rem; color: #666; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } header#top { background: transparent; transition: background 0.3s ease; padding: 15px 0; &.o_header_is_scrolled { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .nav-link { font-family: $font-family-sans-serif; font-weight: 500; letter-spacing: 0.5px; font-size: 0.95rem; color: #000; &.active { border-bottom: 2px solid #000; } } .navbar-brand { img { max-height: 50px; } } .header-icons { i { font-size: 1.2rem; color: #000; } .cart-badge { background: #000; color: #fff; font-size: 0.6rem; padding: 2px 5px; border-radius: 50%; position: absolute; top: -5px; right: -8px; } } } // Hero Section .s_hero_premium { position: relative; height: 100vh; min-height: 100vh; text-align: center; overflow: hidden; padding: 0; // Padding handled by flex centering in slides .carousel, .carousel-inner, .carousel-item { height: 100%; width: 100%; background-size: cover; background-position: center bottom; background-repeat: no-repeat; // Only show active or transitioning items as flex &.active, &.carousel-item-next, &.carousel-item-prev { display: flex !important; } align-items: center; justify-content: center; &.slide-1 { background-image: url('/theme_clicks2cart/static/src/img/hero_slide_1_v2.png'); } &.slide-2 { background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png'); } &.slide-3 { background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png'); } } .container { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 100px; } .hero-pre-title { font-family: 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 4px; font-size: 1.2rem; margin-bottom: 15px; color: #000; } h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 6rem; margin-bottom: 25px; line-height: 1.1; color: #000; } .hero-desc { max-width: 600px; margin: 0 auto 35px; font-size: 1.15rem; line-height: 1.6; color: #333; } .hero-separator { width: 150px; margin: 0 auto 45px; display: block; filter: brightness(0); } .btn-shop-now { background: #000; color: #fff; padding: 15px 50px; font-family: 'Outfit', sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; border: none; transition: all 0.3s ease; &:hover { transform: translateY(-3px); background: #222; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } } // Custom Carousel Indicators .carousel-indicators { bottom: 50px; justify-content: flex-end; padding-right: 100px; margin: 0; button { width: 12px; height: 12px; border-radius: 50%; background-color: transparent; border: 2px solid #000; opacity: 0.5; margin: 0 5px; transition: all 0.3s ease; &.active { background-color: #000; opacity: 1; transform: scale(1.2); } } } } // Who We Are Section .s_who_we_are { padding: 100px 0; .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; align-items: center; justify-content: center; text-align: center; max-width: 100%; width: 100%; margin: 0; padding: 40px; padding-bottom: 100px; padding-top: 250px; overflow: hidden; &::before { content: "who we are ?"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: inherit; font-size: 10vw; font-weight: 700; color: #f7f7f7; z-index: -1; opacity: 0.1; white-space: nowrap; letter-spacing: -2px; } @media (max-width: 991px) { background-size: cover; min-height: auto; padding: 50px 20px; } h2.title { font-family: inherit; font-weight: 700; font-size: 3.5rem; color: #000; margin-bottom: 30px; @media (max-width: 768px) { font-size: 2.5rem; } } p.description { font-family: inherit; font-size: 1.15rem; line-height: 1.8; color: #222; max-width: 800px; margin: 0 auto 40px auto; @media (max-width: 768px) { font-size: 1rem; } } .founder-info { display: flex; align-items: center; gap: 15px; text-align: left; margin-top: 20px; img { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); object-fit: cover; } .details { h6 { font-family: inherit; font-weight: 700; font-size: 1.2rem; margin: 0; color: #000; } span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #999; } } } } } // ========================================= // Shop By Collection (Jenstore Style) // ========================================= .s_collections { background-color: #fff; padding: 100px 0; position: relative; overflow: hidden; // Background Pattern &::after { content: ""; position: absolute; inset: 0; background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/shadow_canyon.png'); background-repeat: repeat; opacity: 0.1; z-index: 1; pointer-events: none; } .s_col_heading { font-family: inherit; font-weight: 700; font-size: 2.8rem; margin-bottom: 5px; color: #000; position: relative; z-index: 2; } .s_col_subheading { font-family: inherit; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; color: #999; margin-top: 0; position: relative; z-index: 2; } .s_col_promo { overflow: hidden; border-radius: 0; // box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07); position: relative; .s_col_promo_img { transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: auto; display: block; } &:hover .s_col_promo_img { transform: scale(1.08); } .s_col_overlay_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // background: rgba(255, 255, 255, 0.95); padding: 40px 50px; text-align: center; min-width: 280px; // backdrop-filter: blur(5px); z-index: 5; // border: 1px solid rgba(0, 0, 0, 0.05); .s_col_hello { display: block; font-size: 0.75rem; letter-spacing: 4px; color: #e6b3a3; text-transform: uppercase; margin-bottom: 15px; } .s_col_sale_text { font-family: inherit; font-weight: 700; font-size: 2.2rem; color: #000; margin-bottom: 25px; line-height: 1.2; } .s_col_shop_btn { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid #1a1a1a; color: #1a1a1a !important; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; text-decoration: none !important; transition: all 0.3s ease; &:hover { border-bottom-color: #e6b3a3; color: #e6b3a3 !important; padding-right: 15px; } } } } // Floating Floral Accents (Elementor Style) .s_col_bg_flower { position: absolute; width: 500px; height: 500px; background-size: contain; background-repeat: no-repeat; opacity: 0.15; z-index: 1; pointer-events: none; &--tl { top: -100px; left: -150px; background-image: url('/theme_clicks2cart/static/src/img/floral_accent_tl.png') !important; transform: rotate(-10deg); } &--br { bottom: -150px; right: -150px; background-image: url('/theme_clicks2cart/static/src/img/floral_accent_br.png') !important; transform: rotate(15deg); } } // Product Grid Cards .s_col_product_card { position: relative; // background: #fff; // border: 1px solid #f0f0f0; padding: 15px; transition: all 0.4s ease; text-align: center; margin-bottom: 20px; // &:hover { // box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); // transform: translateY(-5px); // } .s_col_badge { position: absolute; top: 15px; right: 15px; background: #000; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 4px 10px; z-index: 3; letter-spacing: 1px; text-transform: uppercase; &--hot { background: #e74c3c; } &--sale { background: #e6b3a3; } } .s_col_product_img { background-color: #f8f8f8; overflow: hidden; margin-bottom: 15px; img { transition: transform 0.6s ease; aspect-ratio: 1 / 1; object-fit: contain; width: 100%; display: block; } } &:hover .s_col_product_img img { transform: scale(1.05); } .s_col_product_info { .s_col_product_name { font-family: inherit; font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; color: #1a1a1a !important; display: block; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s_col_stars { color: #e8a838; font-size: 0.75rem; margin-bottom: 8px; } .s_col_product_price { font-family: inherit; font-weight: 700; font-size: 1rem; color: #1a1a1a; margin-bottom: 0; } } } } // ========================================= // Category Feature (Wedding Section) // ========================================= .s_category_feature { padding: 120px 0; position: relative; background-color: #fff; overflow: hidden; .s_cat_background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); width: 100%; height: 600px; background-image: url('/theme_clicks2cart/static/src/img/wedding_brush_splash.png'); background-repeat: no-repeat; background-position: center; background-size: 110% auto; opacity: 0.8; z-index: 1; pointer-events: none; } .s_cat_header { position: relative; z-index: 5; margin-bottom: 60px; text-align: center; .s_cat_title { font-family: 'Playfair Display', serif; font-size: 4.5rem; font-weight: 700; color: #1a1a1a; letter-spacing: -1px; margin-bottom: 10px; text-transform: capitalize; } .s_cat_divider { display: flex; align-items: center; justify-content: center; gap: 15px; color: #888; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; &::before, &::after { content: ""; height: 1px; width: 40px; background: linear-gradient(90deg, transparent, #888, transparent); } } } .s_cat_grid { position: relative; z-index: 10; } .s_cat_card { background: #fff; padding: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); border-radius: 4px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; margin-bottom: 30px; &:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); } .s_cat_badge { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 3px 8px; z-index: 12; text-transform: uppercase; letter-spacing: 1px; &.badge-hot { background: #e74c3c; } &.badge-sale { background: #e6b3a3; } } .s_cat_img_wrap { background-color: #fff; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; position: relative; img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s ease; } } .s_cat_hover_btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 45px; height: 45px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; z-index: 15; .btn_add_cart { color: #fff !important; font-size: 1.1rem; text-decoration: none !important; } &:hover { background: #e6b3a3; transform: translate(-50%, -50%) scale(1.1); } } &:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); .s_cat_img_wrap img { transform: scale(1.1); } .s_cat_hover_btn { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .s_cat_info { .s_cat_prod_name { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600; margin-top: 15px; a { color: #1a1a1a !important; transition: color 0.3s ease; &:hover { color: #e6b3a3 !important; } } } .s_cat_prod_price { font-size: 1.1rem; font-weight: 700; color: #e6b3a3; } } } // Floating Floral Accents at the bottom .s_cat_floating_flower { position: absolute; bottom: -50px; right: -30px; width: 350px; height: 350px; background-image: url('/theme_clicks2cart/static/src/img/floral_accent_br.png'); background-repeat: no-repeat; background-size: contain; z-index: 15; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1)); } } // ========================================= // Holiday Section (Exact Mockup Match) // ========================================= .s_holiday_section { // padding: 120px 0; position: relative; background-color: #fff; overflow: hidden; .s_holiday_header { text-align: center; margin-bottom: 80px; position: relative; z-index: 5; .s_holiday_title { font-family: 'Playfair Display', serif; font-size: 5rem; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; letter-spacing: -1px; } .s_holiday_divider { color: #666; font-size: 0.95rem; font-family: 'Outfit', sans-serif; display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: 400; &::before, &::after { content: ""; height: 1px; width: 30px; background: #ccc; } } } .s_holiday_grid_container { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; } // Left Column: 2x2 Product Grid .s_holiday_prod_grid { .s_cat_card { margin-bottom: 50px; padding: 0; border: none; box-shadow: none; background: transparent; text-align: center; position: relative; // Added for badge positioning &:hover { transform: none; box-shadow: none; .s_cat_img_wrap { img { transform: scale(1); // No scaling as requested "only show icon" } .s_cat_hover_btn { opacity: 1; transform: translate(-50%, -50%) scale(1); } } } .s_cat_badge { position: absolute; 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 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; } &.badge-sale { background: #e6b3a3; } } .s_cat_img_wrap { // background-color: #f7f7f7; border-radius: 4px; // margin-bottom: 20px; aspect-ratio: 1 / 1.25; display: flex; align-items: center; justify-content: center; // padding: 10px; position: relative; overflow: hidden; img { max-width: 90%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s ease; } .s_cat_hover_btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 45px; height: 45px; background: #000; // Default black as requested border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; z-index: 15; pointer-events: auto; .btn_add_cart { color: #fff !important; font-size: 1.1rem; text-decoration: none !important; } &:hover { background: #e6b3a3; // Highlight color on hover transform: translate(-50%, -50%) scale(1.1); } } } .s_cat_info { .s_cat_prod_name { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: #444 !important; margin-bottom: 8px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s_cat_stars { color: #e6b3a3; // Accent color for stars font-size: 0.75rem; margin-bottom: 8px; } .s_cat_prod_price { font-size: 1.1rem; font-weight: 800; // Extra bold price color: #000; font-family: 'Outfit', sans-serif; } } } } // Right Column: Artistic Promo .s_holiday_promo_wrap { position: relative; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; .s_holiday_promo_bg { position: absolute; width: 100%; height: 100%; background-image: url('/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1; } .s_holiday_promo_content { position: relative; z-index: 5; text-align: center; margin-top: -20px; .s_holiday_hello { font-size: 0.9rem; letter-spacing: 3px; color: #333; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; } .s_holiday_promo_title { font-family: 'Playfair Display', serif; font-size: 5.5rem; font-weight: 900; color: #000; line-height: 1; margin-bottom: 30px; } .s_holiday_shop_btn { display: inline-block; background: #000; color: #fff !important; padding: 10px 30px; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1.5px; text-decoration: none !important; border-radius: 0; // Square corners as in mockup transition: transform 0.3s ease; &:hover { transform: scale(1.05); } } } } // Floating Petals // Floating Petals .s_holiday_petal_float { position: absolute; pointer-events: none; z-index: 2; opacity: 0.6; } } // ========================================= // Custom Footer (Jenstore Style) // ========================================= footer#bottom.o_footer { background-image: url('https://landing.engotheme.com/html/jenstore/demo/css/img/BG-footer.png'); background-size: 100% 100%; background-position: top center; background-repeat: no-repeat; padding-top: 250px !important; padding-bottom: 50px; border-top: none !important; // Pull the footer up slightly to overlap the previous section for a seamless wave effect margin-top: -60px !important; position: relative; z-index: 10; // Ensure the background color is entirely transparent // This allows the full png shape (including side waves) to define the bounds. background-color: transparent !important; // Remove Odoo default borders &.border-top { border-top: none !important; } .footer-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 800; color: #000; margin-bottom: 30px; } .footer-links { li { margin-bottom: 15px; a { color: #888 !important; text-decoration: none !important; font-size: 0.95rem; font-family: 'Outfit', sans-serif; font-weight: 400; transition: all 0.3s ease; &:hover { color: #e6b3a3 !important; padding-left: 5px; } } } } .footer-newsletter-card { background: #fff; padding: 50px 40px; position: relative; overflow: hidden; // box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); min-height: 350px; .newsletter-image { position: absolute; right: 20px; bottom: 0; max-height: 250px; pointer-events: none; z-index: 1; } .newsletter-content { position: relative; z-index: 5; max-width: 70%; } h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.5rem; margin-bottom: 10px; color: #000; } p { color: #888; font-family: 'Outfit', sans-serif; font-size: 0.95rem; line-height: 1.6; margin-bottom: 30px; } .newsletter-form { max-width: 320px; .input-group { border: 1px solid #1a1a1a; border-radius: 0; input { background: transparent; border: none; box-shadow: none; padding: 12px 15px; font-size: 0.95rem; &::placeholder { color: #888; font-family: inherit; } } } .btn-subscribe { background: #000; color: #fff; border: none; border-radius: 0; padding: 12px 40px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; margin-top: 15px; display: inline-block; transition: all 0.3s ease; &:hover { background: #e6b3a3; color: #fff; transform: translateY(-2px); } } } } .footer-bottom { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(0, 0, 0, 0.05); color: #888; font-family: 'Outfit', sans-serif; font-size: 0.85rem; .footer-logo { h5 { font-family: 'Playfair Display', serif; font-weight: 700; color: #000; margin-bottom: 0; } span { font-family: 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 0.6rem; display: block; } } a { color: #777 !important; text-decoration: none !important; &:hover { color: #000 !important; } } } // Social icons .social-links { a { color: #000 !important; font-size: 1rem; transition: color 0.3s ease; &:hover { color: #e6b3a3 !important; } } } } // ========================================= // Countdown & Brands Section // ========================================= .s_sale_countdown { .s_countdown_bg { // Use the watercolor splash PNG as background - it is already transparent on edges background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/counter.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; background-color: transparent; overflow: hidden; position: relative; .btn-dark { transition: all 0.3s ease; &:hover { background-color: #e6b3a3 !important; border-color: #e6b3a3 !important; transform: translateY(-2px); } } } } .s_brand_logos { 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); span, i { color: #e6b3a3 !important; } } } span, i { transition: color 0.3s ease; } } @keyframes brandMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); // Because we duplicated the items exactly } } // ========================================= // Wedding Section (Jenstore style) // ========================================= .s_wedding_section { overflow: hidden; .s_wedding_card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); &:hover { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } } // Floating bottom-right flower decoration .s_cat_floating_flower { position: absolute; bottom: -60px; right: -30px; width: 280px; height: 280px; background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/decor-flower.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom right; pointer-events: none; z-index: 3; } }