/* ======================================================= ELETECH — CSS Personalizado para Odoo Pegar en: Sitio Web → Configuración → CSS Personalizado (o en el editor de temas de Odoo) ======================================================= */ /* ── FUENTES ── */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap'); /* ── VARIABLES ── */ :root { --pink: #F2A7C3; --pink-lt: #FCE8F1; --pink-dk: #C96A90; --yellow: #F5D87A; --yellow-lt: #FEFAE8; --blue-lt: #EAF3FD; --mint-lt: #E6F7F1; --lav-lt: #EEE8FD; --cream: #FDF8F2; --ink: #1E1A2E; --ink-mid: #4A4360; --ink-soft: #8B82A0; --border: rgba(200,160,190,0.2); } /* ============================================= BASE ============================================= */ body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--cream) !important; color: var(--ink) !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', serif !important; font-weight: 300 !important; color: var(--ink) !important; } p, li, span, a { font-family: 'Plus Jakarta Sans', sans-serif !important; } /* ============================================= TIRA SUPERIOR (Top Bar / Announcement) ============================================= */ #top_bar, .o_top_bar, .o_header_additional { background: var(--ink) !important; color: var(--yellow) !important; font-size: 0.7rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; padding: 0.5rem 1rem !important; text-align: center !important; } /* ============================================= NAVEGACIÓN ============================================= */ header#top, .o_header_standard, nav.navbar { background: rgba(253, 248, 242, 0.95) !important; backdrop-filter: blur(14px) !important; border-bottom: 1px solid var(--border) !important; padding: 0 3rem !important; min-height: 64px !important; box-shadow: none !important; } /* Logo */ .navbar-brand, #top .navbar-brand { font-family: 'Fraunces', serif !important; font-size: 1.6rem !important; font-weight: 700 !important; color: var(--ink) !important; } /* Links de navegación */ .nav-link, .navbar-nav .nav-link, #top_menu .nav-link { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.78rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--ink-soft) !important; transition: color 0.2s !important; padding: 0.4rem 0.75rem !important; } .nav-link:hover, .navbar-nav .nav-link:hover { color: var(--pink-dk) !important; } /* Botón del carrito */ .o_wsale_my_cart, a[href="/shop/cart"] { background: transparent !important; border: 1.5px solid var(--border) !important; border-radius: 50px !important; padding: 0.4rem 0.9rem !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--ink) !important; transition: border-color 0.2s, background 0.2s !important; } .o_wsale_my_cart:hover, a[href="/shop/cart"]:hover { background: var(--pink-lt) !important; border-color: var(--pink) !important; } /* Botón WhatsApp en nav */ a[href*="wa.me"] { background: var(--yellow) !important; color: var(--ink) !important; border-radius: 50px !important; padding: 0.45rem 1rem !important; font-size: 0.75rem !important; font-weight: 600 !important; text-decoration: none !important; transition: background 0.2s !important; } a[href*="wa.me"]:hover { background: var(--pink-lt) !important; } /* ============================================= HERO / BANNER PRINCIPAL (Carrusel) ============================================= */ .o_carousel, #o_carousel_homepage, .s_banner, .carousel { border-radius: 0 !important; overflow: hidden !important; } .carousel-item, .s_banner .carousel-item { min-height: 80vh !important; } .carousel-item img, .s_banner img { object-fit: cover !important; width: 100% !important; height: 100% !important; opacity: 0.88 !important; } /* Texto dentro del hero */ .carousel-caption h1, .s_banner h1, .o_we_bg_filter + .container h1 { font-family: 'Fraunces', serif !important; font-size: clamp(2.5rem, 5vw, 5rem) !important; font-weight: 300 !important; line-height: 1.05 !important; color: #fff !important; text-shadow: 0 2px 20px rgba(30,26,46,0.3) !important; } .carousel-caption p, .s_banner p { font-size: 1rem !important; line-height: 1.8 !important; color: rgba(255,255,255,0.85) !important; } /* Flechas del carrusel */ .carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(30,26,46,0.5) !important; border-radius: 50% !important; padding: 1.5rem !important; background-size: 50% !important; } /* Indicadores del carrusel */ .carousel-indicators button { background-color: var(--pink) !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; border: none !important; opacity: 0.4 !important; } .carousel-indicators button.active { opacity: 1 !important; transform: scale(1.2) !important; } /* ============================================= BARRA DE CARACTERÍSTICAS (Features / Iconos) ============================================= */ .s_features, .o_we_website_features, section.s_three_columns { background: #fff !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; padding: 1.5rem 2rem !important; } .s_features .col, .s_features .col-md-3 { border-right: 1px solid var(--border) !important; padding: 1rem 1.5rem !important; transition: background 0.2s !important; } .s_features .col:last-child, .s_features .col-md-3:last-child { border-right: none !important; } .s_features .col:hover, .s_features .col-md-3:hover { background: var(--cream) !important; } .s_features h5, .s_features .h5 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; color: var(--ink) !important; margin-bottom: 0.25rem !important; } .s_features p { font-size: 0.7rem !important; color: var(--ink-soft) !important; } /* ============================================= GRILLA DE PRODUCTOS (Tienda / Shop) ============================================= */ .oe_website_sale .o_wsale_products_grid_table, #products_grid, .o_wsale_products_grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; padding: 0 !important; } /* Tarjeta de producto */ .o_wsale_product_item, .oe_product_cart, .product_price.css_editable_mode_hidden { border-radius: 16px !important; overflow: hidden !important; background: var(--cream) !important; border: 1px solid var(--border) !important; transition: transform 0.3s, box-shadow 0.3s !important; box-shadow: none !important; } .o_wsale_product_item:hover, .oe_product_cart:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 40px rgba(200,107,144,0.15) !important; } /* Imagen del producto */ .o_wsale_product_item .o_product_image_block img, .oe_product_cart img { border-radius: 0 !important; transition: transform 0.5s !important; object-fit: cover !important; aspect-ratio: 1 !important; width: 100% !important; opacity: 0.92 !important; } .o_wsale_product_item:hover img, .oe_product_cart:hover img { transform: scale(1.06) !important; opacity: 1 !important; } /* Nombre del producto */ .o_wsale_product_item .o_ribbon_left, .oe_product_cart .product_name, .o_wsale_product_item h5, .o_wsale_product_item .h5 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.82rem !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.35 !important; padding: 0.9rem 1rem 0.25rem !important; } /* Precio del producto */ .o_wsale_product_item .monetary_field, .oe_product_cart .monetary_field, .oe_product_price { font-family: 'Fraunces', serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: var(--pink-dk) !important; padding: 0 1rem 1rem !important; } /* Botón agregar al carrito */ .o_wsale_product_item .btn-primary, .oe_product_cart .btn-primary, a.btn.btn-primary { background: var(--ink) !important; border: none !important; border-radius: 50px !important; font-size: 0.72rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 0.55rem 1.25rem !important; transition: background 0.2s !important; color: var(--cream) !important; width: calc(100% - 2rem) !important; margin: 0 1rem 1rem !important; display: block !important; } .o_wsale_product_item .btn-primary:hover, a.btn.btn-primary:hover { background: var(--pink-dk) !important; } /* Ribbon / badge "Nuevo" */ .o_ribbon_left, .o_ribbon { background: var(--pink) !important; color: #fff !important; font-size: 0.6rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 50px !important; padding: 0.25rem 0.65rem !important; } /* ============================================= SECCIONES DE CATEGORÍAS ============================================= */ .s_dynamic_snippet_products, .o_wsale_product_list, section[data-snippet="s_product_list"] { padding: 4rem 5rem !important; background: var(--cream) !important; } /* Título de sección */ section h2, section .h2, .o_header_standard + section h2 { font-family: 'Fraunces', serif !important; font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important; font-weight: 300 !important; color: var(--ink) !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; } section h2 em, section .h2 em { font-style: italic !important; color: var(--pink-dk) !important; } /* ============================================= TARJETAS DE CATEGORÍA (Cover / Covers) ============================================= */ .s_cover, .o_we_bg_filter { border-radius: 16px !important; overflow: hidden !important; transition: transform 0.3s !important; } .s_cover:hover { transform: translateY(-6px) !important; } .s_cover img { transition: transform 0.5s !important; } .s_cover:hover img { transform: scale(1.06) !important; } /* ============================================= BOTONES GENERALES ============================================= */ .btn-primary, .o_btn_primary { background: var(--ink) !important; border-color: var(--ink) !important; border-radius: 50px !important; font-size: 0.78rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 0.75rem 1.6rem !important; transition: background 0.2s, transform 0.15s !important; color: var(--cream) !important; } .btn-primary:hover { background: var(--pink-dk) !important; border-color: var(--pink-dk) !important; transform: translateY(-2px) !important; } .btn-secondary, .o_btn_secondary { background: transparent !important; border: 1.5px solid var(--border) !important; border-radius: 50px !important; font-size: 0.78rem !important; font-weight: 500 !important; color: var(--ink-mid) !important; transition: border-color 0.2s, color 0.2s !important; } .btn-secondary:hover { border-color: var(--pink) !important; color: var(--pink-dk) !important; } /* ============================================= FORMULARIO DE CONTACTO ============================================= */ .s_website_form .form-control, input.form-control, textarea.form-control, select.form-control { border: 1.5px solid var(--border) !important; border-radius: 10px !important; background: var(--cream) !important; color: var(--ink) !important; font-size: 0.88rem !important; padding: 0.75rem 1rem !important; transition: border-color 0.2s !important; } .form-control:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(242,167,195,0.2) !important; outline: none !important; } /* ============================================= SECCIÓN DE UBICACIONES / MAPA ============================================= */ .s_map iframe, .o_website_google_map iframe { border-radius: 20px !important; border: none !important; } /* ============================================= REDES SOCIALES ============================================= */ .s_social_media .s_social_media_icon, .o_footer_social a { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(30,26,46,0.06) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 0.25rem !important; transition: background 0.2s !important; color: var(--ink-mid) !important; } .s_social_media .s_social_media_icon:hover, .o_footer_social a:hover { background: var(--pink) !important; color: #fff !important; } /* ============================================= PIE DE PÁGINA ============================================= */ footer, #footer, .o_footer { background: var(--ink) !important; color: rgba(255,255,255,0.6) !important; padding: 3rem 5rem 1.5rem !important; } footer h4, #footer h4, .o_footer h4, footer .h4 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #fff !important; margin-bottom: 1rem !important; } footer a, #footer a, .o_footer a { font-size: 0.8rem !important; color: rgba(255,255,255,0.5) !important; text-decoration: none !important; transition: color 0.2s !important; line-height: 2 !important; } footer a:hover, #footer a:hover { color: var(--pink) !important; } footer p, #footer p { font-size: 0.8rem !important; color: rgba(255,255,255,0.5) !important; line-height: 1.8 !important; } footer .o_footer_copyright, #footer .copyright { border-top: 1px solid rgba(255,255,255,0.08) !important; padding-top: 1.25rem !important; font-size: 0.72rem !important; color: rgba(255,255,255,0.3) !important; } /* Nombre de la marca en el footer */ footer .navbar-brand, #footer .navbar-brand { font-family: 'Fraunces', serif !important; font-size: 1.6rem !important; font-weight: 700 !important; color: #fff !important; } /* ============================================= SEPARADORES ============================================= */ hr { border-color: var(--border) !important; opacity: 1 !important; } /* ============================================= PÁGINA DE PRODUCTO INDIVIDUAL ============================================= */ .o_wsale_product_main_col h1, #product_detail h1 { font-family: 'Fraunces', serif !important; font-size: 2.2rem !important; font-weight: 300 !important; color: var(--ink) !important; margin-bottom: 0.75rem !important; } #product_detail .text-muted, .o_wsale_product_main_col .text-muted { color: var(--ink-soft) !important; font-size: 0.85rem !important; } /* Precio en página de producto */ #product_detail .oe_price, .css_editable_mode_hidden .oe_price, #product_price { font-family: 'Fraunces', serif !important; font-size: 2rem !important; font-weight: 500 !important; color: var(--pink-dk) !important; } /* Miniaturas de imagen del producto */ #o-carousel-product .carousel-indicators, .o_carousel_product_thumbnails button { border-radius: 8px !important; overflow: hidden !important; border: 2px solid transparent !important; transition: border-color 0.2s !important; } .o_carousel_product_thumbnails button.active { border-color: var(--pink) !important; } /* ============================================= CARRITO ============================================= */ .o_cart_summary, #cart_total { background: var(--cream) !important; border-radius: 16px !important; border: 1px solid var(--border) !important; padding: 1.5rem !important; } .o_cart_summary h2, #cart_total h2 { font-size: 1.2rem !important; color: var(--ink) !important; } #cart_total .btn-primary, .o_cart_confirm .btn-primary { width: 100% !important; border-radius: 50px !important; padding: 0.9rem !important; font-size: 0.82rem !important; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 768px) { header#top, nav.navbar { padding: 0 1.25rem !important; } .o_wsale_products_grid_table, #products_grid { grid-template-columns: repeat(2, 1fr) !important; } footer, #footer { padding: 2.5rem 1.5rem 1.5rem !important; } section h2 { font-size: 1.6rem !important; } } @media (max-width: 480px) { .o_wsale_products_grid_table, #products_grid { grid-template-columns: 1fr !important; } header#top { padding: 0 1rem !important; } }