/* ============================================================================ keystore-brand.css · Capa de marca "KeyStore Munro — Cerrajería Integral" Se carga DESPUÉS de main.css y pisa el tema oscuro/magenta de la plantilla. Rebranding 2026: el local se pintó de negro y gris, el sitio acompaña. Negros, grises y tipografía blanca. Los únicos colores que sobreviven son funcionales: rojo = urgencia, verde = WhatsApp. #0D0D0F negro carbón fondo del sitio, header, footer #161618 gris 1 cajas #1C1C1F gris 2 cajas alternas #2A2A2E gris 4 bordes #D8DADF plata acento (reemplaza al viejo cyan) #F2F2F3 blanco texto ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* --- color --- */ --ks-base: #0D0D0F; /* negro carbón: fondo del sitio, header, footer */ --ks-black: #000000; /* barra superior, pie */ --ks-elev: #242427; /* hover / elevación sobre el negro */ --ks-silver: #D8DADF; /* acento claro: links, precios, íconos */ /* Plata de los botones. Va MÁS OSCURA que el texto (#F2F2F3): con un gris tan claro como el acento, sobre negro el botón se lee blanco, no plata. El degradado + el borde son los que dan la lectura metálica. */ --ks-plata: linear-gradient(180deg,#D2D6DC 0%,#A9AEB6 100%); --ks-plata-hi: linear-gradient(180deg,#E2E5EA 0%,#BCC1C9 100%); --ks-plata-borde: #8E939B; --ks-silver-hi: #FFFFFF; /* hover del acento */ --ks-surface-2: #1C1C1F; /* cajas alternas, chips */ /* Azul YPF: color de acción del sitio (botones, bordes, links, ofertas). Aproximación al azul institucional de YPF. Si el cliente pasa el hex exacto de su manual de marca, se cambia SOLO acá. */ --ks-ypf: #003DA5; --ks-ypf-hi: #1257C9; /* hover: más brillante, para que se despegue del negro */ /* Rojo: reservado EXCLUSIVAMENTE para urgencias. Si se usa para otra cosa deja de leerse como urgencia. */ --ks-urgent: #E11D2A; --ks-whatsapp: #25D366; /* CTA de consulta */ --ks-whatsapp-dk: #1EA952; --ks-ink: #F2F2F3; /* texto principal */ --ks-ink-soft: #B5B5BC; /* texto secundario */ --ks-line: #2A2A2E; /* bordes */ --ks-surface: #161618; /* fondo de cajas */ /* compat: nombres que quedaron en overrides viejos del header. OJO: acá había un segundo --ks-silver que pisaba al de arriba (el CSS toma la última definición) y dejaba el acento gris apagado. Renombrado. */ --ks-grey: #8E8E96; --ks-grey-light: #1C1C1F; --ks-steel: #8E8E96; /* --- tipografía --- */ /* Lobster Two 700 italic es el match libre más cercano al lettering del logo (brush script pesado e inclinado). Solo para acentos: el logotipo real siempre va como imagen. */ --ks-font-script: 'Lobster Two', 'Brush Script MT', cursive; /* Poppins reproduce el sans geométrico ancho de "MUNRO". Titulares. */ --ks-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Inter para lectura larga: fichas técnicas, descripciones, tablas. */ --ks-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* --------------------------------------------------------------------------- 1b. VARIABLES HEREDADAS DE LA PLANTILLA main.css define su propia paleta (la del template ShopSale: magenta de acento, fondo blanco, texto casi negro). Como este archivo se carga DESPUÉS, alcanza con redefinir esas variables acá para dar vuelta el sitio entero de una vez. No alcanza con pintar nuestros componentes: `--default-color` sola se usa en 353 reglas de main.css y `--surface-color` en 111. Si no se invierten, las páginas que usan la estructura del template (about, contacto, page-title) quedan con fondo blanco y texto blanco encima: ilegibles. --------------------------------------------------------------------------- */ :root { --background-color: #0D0D0F; /* era #ffffff */ --surface-color: #161618; /* era #ffffff — cajas, icon boxes */ --default-color: #F2F2F3; /* era #212529 — el grueso del texto */ --heading-color: #F2F2F3; /* era #3e0925 (ciruela) */ --contrast-color: #FFFFFF; --accent-color: var(--ks-ypf); /* links y breadcrumbs: azul, no rojo */ --nav-color: #F2F2F3; --nav-hover-color: #D8DADF; --nav-dropdown-hover-color: #D8DADF; --nav-mobile-background-color: #0D0D0F; --nav-dropdown-background-color:#161618; } /* Presets de color del template. `.light-background` es el que pinta la banda clara del encabezado de página (el del breadcrumb) y las cajas de contacto. */ .light-background { --background-color: #161618; --surface-color: #1C1C1F; --default-color: #F2F2F3; --heading-color: #F2F2F3; } .dark-background { --background-color: #0D0D0F; --surface-color: #161618; --default-color: #F2F2F3; --heading-color: #F2F2F3; --accent-color: var(--ks-ypf); --contrast-color: #FFFFFF; } /* --------------------------------------------------------------------------- 2. TIPOGRAFÍA --------------------------------------------------------------------------- */ body { background: var(--ks-base); color: var(--ks-ink); font-family: var(--ks-font-body); } h1, h2, h3, h4, h5, h6, .section-title h1, .section-title h2, .section-title h3 { font-family: var(--ks-font-display); font-weight: 700; letter-spacing: -0.01em; /* OJO: no usar --ks-base acá. Ese token es el color de marca, que hoy es negro: los títulos quedarían negro sobre negro. Va el color de texto. */ color: var(--ks-ink); } /* Eyebrow / kicker: el tracking ancho de "M U N R O" */ .ks-kicker { font-family: var(--ks-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-silver); } /* Acento manuscrito, para el claim "Cerrajería Integral" */ .ks-script { font-family: var(--ks-font-script); font-style: italic; font-weight: 700; letter-spacing: .01em; } .section-title p { color: var(--ks-ink-soft); } /* --------------------------------------------------------------------------- 3. NEUTRALIZAR EL TEMA OSCURO DE LA PLANTILLA La plantilla pinta el fondo de dos formas (background directo + ::before con degradé animado). Hay que anular las dos. --------------------------------------------------------------------------- */ .index-page section, .search-results-page section { background: transparent !important; } .index-page section::before, .cart-page .main::before, .search-results-page section::before { background: none !important; animation: none !important; display: none !important; } .search-results-page { background: var(--ks-base) !important; } .search-results-page h1 { color: var(--ks-ink) !important; } .search-results-page .results-count h2 { color: var(--ks-ink) !important; } .search-results-page .results-count p { color: var(--ks-ink-soft) !important; } .search-results-page .results-count .results-number, .search-results-page .results-count .search-term { color: var(--ks-silver) !important; } /* --------------------------------------------------------------------------- 4. BOTONES Y ACENTOS --------------------------------------------------------------------------- */ /* Sobre negro un botón negro no existe: el primario va en plata con texto oscuro, que es el mayor contraste sin agregar un color nuevo. */ .btn-primary, .btn-hero-primary { background: var(--ks-plata) !important; border-color: var(--ks-plata-borde) !important; color: var(--ks-base) !important; font-family: var(--ks-font-display); font-weight: 600; } .btn-primary:hover, .btn-hero-primary:hover { background: var(--ks-plata-hi) !important; border-color: var(--ks-plata-borde) !important; color: var(--ks-base) !important; } .btn-outline-primary { color: var(--ks-ink) !important; border-color: var(--ks-line) !important; font-weight: 600; } .btn-outline-primary:hover { background: var(--ks-elev) !important; color: var(--ks-ink) !important; border-color: var(--ks-silver) !important; } .text-primary { color: var(--ks-silver) !important; } /* CTA de consulta por WhatsApp — reemplaza "agregar al carrito" en catálogo */ .btn-ks-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--ks-whatsapp); border: 1px solid var(--ks-whatsapp); color: #fff !important; font-family: var(--ks-font-display); font-weight: 600; font-size: .93rem; line-height: 1.2; padding: .62rem 1.05rem; border-radius: 8px; text-decoration: none; transition: background .18s ease, transform .18s ease; } .btn-ks-whatsapp:hover { background: var(--ks-whatsapp-dk); border-color: var(--ks-whatsapp-dk); color: #fff !important; transform: translateY(-1px); } .btn-ks-whatsapp i { font-size: 1.1em; } /* Botón de urgencias 24hs */ .btn-ks-urgent { display: inline-flex; align-items: center; gap: .5rem; background: var(--ks-urgent); color: #fff !important; font-family: var(--ks-font-display); font-weight: 700; border-radius: 8px; padding: .6rem 1.1rem; text-decoration: none; } .btn-ks-urgent:hover { background: #b8151f; color: #fff !important; } /* --------------------------------------------------------------------------- 5. TARJETAS DE PRODUCTO Imagen cuadrada + contain: una llave o una cerradura tiene que verse entera, no recortada en 2:3 como la ropa de la plantilla original. --------------------------------------------------------------------------- */ .index-page .best-sellers .product-card { background:#161618 !important; border: 1px solid var(--ks-line); border-radius: 12px; overflow: hidden; height: 100%; } .index-page .best-sellers .product-card:hover { box-shadow: 0 14px 30px rgba(0,0,0, .12); transform: translateY(-3px); } .index-page .best-sellers .product-image { padding-top: 0 !important; aspect-ratio: 1 / 1; background: var(--ks-surface) !important; position: relative; overflow: hidden; } .index-page .best-sellers .product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; padding: 16px; box-sizing: border-box; transition: none !important; } /* Sin swap en hover: hay una sola foto por producto */ .index-page .best-sellers .product-card:hover .main-image { transform: none !important; opacity: 1 !important; } .index-page .best-sellers .product-details { padding: 12px 14px 16px; } .index-page .best-sellers .product-category { color: var(--ks-ink-soft) !important; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; font-weight: 600; } .index-page .best-sellers .product-title a { color: var(--ks-ink) !important; font-family: var(--ks-font-display); font-weight: 600; } .index-page .best-sellers .product-title a:hover { color: var(--ks-silver) !important; } .index-page .best-sellers .product-price, .index-page .best-sellers .product-price .fw-bold { color: var(--ks-ink) !important; font-family: var(--ks-font-display); font-weight: 700; } .index-page .best-sellers .product-rating i { color: #F5A623; } .index-page .best-sellers .prod-consultar { color: var(--ks-ink-soft); font-size: 14px; font-weight: 600; } .product-price .fw-bold { color: var(--ks-ink); } .product-badge.new { background: var(--ks-silver); } .product-badge.sale { background: var(--ks-ypf); } .discount-badge, .product-details .product-info-wrapper .product-price-container .discount-badge { background-color: var(--ks-ypf) !important; } /* Chips de compatibilidad (marca de auto, transponder) en la ficha */ .ks-chip { display: inline-block; background: var(--ks-surface-2); color: var(--ks-ink); border: 1px solid #2A2A2E; border-radius: 999px; padding: .22rem .7rem; font-size: .8rem; font-weight: 600; margin: 0 .3rem .3rem 0; } /* --------------------------------------------------------------------------- 6. SECCIONES DEL HOME --------------------------------------------------------------------------- */ .index-page .hp-category.section { padding: 26px 0 42px !important; } .index-page .hp-category .section-title { padding: 0 0 26px !important; } .index-page .hp-category .section-title h2, .index-page .hp-category .section-title h2 a { color: var(--ks-ink) !important; opacity: 1 !important; font-family: var(--ks-font-display); font-weight: 700; font-size: 30px; } .index-page .hp-category .section-title h2 a:hover { color: var(--ks-silver) !important; } .index-page .hp-category .section-title p { color: var(--ks-ink-soft) !important; opacity: 1 !important; font-size: 15px; } /* --------------------------------------------------------------------------- 7. FOOTER --------------------------------------------------------------------------- */ #footer.footer { background: var(--ks-base) !important; border-top: 4px solid var(--ks-silver); color: #B5B5BC; } #footer .footer-widget h4, #footer .footer-widget h5 { color: #fff; font-family: var(--ks-font-display); font-weight: 600; } #footer a, #footer .footer-links a { color: #B5B5BC; text-decoration: none; } #footer a:hover, #footer .footer-links a:hover { color: var(--ks-silver); } #footer .social-icons a { color: #fff; } #footer .social-icons a:hover { color: var(--ks-silver); } #footer .footer-bottom, #footer .copyright { border-top: 1px solid rgba(255,255,255,.12); color: #8E8E96; } #footer .footer img { height: 64px; } /* --------------------------------------------------------------------------- 8. HEADER — buscador y layout --------------------------------------------------------------------------- */ html, body { margin: 0 !important; padding: 0 !important; } #header { margin-top: 0 !important; } #header .top-bar { margin-top: 0 !important; } #header .search-form .input-group { background:#161618 !important; border-radius: 8px; overflow: hidden; } #header .search-form .form-control, #header .search-form .input-group .form-control { color: var(--ks-ink) !important; background:#161618 !important; } #header .search-form .form-control::placeholder, #header .search-form .input-group .form-control::placeholder { color: #8E8E96 !important; } /* mata el wash magenta de la plantilla sobre el botón de búsqueda */ #header .search-form .input-group .search-btn::before { display: none !important; } @media (min-width: 992px) { #header .search-form .input-group .search-btn:hover { background: var(--ks-silver) !important; border-color: var(--ks-silver) !important; } #header .search-form .input-group .search-btn i, #header .search-form .input-group .search-btn:hover i { color: var(--ks-base) !important; } #header .search-form .input-group .search-btn:hover i { color: #fff !important; } } /* Mobile: la barra del menú queda vacía (el menú vive en el hamburguesa), así que no debe dejar una franja blanca entre el header y el hero. */ @media (max-width: 1199px) { #header .header-nav { padding: 0 !important; border-top: 0 !important; box-shadow: none !important; } } .index-page main.main { margin-top: 0 !important; } .index-page .ks-hero { margin-top: 0 !important; } /* --------------------------------------------------------------------------- 9. FICHA DE PRODUCTO — galería en mobile --------------------------------------------------------------------------- */ @media (max-width: 767px) { .product-details .product-gallery .thumbnails-vertical { width: 100%; margin-top: 12px; } .product-details .product-gallery .thumbnails-vertical .thumbnails-container { gap: 8px; justify-content: flex-start; } .product-details .product-gallery .thumbnails-vertical .thumbnail-item { flex: 0 0 62px; width: 62px; } .product-details .product-gallery .main-image-wrapper { width: 100%; } } /* --------------------------------------------------------------------------- 10. AJUSTES DEL TEMA OSCURO --------------------------------------------------------------------------- */ /* Cajas de ícono de la página de contacto. El template las pinta con el color de acento de fondo: al pasar el acento a rojo quedaban seis cuadrados rojos gritando, y uno de ellos adentro del botón verde de WhatsApp. Van en gris con el ícono en plata; el rojo se reserva para urgencias. */ .contact-2 .info-item i, .contact .info-item i { background: var(--ks-surface-2) !important; color: var(--ks-silver) !important; border: 1px solid var(--ks-line); } /* El botón de WhatsApp trae su propio ícono: ahí no va la caja. */ .contact-2 .info-item .btn-ks-whatsapp i, .contact-2 .info-item .btn-ks-urgent i { background: transparent !important; border: 0 !important; color: #fff !important; width: auto; height: auto; margin-right: 0; font-size: 1.05em; } /* Bandas de encabezado de página (breadcrumb) */ .page-title { background: var(--ks-surface) !important; border-bottom: 1px solid var(--ks-line); } .page-title h1 { color: var(--ks-ink) !important; } .page-title .breadcrumbs .current { color: var(--ks-ink-soft) !important; } /* Inputs y selects sobre fondo oscuro */ .form-control, .form-select, textarea.form-control { background: var(--ks-surface-2); border-color: var(--ks-line); color: var(--ks-ink); } .form-control:focus, .form-select:focus { background: var(--ks-surface-2); border-color: var(--ks-silver); color: var(--ks-ink); box-shadow: 0 0 0 .2rem rgba(216,218,223,.15); } .form-control::placeholder { color: var(--ks-grey); } /* Tablas del template */ .table { color: var(--ks-ink); border-color: var(--ks-line); } .table > :not(caption) > * > * { background-color: transparent; color: var(--ks-ink); } /* Bootstrap pinta .text-muted con un gris pensado para fondo blanco: sobre el negro del sitio queda casi invisible ("2 productos", "Ordenar:", "Filtrar"). */ .text-muted { color: var(--ks-ink-soft) !important; } .form-select, .form-select option { background-color: var(--ks-surface-2); color: var(--ks-ink); } .form-check-input { background-color: var(--ks-surface-2); border-color: var(--ks-line); } .form-check-input:checked { background-color: var(--ks-ypf); border-color: var(--ks-ypf); } /* Ficha de producto. El template calcula la bajada con color-mix(--default-color, transparent 20%): sobre blanco daba un gris suave, sobre negro deja el texto lavado. Se fija a un gris solido. */ .product-details .product-info-wrapper .product-short-description p, .product-details-page .product-short-description p { color: var(--ks-ink-soft) !important; } .product-details-page .product-description, .product-details-page .product-description p, .product-details-page .product-description li { color: var(--ks-ink-soft); } .product-details-page .option-title, .product-details-page .product-meta { color: var(--ks-ink); } /* --- Ficha de producto: acciones y datos del negocio --- */ .ks-ficha-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; } /* Carrito en la ficha: cantidad + agregar, al lado de Consultar por WhatsApp. */ .ks-ficha-carrito{ display:flex; gap:10px; flex:1 1 100%; } .ks-ficha-add{ flex:1 1 auto; font-size:1rem; padding:.8rem 1.2rem; } .ks-qty{ display:inline-flex; align-items:stretch; border:1.5px solid rgba(242,242,243,.35); border-radius:8px; overflow:hidden; flex:0 0 auto; } .ks-qty-btn{ width:40px; background:transparent; border:0; color:#F2F2F3; font-size:20px; line-height:1; cursor:pointer; } .ks-qty-btn:hover{ background:rgba(255,255,255,.08); } .ks-qty-input{ width:48px; background:transparent; border:0; color:#F2F2F3; text-align:center; font:600 16px 'Poppins',sans-serif; -moz-appearance:textfield; } .ks-qty-input::-webkit-outer-spin-button, .ks-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Botones de tarjeta (ks_card_ctas): Consultar arriba, Agregar al carrito abajo. */ .ks-card-cta{ display:flex; flex-direction:column; gap:7px; margin-top:12px; } .ks-card-wsp, .ks-card-add{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; font:600 13.5px 'Poppins',sans-serif; padding:9px 10px; border-radius:8px; text-decoration:none; cursor:pointer; transition:background .18s, border-color .18s, color .18s; white-space:nowrap; } .ks-card-wsp{ background:#1EA952; color:#fff !important; border:1.5px solid #1EA952; } .ks-card-wsp:hover{ background:#17853F; border-color:#17853F; } .ks-card-add{ background:transparent; color:#F2F2F3; border:1.5px solid rgba(242,242,243,.45); } .ks-card-add:hover{ background:#F2F2F3; border-color:#F2F2F3; color:#0D0D0F; } .ks-card-add.is-added{ background:#1EA952; border-color:#1EA952; color:#fff; } .ks-card-wsp i, .ks-card-add i{ font-size:15px; } @media (max-width:400px){ .ks-card-wsp, .ks-card-add{ font-size:12.5px; padding:8px 6px; } } /* (viejo) Botones de tarjeta (home): Consultar + carrito. */ .ks-home-cta{ display:flex; gap:8px; margin-top:10px; } .ks-home-cta .prod-wsp{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:#1EA952; color:#fff !important; font:600 13.5px 'Poppins',sans-serif; padding:9px 12px; border-radius:8px; text-decoration:none; } .ks-home-cta .prod-wsp:hover{ background:#17853F; } .ks-home-cta .prod-add{ flex:0 0 44px; padding:0; } .ks-home-cta .prod-add i{ font-size:18px; } .ks-ficha-wsp{ flex:1 1 240px; font-size:1rem; padding:.85rem 1.2rem; } .ks-ficha-tel{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ks-surface-2); border:1px solid var(--ks-line); color:var(--ks-ink) !important; font-family:var(--ks-font-display); font-weight:600; padding:.85rem 1.2rem; border-radius:8px; text-decoration:none; transition:background .18s ease, border-color .18s ease; } .ks-ficha-tel:hover{ background:var(--ks-elev); border-color:var(--ks-silver); color:var(--ks-ink) !important; } .ks-ficha-datos{ display:grid; gap:14px; border-top:1px solid var(--ks-line); padding-top:20px; } .ks-ficha-dato{ display:flex; gap:12px; align-items:flex-start; } .ks-ficha-dato i{ color:var(--ks-ypf); font-size:19px; margin-top:2px; flex:0 0 auto; } .ks-ficha-dato h6{ font-family:var(--ks-font-display); font-weight:600; color:var(--ks-ink); font-size:14.5px; margin:0 0 2px; } .ks-ficha-dato p{ color:var(--ks-ink-soft); font-size:13.5px; margin:0; line-height:1.5; }