/* ========================================================================================= * BLOG — FICHERO DE TOKENS COMPARTIDO [2026-07-29] * * Único sitio donde viven color, tipografía, espaciado y radios del blog. Lo consumen * public/css/blog-listing.css (listado + categorías) y public/css/blog-post.css (post): * ninguno de los dos vuelve a escribir un hex ni una familia tipográfica a mano. * * Los nombres de token son LOS DE LAS MAQUETAS (blog_redesign.html / blog_post_redesign.html) * — --ink, --panel, --line, --paper, --dim, --faint, --lime… — para que las reglas de la * maqueta se porten una a una sin traducir nada. Las dos maquetas traían el mismo bloque * :root duplicado; aquí está una sola vez. * * ⚠️ POR QUÉ UN FICHERO NUEVO Y NO EL SCSS: el pipeline de assets recompila JS pero NO CSS * (≈294 reglas de deriva entre el SCSS fuente y el app.css servido), así que tocar el SCSS * o los .css compilados (blog.css, app.css) se pierde o rompe a la primera recompilación. * Ver reference_asset_build_pipeline. * * * ══ 1. LA MAQUETA ERA OSCURA; ESTO ES SU INVERSIÓN A CLARO ══════════════════════════════ * * Por orden de Luis: «adáptalo a claro manteniendo el verde lima, ya cambiaremos los * colores si hace falta». Misma estructura de tokens y misma jerarquía visual, valores * invertidos. * * ⚠️ MEDIDO EN EL NAVEGADOR, NO SUPUESTO: el sitio NO va sobre blanco. En dev, * getComputedStyle(document.body).backgroundColor = rgb(30,30,30) = #1e1e1e, el pie es * #2d2d2d y #e4e4e4 es el color de TEXTO (429 usos en app.css), no de fondo. Con el blog * en claro, la cabecera y el pie del sitio siguen siendo oscuros y el blog queda como una * isla clara entre los dos. Se deja implementado como se pidió y con el interruptor de * abajo para volver a oscuro en un solo cambio. * * ══ 2. VOLVER A OSCURO = CAMBIAR UNA LÍNEA ══════════════════════════════════════════════ * * Los dos temas están escritos abajo. El activo es el que se copia en :root. Para pasar a * oscuro basta con cambiar el bloque `:root` por el contenido de `.gc-theme-dark` (o añadir * la clase gc-theme-dark al , que ya funciona tal cual). * * ══ 3. CONTRASTE DEL LIMA SOBRE CLARO — COMPROBADO, NO A OJO ════════════════════════════ * * El lima de marca (#a4e830) sobre blanco da 1.48:1. Es INUSABLE como color de texto * (WCAG AA pide 4.5:1). Por eso hay dos tokens distintos y no uno: * * --lime #a4e830 SOLO como FONDO, con --on-lime encima .... 12.22:1 ✔ AAA * --lime-ink #46700d el mismo verde oscurecido, para TEXTO * sobre --ink (#ffffff) ................. 5.86:1 ✔ AA * sobre --panel (#f7f9f2) ................. 5.52:1 ✔ AA * sobre --panel-2 (#eef2e6) ............... 5.16:1 ✔ AA * * Donde la maqueta usaba var(--lime) como color de texto (kicker, precio, .fresh, enlace * activo del índice, .k de relacionados, .offers-all) va --lime-ink. Donde lo usaba como * fondo con texto oscuro encima (chip activo del carril, .tape, .off, .cta, página actual * del paginador, barra de progreso) sigue siendo --lime tal cual. * * Mismo problema con el ámbar del cupón: #ffc032 sobre blanco = 1.64:1. --amber-ink * (#8a5a00) da 5.93:1 sobre blanco y 5.58:1 sobre --panel. * * Resto de la paleta clara, medido igual: * --paper #14170f sobre --ink .... 18.12:1 --dim #59634c sobre --ink .... 6.34:1 * --prose #3d3f38 sobre --ink .... 10.68:1 --faint #6b7560 sobre --ink .... 4.84:1 * --faint sobre --panel .. 4.56:1 * --faint es el más justo y es el que pinta los metadatos a 11px: por eso NO se usó * #78826a (4.04:1, suspende AA) que era el equivalente literal del --faint de la maqueta. * ========================================================================================= */ :root { /* ── SUPERFICIES (TEMA OSCURO ACTIVO — el de las maquetas) ─────────────────────────── * [2026-07-29] Se pasó primero a claro por un diagnóstico MÍO equivocado: dije que el * sitio iba sobre blanco. Es falso — el fondo real del sitio es #1e1e1e (208 usos en el * CSS compilado) y el pie #2d2d2d; el #e4e4e4 que vi es el color del TEXTO. Con el blog * en claro, la isla era el blog: cabecera y pie oscuros con el contenido blanco en medio. * Luis confirmó volver a oscuro. * Beneficio colateral: los cuerpos de los 200 posts llevan colores escritos a mano en * `style=""` elegidos para fondo oscuro (105 usos de #e4e4e4, que sobre blanco daban * 1.27:1 — invisibles). Sobre oscuro vuelven a leerse solos, incluidos los 40 con * `!important` que no había forma de arreglar desde CSS. * Para volver a claro: cambiar este bloque por el contenido de .gc-theme-light. */ /* [2026-07-29] Alineado con el fondo REAL del sitio, no con el de la maqueta. * La maqueta traía #0d0f0c (casi negro, con tinte verde) pero Gocdkeys usa #1e1e1e en * todas las páginas (208 usos en el CSS compilado), con #232323 en superficies y * #2d2d2d en el pie. Se adoptan esos tres para que el blog no cante contra el resto. */ --ink: #1e1e1e; /* fondo de página — el general del sitio */ --panel: #232323; /* tarjetas, cajas, filas de oferta */ --panel-2: #2d2d2d; /* hover y pies de bloque (color del pie) */ --line: #343434; /* borde sutil */ --line-2: #454545; /* borde marcado / hover */ /* ── TEXTO ───────────────────────────────────────────────────────────────────────── */ --paper: #eef2e6; /* texto principal y titulares */ --prose: #d8ded0; /* cuerpo del artículo */ --dim: #8d9880; /* texto secundario */ --faint: #7c876e; /* metadatos mono a 11px */ /* ── ACENTO DE MARCA ─────────────────────────────────────────────────────────────── */ /* Sobre fondo oscuro el lima SÍ vale como texto: #a4e830 sobre #0d0f0c = 12.99:1, así que --lime-ink vuelve a ser el lima puro y no hace falta la variante oscurecida. */ --lime: #a4e830; /* fondo Y texto */ --lime-hover: #b6f24d; /* hover del CTA sobre fondo lima */ --lime-ink: #a4e830; /* el lima como TEXTO sobre oscuro 12.99:1 */ --on-lime: #0d0f0c; /* texto encima de --lime */ --amber: #ffc032; /* borde/fondo del cupón */ --amber-ink: #ffc032; /* el ámbar como TEXTO sobre oscuro */ /* Fondos translúcidos: el carril pegajoso y la barra de compra van sobre el fondo de página, así que se derivan de --ink y no de un hex suelto. */ --veil: rgba(30, 30, 30, .93); --veil-2: rgba(35, 35, 35, .97); /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────────────── */ /* Roboto es la tipografía de marca y ES LA QUE YA SIRVE EL SITIO (única font-family real de app.css / app-game.css / app-coverage.css). Las maquetas pedían Bricolage Grotesque + Inter + JetBrains Mono desde fonts.googleapis.com: son 3 peticiones externas en cada página del blog y se han eliminado. Display y cuerpo comparten familia; lo que distingue al titular es el PESO y el TRACKING, no la familia. */ --disp: Roboto, sans-serif; --body: Roboto, sans-serif; /* Monoespaciada DEL SISTEMA (nada de JetBrains Mono por red). El sitio ya usa `monospace` a pelo para los códigos de cupón; aquí se le da una pila explícita para que no caiga en la Courier del sistema. */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Titulares grandes: peso alto + tracking negativo (el de las maquetas). */ --tracking-display: -.03em; --weight-display: 800; --weight-strong: 700; --weight-medium: 600; --weight-body: 400; /* ── ESPACIADO Y RADIOS ──────────────────────────────────────────────────────────── */ --shell-max: 1240px; /* ancho del listado (maqueta) */ --shell-max-post: 1180px; /* ancho del post (maqueta) */ --shell-pad: 24px; --shell-pad-sm: 18px; --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-md: 12px; --r-lg: 14px; --r-pill: 999px; } /* ── TEMA CLARO (alternativa, NO activa) ────────────────────────────────────────────── * Se deja escrito y con los contrastes ya calculados por si algún día se quiere el blog * en claro: basta con o con mover estos valores a :root. * Sobre fondo claro el lima NO vale como texto (#a4e830 sobre blanco = 1.48:1), por eso * aquí --lime queda solo para fondos y --lime-ink es la variante oscurecida (5.86:1). * ⚠️ Si se reactiva, vuelven los 40 textos de los posts con `color:...!important` en línea * que no se pueden corregir desde CSS (2.12:1 y 3.68:1): habría que editar esos posts. */ .gc-theme-light { --ink: #ffffff; --panel: #f7f9f2; --panel-2: #eef2e6; --line: #e2e8d6; --line-2: #ccd7b8; --paper: #14170f; /* 18.12:1 */ --prose: #3d3f38; /* 10.68:1 */ --dim: #59634c; /* 6.34:1 */ --faint: #6b7560; /* 4.84:1 */ --lime: #a4e830; /* SOLO fondo */ --lime-hover: #93d726; --lime-ink: #46700d; /* el lima como TEXTO sobre claro */ --on-lime: #14170f; /* 12.22:1 */ --amber: #ffc032; --amber-ink: #8a5a00; /* 5.93:1 */ --veil: rgba(255, 255, 255, .93); --veil-2: rgba(247, 249, 242, .97); }