/* ============================================================ SKIN "PIKIPADEL / HI-TECH" — para hctheme Estetica deportiva hi-tech: azul electrico + superficies azul muy claro + tipografia Outfit(titulos)/Inter(texto) + pastillas + sombras SUAVES (nada de bordes/sombras duras) + tarjetas con elevacion al hover. El skin trae su PROPIA paleta y fuentes. Carga DESPUES de custom.css + hc-dynamic.css, asi que su :root gana: seleccionar el skin da el look completo de un clic (sin tocar el panel). ============================================================ */ /* Las fuentes (Inter + Outfit) se cargan sin bloquear el render vía skin.json ("fonts") → en el . NO usar @import aquí (encadena skin.css → css2 → woff2). */ :root{ /* --- Paleta oficial del DESIGN SYSTEM PikiPadel --- */ --hc-primary: #0158bf; /* Primary — botones, links, precios, acentos */ --hc-primary-dark: #0030A4; /* Secondary — hover del primario / azul profundo */ --hc-accent: #0030A4; /* Secondary — badge "Oferta" */ --hc-tertiary: #93C5FD; /* Tertiary — azul claro (tints, detalles) */ /* Badge "NOVEDAD" (feature de motor): por defecto es verde; lo alineamos al azul primary */ --hc-new-bg: #0158bf; --hc-new-text: #ffffff; --hc-dark: #0B132B; /* Neutral — secciones oscuras (hero/footer) */ --hc-bg: #faf8ff; /* fondo general azul-blanco */ --hc-surface: #ffffff; /* tarjetas / paneles / cabecera */ --hc-surface-2: #f3f3ff; /* cajas suaves (inputs, fondos) azul muy claro */ --hc-text: #0B132B; /* Neutral — texto principal */ --hc-text-soft: #424754; /* texto secundario */ --hc-text-faint: #727785; /* texto tenue / metadatos */ --hc-border: #d9def2; /* bordes suaves azulados */ --hc-muted: #eaf2ff; /* caja de imagen de producto (azul claro, tertiary-ish) */ --hc-price: #0B132B; /* precio en neutral, bold (limpio) */ --hc-buy-bg: #0158bf; /* CTA Comprar = Primary */ --hc-buy-text: #ffffff; --hc-btn-primary-text: #ffffff; /* Boton "light" de banners/hero oscuro: blanco con texto azul. OJO: el theme usa --hc-btn-light-COLOR y --hc-btn-light-TEXT. */ --hc-btn-light-color: #ffffff; --hc-btn-light-text: #0158bf; --hc-footer-bg: #0B132B; /* footer neutral */ /* Marquee (barra de aviso): Secondary con texto claro */ --hc-mq-bg: #0030A4; --hc-mq-color: #ffffff; /* --- Formas: redondeado generoso + pastillas --- */ --hc-radius: 24px; --hc-radius-card: 20px; --hc-radius-img: 16px; --hc-radius-btn: 999px; /* pastilla total */ --hc-mega-radius: 20px; --hc-popup-radius: 24px; /* --- Fuentes --- */ --hc-font: 'Inter', system-ui, -apple-system, sans-serif; --hc-font-head: 'Outfit', 'Inter', sans-serif; /* --- Sombras suaves (propias del skin) --- */ --pk-sh-sm: 0 1px 3px rgba(11,19,43,.06), 0 1px 2px rgba(11,19,43,.04); --pk-sh: 0 6px 18px rgba(11,19,43,.08); --pk-sh-lg: 0 16px 40px rgba(11,19,43,.16); --pk-sh-primary: 0 8px 22px rgba(1,88,191,.30); --pk-ring: 0 0 0 1px rgba(1,88,191,.12); /* Gradiente navy con glow azul (para fondos oscuros: hero y footer) */ --pk-navy-grad: radial-gradient(75% 120% at 12% 6%, rgba(1,88,191,.18), rgba(1,88,191,0) 46%), radial-gradient(120% 135% at 82% 40%, #1c2c5a 0%, #0f1a3b 45%, #0B132B 100%); /* Gradiente de marca para fondos de fila (botón "Grad" en Filas) = el navy del skin */ --hc-grad: var(--pk-navy-grad); } /* ---------- Tipografia ---------- */ body{ font-family:var(--hc-font); color:var(--hc-text); } h1,h2,h3,h4, .hc-hero-title,.hc-mb-head h2,.hc-prow-head h2,.hc-mb-title,.hc-cat-title, .hc-promo2-title,.hc-pp-title,.hc-cb-title,.hc-faq-title,.hc-logo-text{ font-family:var(--hc-font-head)!important; letter-spacing:-.01em; font-weight:800; } /* Titulares de seccion en MAYUSCULAS (look deportivo) */ .hc-prow-head h2,.hc-mb-head h2,.hc-cat-title,.hc-cb-title,.hc-promo2-title{ text-transform:uppercase; letter-spacing:.005em; } /* Titulo de cada BLOQUE grande (estilo deportivo del mockup) */ .hc-prow-head h2,.hc-mb-head h2{ font-size:clamp(30px,4.2vw,44px); line-height:1.06; } .hc-cat-title{ font-size:34px; } .hc-cb-title,.hc-promo2-title{ font-size:26px; } .hc-hero-title{ text-transform:uppercase; letter-spacing:-.015em; } /* 2ª palabra del título del hero con degradado azul->blanco */ .hc-hero-title .hc-hero-accent{ background:linear-gradient(120deg,#8ea9ff 0%,#c9d6ff 42%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ---------- Botones = pastillas con sombra suave ---------- */ .hc-btn,.hc-btn-primary,.hc-buy,.hc-btn-cart,.hc-cart-pay,.hc-cart-view, .hc-more-btn,.hc-filter-fab,.hc-filter-clear,.hc-btn-light,.hc-toast-view,.hc-toast-pay, .btn-primary,.btn-inverse{ border-radius:var(--hc-radius-btn)!important; font-family:var(--hc-font)!important; font-weight:600; letter-spacing:.01em; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; } .hc-btn-primary,.hc-buy,.hc-btn-cart,.hc-more-btn,.hc-cart-pay,.btn-primary{ box-shadow:var(--pk-sh-primary); } .hc-btn-primary:hover,.hc-buy:hover,.hc-btn-cart:hover,.hc-more-btn:hover,.hc-cart-pay:hover,.btn-primary:hover{ background:var(--hc-primary-dark)!important; transform:translateY(-2px); box-shadow:0 12px 28px rgba(1,88,191,.34); filter:none; } /* Boton "light"/outline sobre fondo oscuro (hero/banner): pastilla translucida RELLENA (como "Descubrir Sensores" del mockup), no un simple borde fino. */ .hc-btn-outline{ border:1px solid rgba(255,255,255,.22)!important; color:#fff!important; background:rgba(255,255,255,.16)!important; border-radius:var(--hc-radius-btn)!important; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .hc-btn-outline:hover{ background:rgba(255,255,255,.26)!important; border-color:rgba(255,255,255,.35)!important; transform:translateY(-2px); } /* ---------- Tarjetas de producto = elevacion suave ---------- */ .hc-pcard{ background:var(--hc-surface); border:1px solid var(--hc-border)!important; border-radius:var(--hc-radius-card); box-shadow:var(--pk-sh-sm); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hc-pcard:hover{ transform:translateY(-4px); /* 2 capas (igual nº que --pk-sh-sm en reposo) → la transición de box-shadow interpola suave, sin el "salto"/retardo que aparece al pasar de 2 capas a 1 */ box-shadow:0 10px 26px rgba(11,19,43,.12), 0 3px 8px rgba(11,19,43,.06); border-color:rgba(1,88,191,.18)!important; } /* Caja de imagen: fondo azul claro, imagen contenida */ .hc-pcard-img{ background:var(--hc-muted); border-radius:var(--hc-radius-img); margin:10px 10px 0!important; padding:8px; overflow:hidden; } .hc-pcard-img img{ object-fit:contain!important; transition:transform .5s ease; } .hc-pcard:hover .hc-pcard-img img{ transform:scale(1.05); } /* Móvil: SIN marco (sin caja ni relleno) + foto más grande → la imagen del producto ocupa todo */ @media(max-width:768px){ .hc-pcard-img{ margin:0!important; padding:0; background:transparent; border-radius:0; height:190px!important; } } .hc-pcard-name{ font-family:var(--hc-font-head)!important; font-weight:700; color:var(--hc-text); } .hc-pcard-brand{ color:var(--hc-primary); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:11px; } .hc-pcard-price{ font-family:var(--hc-font-head)!important; color:var(--hc-price); display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; } /* Precio rebajado: el precio anterior (tachado) ENCIMA del precio final y más pequeño */ .hc-pcard-old{ display:block; order:-1; margin:0 0 2px; font-size:13px; font-weight:600; } /* Badge = pastilla acento */ .hc-pcard-badge{ background:var(--hc-accent); color:#fff; font-weight:700; letter-spacing:.03em; border-radius:999px; box-shadow:var(--pk-sh-sm); } /* ---------- Cabeceras de fila (modulos) ---------- */ .hc-prow-head h2,.hc-mb-head h2{ font-family:var(--hc-font-head)!important; } .hc-prow-head a{ color:var(--hc-primary); font-weight:600; } /* ---------- Hero ---------- */ /* Eyebrow como pastilla (badge de lanzamiento) */ .hc-hero-eyebrow{ border:0!important; background:rgba(1,88,191,.12); color:var(--hc-primary)!important; padding:7px 16px!important; border-radius:999px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; } /* En hero de imagen a pantalla completa (overlay), la eyebrow va sobre oscuro */ .hc-hero-slide .hc-hero-eyebrow{ background:rgba(255,255,255,.14); color:#fff!important; backdrop-filter:blur(6px); } .hc-hero-slide--split .hc-hero-eyebrow{ background:var(--hc-primary); color:#fff!important; } .hc-hero-sub{ color:var(--hc-text-soft); } .hc-hero-slide .hc-hero-sub{ color:rgba(255,255,255,.85); } /* Fondo del hero en GRADIENTE navy (en vez de azul plano). Las slides CON imagen la mantienen: su background-image inline gana a este background-image del CSS. */ .hc-hero-slider{ background:var(--pk-navy-grad); } .hc-hero-slide{ background-color:#0B132B; background-image:var(--pk-navy-grad); } /* ---------- Mini-banners / colecciones ---------- */ .hc-mb-card,.hc-collection-banner{ border-radius:var(--hc-radius); box-shadow:var(--pk-sh-sm); } .hc-cb-title{ text-transform:uppercase; } /* ---------- Inputs / buscador ---------- */ input,select,textarea,.hc-search input,.hc-newsletter input{ border-radius:var(--hc-radius-btn); border:1px solid var(--hc-border); background:var(--hc-surface-2); font-family:var(--hc-font); } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--hc-primary); box-shadow:var(--pk-ring); background:#fff; } /* ---------- HEADER 3 (dos filas) — buscador pill + nav pastillas + iconos ---------- OJO: el buscador de OpenCart en Header 3 (.hc-h3-search #search) NO lo estila el theme base (solo el de Header 1), asi que el skin DEBE darle forma aqui. */ .hc-header{ background:var(--hc-surface); } .hc-header3{ box-shadow:var(--pk-sh-sm); } /* Fila superior grisacea a lo ancho: el theme ya la envuelve en .hc-h3-topwrap (full-width) con .hc-h3-top centrado dentro. Solo pintamos el color del wrap. */ .hc-header3 .hc-h3-topwrap{ background:#faf8ff; } /* top (surface del branding) */ .hc-header3 .hc-h3-top{ gap:24px; } /* Buscador = pastilla azul claro con boton circular */ .hc-h3-search #search{ display:flex; align-items:center; background:#fff; border:1px solid var(--hc-border); border-radius:999px; padding:4px 5px 4px 0; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .hc-h3-search #search:focus-within{ border-color:var(--hc-primary); background:#fff; box-shadow:var(--pk-ring); } .hc-h3-search #search input.form-control{ flex:1 1 auto; width:auto; border:0; background:transparent; box-shadow:none; height:46px; padding:0 22px; font-family:var(--hc-font); font-size:15px; color:var(--hc-text); } .hc-h3-search #search input.form-control::placeholder{ color:var(--hc-text-faint); } .hc-h3-search #search .input-group-btn{ flex:0 0 auto; display:flex; width:auto; } .hc-h3-search #search .btn{ background:var(--hc-primary); color:#fff; border:0; margin:0; padding:0; height:42px; width:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; box-shadow:var(--pk-sh-primary); } .hc-h3-search #search .btn:hover{ background:var(--hc-primary-dark); } /* Barra de categorias: pastillas limpias (Title Case, no mayusculas) */ .hc-header3 .hc-h3-nav{ background:#fff; } /* menu blanco puro */ .hc-h3-nav{ max-width:none; margin:0; padding:8px 20px 10px; gap:4px; border-top:0; /* sin linea divisoria */ overflow:visible; /* NO recortar: deja salir los desplegables (sub/mega) */ } /* El contenido del menu, centrado al ancho maximo aunque el fondo sea full-width */ .hc-header3 .hc-h3-nav{ padding-left:max(20px, calc((100% - var(--hc-maxw))/2)); padding-right:max(20px, calc((100% - var(--hc-maxw))/2)); } .hc-h3-nav .hc-h2-cat{ font-family:var(--hc-font)!important; text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:600; color:var(--hc-text-soft); padding:9px 16px; border-radius:999px; transition:background .15s ease, color .15s ease; } /* Pastilla MARCADA (hover / abierta / categoria activa) = azul solido, texto blanco */ .hc-h3-nav .hc-h2-item:hover > .hc-h2-cat, .hc-h3-nav .hc-h2-item.hc-open > .hc-h2-cat, .hc-h3-nav .hc-h2-item.active > .hc-h2-cat, .hc-h3-nav .hc-h2-cat.active{ background:var(--hc-primary)!important; color:#fff!important; } .hc-h3-nav .hc-h2-item:hover > .hc-h2-cat .hc-h2-caret, .hc-h3-nav .hc-h2-item.hc-open > .hc-h2-cat .hc-h2-caret{ color:#fff; } /* Iconos de accion: usuario como circulo azul (como el mockup); resto en outline */ .hc-h3-actions{ gap:16px; } .hc-h3-actions .hc-user-trigger{ width:40px; height:40px; border-radius:999px; background:var(--hc-primary); color:#fff; align-items:center; justify-content:center; } .hc-h3-actions .hc-user-trigger:hover{ background:var(--hc-primary-dark); color:#fff; } .hc-h3-actions .hc-user-trigger .hc-ico{ width:20px; height:20px; } .hc-h3-actions > .hc-action{ color:var(--hc-text-soft); } .hc-h3-actions > .hc-action:hover{ color:var(--hc-primary); } /* Carrito: solo icono (sin la etiqueta "Cesta") */ .hc-h3-actions .hc-cart-label{ display:none!important; } /* ---------- Footer navy ---------- */ .hc-footer{ background:var(--hc-footer-bg); background:var(--pk-navy-grad); } /* ---------- Marquee ---------- */ /* .hc-marquee redefine --hc-mq-color en el propio elemento (pisa el :root), asi que el texto blanco hay que forzarlo aqui. */ .hc-marquee{ --hc-mq-color:#ffffff; } /* ---------- Detalles ---------- */ .hc-stars{ color:#f5a524; } a{ transition:color .15s ease; }