/* Theme Name: Setcom Electro Theme URI: https://setcom.com.ec Description: Tema de Setcom basado en Divi con el diseño "Electro" (estilo tienda de electrónica, inspirado en ElectroDeals). Child theme de Divi: conserva todo el contenido, las páginas, la cabecera/pie (Divi Theme Builder) y los 200 productos WooCommerce, incorporando el diseño e-commerce de acento rojo. Reversible. Author: Setcom Template: Divi Version: 1.0.0 Requires at least: 5.8 Tested up to: 6.7 License: GNU General Public License v2 or later Text Domain: setcom-electro */ /* ====== Diseño Electro (incorporado en el tema) ====== */ /* ===================================================================== SETCOM TOOLKIT — Skins de diseño Se aplican sobre Divi vía la clase del : .scom-skin-a → Claro Azul (corporativo suave, vigente) .scom-skin-min → Minimalista (limpio, monocromo, mucho aire) .scom-skin-corp → Corporativo (azul/navy, sólido, profesional) Reglas comunes con selector [class*="scom-skin-"] → escalan a nuevos skins. No se tocan layouts ni imágenes: solo color, tipografía, botones y tarjetas. ===================================================================== */ /* ---------- Variables por skin ---------- */ .scom-skin-a { --scom-accent: #1e7fd6; --scom-accent-2: #2ea3f2; --scom-accent-grad: linear-gradient(135deg, #2ea3f2 0%, #1565c0 100%); --scom-heading: #0b2f55; --scom-text: #33475b; --scom-page-bg: #f3f7fc; --scom-card-bg: #ffffff; --scom-card-shadow: 0 10px 30px rgba(20, 70, 130, .10); --scom-card-radius: 14px; --scom-btn-radius: 10px; --scom-link: #1e7fd6; } .scom-skin-min { --scom-accent: #111827; --scom-accent-2: #2563eb; --scom-accent-grad: none; --scom-heading: #111827; --scom-text: #4b5563; --scom-page-bg: #ffffff; --scom-card-bg: #ffffff; --scom-card-shadow: none; --scom-card-radius: 6px; --scom-btn-radius: 4px; --scom-link: #111827; } .scom-skin-corp { --scom-accent: #1565c0; --scom-accent-2: #2ea3f2; --scom-accent-grad: linear-gradient(135deg, #2ea3f2 0%, #0d47a1 100%); --scom-heading: #0a2540; --scom-text: #36506b; --scom-page-bg: #eef3f8; --scom-card-bg: #ffffff; --scom-card-shadow: 0 8px 26px rgba(10, 37, 64, .12); --scom-card-radius: 10px; --scom-btn-radius: 6px; --scom-link: #1565c0; } .scom-skin-electro { --scom-accent: #e62e2d; --scom-accent-2: #ffb400; --scom-accent-grad: none; --scom-heading: #1c1c1c; --scom-text: #5b5b5b; --scom-page-bg: #f4f4f4; --scom-card-bg: #ffffff; --scom-card-shadow: 0 4px 16px rgba(0, 0, 0, .06); --scom-card-radius: 6px; --scom-btn-radius: 3px; --scom-link: #e62e2d; } /* ===================================================================== REGLAS COMUNES (cualquier skin) — usan las variables ===================================================================== */ [class*="scom-skin-"] #page-container { background-color: var(--scom-page-bg); } [class*="scom-skin-"] h1, [class*="scom-skin-"] h2, [class*="scom-skin-"] h3, [class*="scom-skin-"] h4 { color: var(--scom-heading); letter-spacing: -.01em; } [class*="scom-skin-"] a:not(.et_pb_button):not(.wp-block-button__link):not(.scom-sw-btn):not(.scom-sw-save):not(.scom-sw-close) { color: var(--scom-link); } /* ---------- Botones Divi + WooCommerce ---------- */ [class*="scom-skin-"] .et_pb_button, [class*="scom-skin-"] .woocommerce a.button, [class*="scom-skin-"] .woocommerce button.button, [class*="scom-skin-"] .woocommerce .button { background-image: var(--scom-accent-grad) !important; background-color: var(--scom-accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--scom-btn-radius) !important; padding: .62em 1.6em !important; font-weight: 600 !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease !important; } [class*="scom-skin-"] .et_pb_button:hover, [class*="scom-skin-"] .woocommerce .button:hover { transform: translateY(-2px); filter: brightness(1.06); padding: .62em 1.6em !important; } [class*="scom-skin-"] .et_pb_button:after { color: #fff !important; } /* ---------- Tarjetas / blurbs ---------- */ [class*="scom-skin-"] .et_pb_blurb { background: var(--scom-card-bg); border-radius: var(--scom-card-radius); box-shadow: var(--scom-card-shadow); padding: 26px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } [class*="scom-skin-"] .et_pb_blurb:hover { transform: translateY(-4px); } /* ---------- Productos WooCommerce ---------- */ [class*="scom-skin-"] .woocommerce ul.products li.product .price, [class*="scom-skin-"] .price .amount { color: var(--scom-accent) !important; font-weight: 700; } [class*="scom-skin-"] .woocommerce ul.products li.product { border-radius: var(--scom-card-radius); background: var(--scom-card-bg); box-shadow: var(--scom-card-shadow); padding: 14px; transition: transform .2s ease; } [class*="scom-skin-"] .woocommerce ul.products li.product:hover { transform: translateY(-5px); } /* Títulos de producto en tono de encabezado (no el azul Divi) */ [class*="scom-skin-"] .woocommerce ul.products li.product h2, [class*="scom-skin-"] .woocommerce ul.products li.product h3, [class*="scom-skin-"] .woocommerce ul.products li.product .woocommerce-loop-product__title, [class*="scom-skin-"] li.product a.woocommerce-LoopProduct-link, [class*="scom-skin-"] li.product h2 a, [class*="scom-skin-"] li.product h3 a { color: var(--scom-heading) !important; } [class*="scom-skin-"] #top-menu li a:hover, [class*="scom-skin-"] .et-menu li a:hover { color: var(--scom-accent) !important; } /* ===================================================================== SKIN A — Claro Azul: realce de header ===================================================================== */ .scom-skin-a #main-header, .scom-skin-a .et-l--header { box-shadow: 0 2px 14px rgba(20,70,130,.08); } /* ===================================================================== SKIN MINIMALISTA — botones "ghost", tarjetas planas con borde fino ===================================================================== */ .scom-skin-min .et_pb_button, .scom-skin-min .woocommerce .button { background: transparent !important; background-image: none !important; color: var(--scom-accent) !important; border: 1px solid var(--scom-accent) !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: .04em; font-size: .85em !important; } .scom-skin-min .et_pb_button:hover, .scom-skin-min .woocommerce .button:hover { background: var(--scom-accent) !important; color: #fff !important; transform: none; } .scom-skin-min .et_pb_button:after { color: inherit !important; } .scom-skin-min .et_pb_blurb, .scom-skin-min .woocommerce ul.products li.product { border: 1px solid #ececec; box-shadow: none; } .scom-skin-min .et_pb_blurb:hover, .scom-skin-min .woocommerce ul.products li.product:hover { border-color: #d6d6d6; transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .scom-skin-min h1, .scom-skin-min h2, .scom-skin-min h3 { font-weight: 600; } .scom-skin-min #main-header, .scom-skin-min .et-l--header { box-shadow: 0 1px 0 #ececec; } /* ===================================================================== SKIN CORPORATIVO — barra de acento superior en tarjetas, títulos firmes ===================================================================== */ .scom-skin-corp .et_pb_blurb { border-top: 3px solid var(--scom-accent); } .scom-skin-corp h1, .scom-skin-corp h2 { font-weight: 700; } .scom-skin-corp #main-header, .scom-skin-corp .et-l--header { box-shadow: 0 3px 16px rgba(10,37,64,.10); } .scom-skin-corp .woocommerce ul.products li.product { border-top: 3px solid var(--scom-accent); } /* ===================================================================== SKIN ELECTRO — inspirado en ElectroDeals (e-commerce, rojo + amarillo) ===================================================================== */ .scom-skin-electro .et_pb_button, .scom-skin-electro .woocommerce a.button, .scom-skin-electro .woocommerce button.button, .scom-skin-electro .woocommerce .button, .scom-skin-electro .woocommerce ul.products li.product .button { background: var(--scom-accent) !important; background-image: none !important; color: #fff !important; border: 0 !important; text-transform: uppercase; letter-spacing: .03em; font-weight: 700 !important; border-radius: var(--scom-btn-radius) !important; } .scom-skin-electro .et_pb_button:hover, .scom-skin-electro .woocommerce .button:hover { background: #c41f1e !important; filter: none; transform: translateY(-1px); } .scom-skin-electro .et_pb_button:after { color: #fff !important; } /* Tarjetas de producto estilo Electro */ .scom-skin-electro .woocommerce ul.products li.product { border: 1px solid #ececec; box-shadow: none; border-radius: 6px; padding: 16px; } .scom-skin-electro .woocommerce ul.products li.product:hover { border-color: #e2e2e2; box-shadow: 0 10px 26px rgba(0, 0, 0, .10); transform: translateY(-4px); } .scom-skin-electro .woocommerce ul.products li.product .price, .scom-skin-electro .price .amount { color: var(--scom-accent) !important; font-weight: 700; } /* Badge "¡Oferta!" amarillo circular (estilo Electro) */ .scom-skin-electro .woocommerce span.onsale { background: var(--scom-accent-2) !important; color: #1c1c1c !important; border-radius: 50% !important; min-height: 44px; min-width: 44px; line-height: 44px; padding: 0; font-weight: 700; box-shadow: none; border: 0; } /* Cabecera: acento rojo */ .scom-skin-electro #main-header, .scom-skin-electro .et-l--header { border-bottom: 3px solid var(--scom-accent); } .scom-skin-electro #top-menu li a:hover, .scom-skin-electro .et-menu li a:hover { color: var(--scom-accent) !important; } /* Tarjetas/blurbs e iconos en rojo */ .scom-skin-electro .et_pb_blurb { border: 1px solid #ececec; box-shadow: var(--scom-card-shadow); } .scom-skin-electro .et_pb_blurb h4 { color: var(--scom-heading); } /* Portadas de catálogo con borde rojo sutil al pasar */ .scom-skin-electro .scom-cat-cover:hover img { box-shadow: 0 14px 32px rgba(230, 46, 45, .22); } /* ===================================================================== PORTADAS DE CATÁLOGOS (home) — válido en cualquier diseño ===================================================================== */ .scom-cat-cover img { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .scom-cat-cover:hover img { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, .16); } .scom-catalogos-home h4 { margin-top: 12px; font-weight: 600; }