/* ========================================================================= Propeka - shared design tokens ========================================================================= Loaded before both interface stylesheets so discovery views, Houzez templates, Elementor pages, the footer, and wp-login.php share one source of truth. ========================================================================= */ :root { --pk-primario: #ed0028; --pk-primario-osc: #c50021; --pk-primario-suave: #fff1f3; --pk-business: #3f99e7; --pk-land: #8cc83c; /* * `--pk-enlace` es el índigo del manual de 2015, `#5366C9`, con 42 usos * allí. Se incorpora como el color de ENLACE que a la paleta le faltaba: * hasta ahora no había ninguno, y por eso cada título de tarjeta se pintaba * en tinta y no se distinguía del texto que lleva debajo. * * No es `--pk-navy`. Ese (`#004274`) es el marino de Houzez y B-36 lo * retiró justamente por no estar en el manual; resucitarlo habría sido * deshacer esa decisión. Éste sí está, y es el único azul del manual. * * Tampoco es `--pk-business` (`#3F99E7`): `palette.md` lo marca «sólo * relleno grande» con 2,9:1, y `CLAUDE.md` le da además una regla semántica * propia —local comercial y oficinas—, así que no puede ser un enlace. * * Contraste sobre blanco: 5,10:1, apto AA para texto normal. El hover NO * cambia: sigue en `--pk-primario-osc` con subrayado, que es lo que * `palette.md` define como «rojo como texto, estado activo, hover». */ --pk-enlace: #5366c9; --pk-tinta: #0d2338; /* * `--pk-navy` es `#004274`, el azul marino de Houzez, y NO está en * `palette.md`: nunca fue un color de Propeka, sólo un color del proveedor * al que se le puso nombre de token, que es lo que le dio apariencia de * decisión. * * Se intentó retirarlo de golpe apuntándolo a `--pk-tinta` —un cambio, 35 * usos—. La puerta de congelación lo paró: F-03 usa este token en los * títulos de sus filas, así que el atajo RECOLOREABA una superficie * congelada, y `frozen.md` dice que eso se para y se informa, no se aplica. * * Así que el token se queda como está y la retirada se hace en las reglas * que renderizan en las rutas públicas de navegación. Ver B-39 para el * resto: las tres hojas suman 35 usos y el panel necesita su propia pasada * con la puerta delante. */ --pk-navy: #004274; --pk-exito: #1d8a43; --pk-exito-suave: #eaf7ef; --pk-aviso: #9a6700; --pk-aviso-suave: #fff8e6; --pk-error: #b3261e; --pk-error-suave: #fdecea; --pk-vendida: #4d5c6b; --pk-vendida-suave: #eef1f4; --pk-alto-ctl: 44px; --pk-alto-ctl-sm: 36px; --pk-alto-ctl-lg: 52px; /* Tipografía de marca. `CLAUDE.md` sec. 6 fija Open Sans, pero staging renderizaba TODO el sitio en «Plus Jakarta Sans» (medido: body y h1 computaban esa familia, y Open Sans ni siquiera se cargaba). La familia se fija aquí, en el tema hijo, y no en los ajustes de Houzez: esos viven en la base de datos y no viajarían en el backport. Ver DECISIONS D-03. */ --pk-fuente: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* ======================================================================= Escala tipográfica — SEIS pasos, cada uno con papel e interlínea propios. ======================================================================= Antes: 8 pasos declarados, 13 tamaños distintos realmente renderizados y 22 combinaciones tamaño/interlínea/peso en /propiedades/. La referencia usa 5 combinaciones y concentra el 87 % de su texto en un solo paso. Cada paso lleva su interlínea ABSOLUTA emparejada, en múltiplos de 4. Los ratios sueltos producían 14/18, 14/20, 14/21, 14/22, 14/25 y hasta 14/70 sobre el mismo tamaño. Ver DECISIONS D-04 y D-05. ======================================================================= */ --pk-fs-xs: .75rem; /* 12px */ --pk-lh-xs: 1rem; /* 16px — distintivos, etiquetas */ --pk-fs-sm: .875rem; /* 14px */ --pk-lh-sm: 1.25rem; /* 20px — metadatos, texto de apoyo */ --pk-fs-base: 1rem; /* 16px */ --pk-lh-base: 1.5rem; /* 24px — CUERPO, título y precio de tarjeta */ --pk-fs-lg: 1.25rem; /* 20px */ --pk-lh-lg: 1.75rem; /* 28px — recuento de resultados, subtítulos */ --pk-fs-xl: 1.75rem; /* 28px */ --pk-lh-xl: 2.25rem; /* 36px — encabezados de sección */ --pk-fs-hero: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); --pk-lh-hero: 1.15; /* único paso con ratio: escala con el viewport */ --pk-fw-normal: 400; --pk-fw-semi: 600; --pk-fw-fuerte: 700; /* Ratios: solo para prosa larga, donde la interlínea absoluta estorba. */ --pk-lh-ajustado: 1.2; --pk-lh-normal: 1.45; --pk-lh-amplio: 1.6; --pk-n0: #ffffff; --pk-n25: #fbfcfd; --pk-n50: #f4f6f8; --pk-n100: #e9edf1; --pk-n200: #dbe1e8; --pk-n300: #c2ccd6; --pk-n400: #94a3b1; --pk-n500: #6b7b8c; --pk-n600: #4d5c6b; --pk-n700: #33414f; --pk-txt: #14212e; --pk-txt-sec: #566573; /* Texto terciario: #7d8a97 daba 3.53:1 sobre blanco, por debajo del 4.5:1 que exige WCAG AA para texto normal. No era un caso aislado: es el color de las lineas de contexto de las tarjetas, de «mensuales», de las etiquetas de caracteristicas de la ficha y de los titulos de grupo, asi que fallaba en casi todas las rutas a la vez. #67717d mide 4.96:1 sobre blanco conservando la jerarquia visual de texto secundario. */ --pk-txt-ter: #67717d; --pk-e1: 4px; --pk-e2: 8px; --pk-e3: 12px; --pk-e4: 16px; --pk-e5: 20px; --pk-e6: 24px; --pk-e8: 32px; --pk-e10: 40px; --pk-e12: 48px; --pk-e16: 64px; --pk-r-sm: 6px; --pk-r: 10px; --pk-r-lg: 14px; --pk-r-xl: 20px; --pk-r-pill: 999px; --pk-s1: 0 1px 2px rgba(13,35,56,.06), 0 1px 3px rgba(13,35,56,.05); --pk-s2: 0 2px 4px rgba(13,35,56,.06), 0 4px 12px rgba(13,35,56,.07); --pk-s3: 0 8px 24px rgba(13,35,56,.10), 0 2px 6px rgba(13,35,56,.06); --pk-s4: 0 -4px 24px rgba(13,35,56,.12); --pk-foco: 0 0 0 3px rgba(0,66,116,.28); /* Ancho canónico de contenido. Medido en la línea base: la portada servía CUATRO anchos distintos a la vez —.container 1164, .elementor-container 1180 y 1140, sección interna 1120— con bordes izquierdos en 171, 178, 190 y 200 px. Las secciones entraban y salían visiblemente al desplazarse. Referencia medida en funda.nl a 1536 px de viewport: marco de contenido de 1020 px y columna de resultados de 728 px, con márgenes exteriores amplios. Propeka adopta 1200 px: un solo número, más contenido que Funda porque la retícula de tarjetas lo necesita, y mucho más contenido que los 1360 px anteriores, que dispersaban la lectura. */ --pk-ancho: 1200px; /* Contenido util del marco de resultados. Medido EN VIVO sobre la referencia con el mismo navegador y la misma ventana: la fila de refinamientos ocupa de x=250,4 a x=1270,4 — 1020 px exactos, que es tambien lo que suman sus siete controles con separacion de 8 px (100+100+155·4 = 820, +152 del acceso a todos los filtros, +6 separaciones). */ --pk-results-shell: 1020px; /* UN SOLO MARCO. Antes la columna de resultados medía 728 px dentro de un marco de 1020, y la cabecera se servía sobre un tercero. Medido a 1536 de viewport, el borde izquierdo de la página saltaba 250 → 0 → 250 → 396 al bajar, y había TRES bordes derechos distintos compitiendo: 1226 (cabecera), 1270 (filtros) y 1124 (contenido). El ojo sigue los bordes verticales, y con tres en pugna la página se lee rota por mucho que cada pieza esté bien resuelta. Los 728 de la referencia funcionan para direcciones neerlandesas de tres palabras. Los títulos de Propeka son descriptivos y en castellano —ya necesitaban dos líneas a 728—, y cada tarjeta muestra más datos: m², dormitorios, baños y anunciante. La columna adopta el ancho del marco. Ver DECISIONS D-12. */ --pk-results-column: var(--pk-results-shell); --pk-t: 140ms cubic-bezier(.2,.7,.4,1); --pk-pad: var(--pk-e6); } @media (max-width: 1024px) { :root { --pk-pad: var(--pk-e5); } } @media (max-width: 640px) { :root { --pk-pad: var(--pk-e4); } } @media (max-width: 380px) { :root { --pk-pad: var(--pk-e3); } }