/* =============================================================== TONO ANTRACITA + MODO OSCURO --------------------------------------------------------------- 1. Las franjas de marca (cabecera y pie) dejan el negro puro y pasan a antracita azulado: #1B2129. Vale para los dos modos. 2. El modo oscuro se consigue REDEFINIENDO las variables de superficie y tinta bajo html[data-tema="oscuro"]. El diseño claro ya estaba hecho con variables, así que no hay que reescribir reglas: solo cambiar los valores. DECISIÓN IMPORTANTE: --wk-plancha (el fondo que va DEBAJO de la foto del producto) se queda CLARO también en modo oscuro. Las 9.000 fotos de BGS vienen recortadas sobre blanco y se funden con `mix-blend-mode: multiply`, que sobre fondo oscuro daría negro sobre negro y las haría desaparecer. La foto queda como una lámina clara dentro de una tarjeta oscura, igual que un producto sobre una mesa de luz. =============================================================== */ /* --- 1. Antracita en las dos versiones ------------------------- */ :root { --wk-negro-header: #1B2129; /* cabecera y pie */ --wk-antracita: #1B2129; --wk-antracita-2: #161B22; /* un escalón más oscuro */ } /* La franja del menú se separa de la fila del logo con un escalón, no con un filete: sobre antracita el borde de 1px casi no se ve. */ .wkh__fila2 { background: var(--wk-antracita-2) !important; } /* --- 2. Modo oscuro ------------------------------------------- */ html[data-tema="oscuro"] { /* Superficies. El papel pasa a ser el más oscuro y las tarjetas suben un escalón, para que sigan despegándose del fondo igual que la celda blanca se despegaba del greige. */ --wk-papel: #12161D; --wk-celda: #1B2129; --wk-hundido: #0E1218; --wk-negro: #1B2129; /* --wk-plancha NO se toca a propósito (ver cabecera del archivo). */ /* El realce de interfaz SÍ se invierte: sube un escalón desde la tarjeta (#1B2129), igual que en claro baja un pelo desde la celda blanca. Con --wk-tinta encima da 12,9:1 y con --wk-tinta-3, 5,6:1. */ --wk-realce: #232B35; /* Tintas: se invierte la escala manteniendo los mismos saltos. */ --wk-tinta: #EDEBE6; --wk-tinta-2: #C8C4BD; --wk-tinta-3: #9DA3AB; --wk-tinta-4: #7F858E; /* Filetes: sobre oscuro un filete claro pesa mucho más que uno oscuro sobre claro, así que se quedan cerca del fondo. */ --wk-filete: #2A313B; --wk-campo-borde: #6E747C; /* 3,41:1 sobre la tarjeta · 3,76:1 sobre el papel */ --wk-filete-2: #3A424E; /* EL ROJO NECESITA DOS VALORES EN OSCURO, y no es un capricho: · como TEXTO sobre la tarjeta (#1B2129) hace falta claridad suficiente → mínimo 4,5:1, que exige un rojo claro; · como RELLENO de botón, la letra encima es BLANCA, y contra un rojo claro se queda en 3,3:1. Los dos requisitos se contradicen (uno pide subir la claridad y el otro bajarla), así que un único valor no puede cumplirlos. Se parte en dos: --wk-rojo para texto y filetes, --wk-rojo-fondo para los botones rellenos (ver la regla del final del archivo). */ --wk-rojo: #F5564A; /* texto: 4,8:1 sobre la tarjeta */ --wk-rojo-700: #FF7166; /* texto en :hover */ --wk-rojo-fondo: #C42B22; /* relleno: 5,6:1 con letra blanca */ --wk-rojo-fondo-2: #D8362C; /* relleno en :hover, 4,7:1 */ --wk-ok: #5FB36B; --wk-aviso: #D2A03C; color-scheme: dark; } /* --- 3. Los pocos sitios donde el color va escrito a fuego ----- */ /* El fondo del documento lo pinta Storefront antes de que actúen nuestras variables. */ html[data-tema="oscuro"] body, html[data-tema="oscuro"] body.wk-neu { background-color: var(--wk-papel); } /* Campos de formulario: en claro son blancos con filete; en oscuro tienen que hundirse, no brillar. */ html[data-tema="oscuro"] body.wk-neu input[type="text"], html[data-tema="oscuro"] body.wk-neu input[type="email"], html[data-tema="oscuro"] body.wk-neu input[type="tel"], html[data-tema="oscuro"] body.wk-neu input[type="password"], html[data-tema="oscuro"] body.wk-neu input[type="number"], html[data-tema="oscuro"] body.wk-neu textarea, html[data-tema="oscuro"] body.wk-neu select { background-color: #0E1218; color: var(--wk-tinta); border-color: var(--wk-filete-2); } html[data-tema="oscuro"] body.wk-neu ::placeholder { color: var(--wk-tinta-4); } /* La lámina de la foto se queda clara: se le pone un filete para que no parezca un agujero recortado en la tarjeta. */ html[data-tema="oscuro"] body.wk-neu .wkc-img-wrap, html[data-tema="oscuro"] body.wk-neu .single-product div.product .woocommerce-product-gallery, html[data-tema="oscuro"] .woocommerce ul.products li.product a img, html[data-tema="oscuro"] ul.products li.product img { border: 1px solid var(--wk-filete-2); } /* Storefront pinta de blanco duro varios contenedores por su cuenta. */ html[data-tema="oscuro"] .storefront-sorting, html[data-tema="oscuro"] .woocommerce-tabs .panel, html[data-tema="oscuro"] .woocommerce-message, html[data-tema="oscuro"] .woocommerce-info, html[data-tema="oscuro"] .woocommerce-error, html[data-tema="oscuro"] .wc-block-components-panel, html[data-tema="oscuro"] .wc-block-components-totals-item { background-color: var(--wk-celda); color: var(--wk-tinta-2); } /* --- 3b. Los tres fallos de contraste que salieron al auditar --- */ /* Botones rellenos: llevan letra blanca, así que necesitan el rojo profundo y no el rojo de texto (ver la explicación en las variables). Los botones de la CABECERA no entran aquí: viven sobre antracita en los dos modos y ya usan el rojo de marca a 5,9:1. */ html[data-tema="oscuro"] body.wk-neu .woocommerce ul.products li.product .button, html[data-tema="oscuro"] body.wk-neu.single-product div.product form.cart .button, html[data-tema="oscuro"] body.wk-neu .checkout-button, html[data-tema="oscuro"] body.wk-neu .wk-btn--solido, html[data-tema="oscuro"] body.wk-neu .wk-bloque__texto a.button, html[data-tema="oscuro"] body.wk-neu .wp-block-button__link, html[data-tema="oscuro"] body.wk-neu .woocommerce-Button, html[data-tema="oscuro"] body.wk-neu .woocommerce-button, html[data-tema="oscuro"] body.wk-neu .woocommerce-form-login__submit, html[data-tema="oscuro"] body.wk-neu .woocommerce-form-register__submit, html[data-tema="oscuro"] body.wk-neu .wk-flag--sale { background: var(--wk-rojo-fondo) !important; color: #fff !important; } /* Los precios de las ventas cruzadas salían en #43454B, el gris de fábrica de Storefront: es un literal que no pasa por nuestras variables y sobre el fondo oscuro se queda en 1,89:1. */ html[data-tema="oscuro"] body.wk-neu .woocommerce-Price-amount, html[data-tema="oscuro"] body.wk-neu .woocommerce-Price-currencySymbol { color: var(--wk-tinta) !important; } /* "Jetzt kaufen" salía con el rojo de TEXTO (#F5564A) de relleno y letra blanca encima: 3,33:1 a 14px, por debajo de AA. Es exactamente la trampa que documenta la cabecera de este archivo — de relleno va el rojo oscuro. */ html[data-tema="oscuro"] body.wk-neu .wc-block-components-checkout-place-order-button, html[data-tema="oscuro"] body.wk-neu .wc-block-cart__submit-button { background: var(--wk-rojo-fondo) !important; color: #fff !important; } @media (hover:hover) and (pointer:fine){ html[data-tema="oscuro"] body.wk-neu .wc-block-components-checkout-place-order-button:hover, html[data-tema="oscuro"] body.wk-neu .wc-block-cart__submit-button:hover { background: var(--wk-rojo-fondo-2) !important; } } html[data-tema="oscuro"] body.wk-neu .woocommerce ul.products li.product .button:hover, html[data-tema="oscuro"] body.wk-neu.single-product div.product form.cart .button:hover, html[data-tema="oscuro"] body.wk-neu .checkout-button:hover, html[data-tema="oscuro"] body.wk-neu .wk-btn--solido:hover { background: var(--wk-rojo-fondo-2) !important; color: #fff !important; } html[data-tema="oscuro"] ::selection { background: var(--wk-rojo-fondo); color: #fff; } /* Página actual de la paginación: es una pastilla invertida (fondo tinta, letra blanca). Al invertirse la tinta en oscuro, quedaba blanco sobre casi blanco — 1,19:1, ilegible. La letra pasa a ser el fondo de la página, que es lo que "invertida" significa aquí. */ html[data-tema="oscuro"] body.wk-neu ul.page-numbers li span.current, html[data-tema="oscuro"] body.wk-neu ul.page-numbers li a:hover, html[data-tema="oscuro"] body.wk-neu .woocommerce nav.woocommerce-pagination ul li span.current, html[data-tema="oscuro"] body.wk-neu .woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--wk-papel) !important; } /* El desplegable de categorías es blanco: cuelga de una cabecera oscura y en modo claro enlaza con el papel del contenido. En modo oscuro esa lámina blanca es un fogonazo en mitad de la pantalla, así que baja de tono. Se le da un escalón MÁS CLARO que la cabecera para que se lea como algo que se despliega por encima, no como un agujero. */ html[data-tema="oscuro"] .wkh__panel { background: #232B35; border-top-color: var(--wk-rojo-fondo); box-shadow: 0 18px 40px rgba(0,0,0,.55); } html[data-tema="oscuro"] .wkh__sub { color: var(--wk-tinta-2); border-bottom-color: rgba(255,255,255,.08); } html[data-tema="oscuro"] .wkh__sub-num { color: var(--wk-tinta-3); } /* Ojo: dentro de .site-header la variable --wk-rojo está reasignada al rojo de MARCA (#CC0000), que sobre el panel oscuro se queda en 2,43:1. Aquí hace falta un rojo que no esté sombreado por esa reasignación. */ html[data-tema="oscuro"] .wkh__panel-todo { color: #FF6A5F; } /* 5,1:1 sobre #232B35 */ /* El filete rojo que se rellena bajo cada subcategoría cae en la misma trampa: con el --wk-rojo reasignado de la cabecera (#CC0000) se quedaría en 2,43:1 sobre el panel oscuro y casi no se vería. Mismo rojo que el enlace de arriba. */ html[data-tema="oscuro"] .wkh__sub::after { background: #FF6A5F; } @media (hover: hover) and (pointer: fine) { html[data-tema="oscuro"] .wkh__sub:hover { background: rgba(255,255,255,.07); color: #fff; } } /* La tabla de datos técnicos ("Zusätzliche Informationen") y los avisos los pinta WooCommerce con fondos claros de fábrica (#f8f8f8 alterno, y un azul #3d9cd2 en los avisos). Sobre ellos nuestra tinta clara se quedaba en 1,6:1 — ilegible. Se vacían los fondos y el rayado se rehace con un velo blanco muy tenue, que funciona sea cual sea el tono de debajo. */ html[data-tema="oscuro"] body.wk-neu table.shop_attributes th, html[data-tema="oscuro"] body.wk-neu table.shop_attributes td, html[data-tema="oscuro"] body.wk-neu table.shop_attributes tr, html[data-tema="oscuro"] body.wk-neu .woocommerce-product-attributes-item__label, html[data-tema="oscuro"] body.wk-neu .woocommerce-product-attributes-item__value { background-color: transparent !important; color: var(--wk-tinta-2) !important; } html[data-tema="oscuro"] body.wk-neu table.shop_attributes tr:nth-child(even) th, html[data-tema="oscuro"] body.wk-neu table.shop_attributes tr:nth-child(even) td { background-color: rgba(255,255,255,.035) !important; } html[data-tema="oscuro"] body.wk-neu table.shop_attributes p { color: var(--wk-tinta-2) !important; } /* ── Dos fallos que ya existían en el modo claro, no los trae el oscuro ── Se arreglan para los DOS modos (esta hoja se carga siempre): · el separador de las migas usaba el color de filete y se quedaba en 1,59:1 sobre el papel; · los avisos de WooCommerce vienen con un azul de fábrica (#3d9cd2) que deja el texto en 3,88:1. */ body.wk-neu .wk-miga-sep, body.wk-neu .breadcrumb-separator { color: var(--wk-tinta-3) !important; } /* ═══════════════════════════════════════════════════════════════════════════ LOS AVISOS DE WOOCOMMERCE ("Fehler: …", "Warenkorb aktualisiert", …) Antes solo se les cambiaba el color encima de la caja VERDE que trae Storefront de serie, y por debajo seguían con su relleno raro (`padding: 1em 2em 1em 3.5em`, hueco para un icono que aquí no existe), su `border-left` gris translúcido y sus esquinas redondeadas. Resultado: el texto empezaba cortado por la izquierda —el usuario vio "ehler:" en vez de "Fehler:" el 2026-09-02— y la caja no pegaba con nada. Se rehacen enteros: rectángulo de la casa, filete fino y una banda roja a la izquierda que es la que dice "esto es un aviso". Se reponen TODAS las propiedades que pone el padre, no solo el color, para que no quede ninguna suya suelta. ═══════════════════════════════════════════════════════════════════════════ */ body.wk-neu .woocommerce-noreviews, body.wk-neu .woocommerce-info, body.wk-neu .woocommerce-message, body.wk-neu .woocommerce-error { background-color: var(--wk-celda) !important; color: var(--wk-tinta) !important; border: 1px solid var(--wk-filete) !important; border-left: 3px solid var(--wk-rojo) !important; border-radius: 0 !important; padding: 15px 20px !important; margin: 0 0 24px !important; font-size: 15px; line-height: 1.55; list-style: none !important; } /* El hueco del icono que Storefront reserva a la izquierda: aquí no hay icono. */ body.wk-neu .woocommerce-noreviews::before, body.wk-neu .woocommerce-info::before, body.wk-neu .woocommerce-message::before, body.wk-neu .woocommerce-error::before { display: none !important; } /* El aviso es un