/* ═══════════════════════════════════════════════════════════════════════ IDENTIDAD RIVAXIS · un solo lenguaje, cuatro divisiones ═══════════════════════════════════════════════════════════════════════ Cuatro sitios que se ven de la misma casa sin verse iguales. Lo que NO cambia entre divisiones: la tipografía, el ritmo del espacio, la forma de los botones y las tarjetas, las sombras y el movimiento. Lo ÚNICO que cambia es el color. Esa es la regla completa. Si algo más empieza a cambiar entre divisiones, dejaron de ser una casa. ── CÓMO SE USA ────────────────────────────────────────────────────── En el o el se pone la clase de la división: Con eso, `--marca` y su rampa quedan puestas y todo lo demás las hereda. Las divisiones son: rx-dev · rx-maker · rx-real · rx-mkt ── LA RAMPA DE CADA COLOR ─────────────────────────────────────────── Cuatro pasos, y cada uno tiene UN trabajo. Usar el equivocado es cómo se acaba con texto que no se lee: --marca rellenos: botones, la línea de arriba, los puntos --marca-honda TEXTO sobre fondo claro (el puro no alcanza 4.5:1) --marca-nube fondos tenues: chips, cuadros de icono --marca-viva sobre fondo OSCURO, donde el puro se apaga Los contrastes están medidos, no estimados: `node pruebas/identidad.mjs` comprueba las 16 combinaciones contra 4.5:1. Cambiar un color sin correr eso es cómo se publica un rótulo que nadie puede leer. ── EL SELLO DE LA CASA ────────────────────────────────────────────── Los CUATRO PUNTOS (.rx-puntos) van en la barra de las cuatro páginas, en el mismo orden siempre. El de la división en la que estás va encendido y más grande; los otros tres, apagados. Dice "una casa, cuatro divisiones" y en qué parte estás, en veinte píxeles y sin una palabra. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────── LO QUE NO CAMBIA ─────────────────────── */ .rx { /* Tinta y papel. Salen del sitio de Dev, que es el que lleva más tiempo vivo: la identidad se saca de lo que ya existe, no se inventa encima. */ --tinta: #101828; --tinta-suave: #51606f; --tinta-tenue: #8a97a8; --papel: #fafbfd; --papel-hondo: #f2f5fa; --tarjeta: #ffffff; --linea: #e6eaf2; --linea-fuerte: #d3dae7; /* Para las páginas oscuras (la puerta) */ --noche: #0a0f14; --noche-2: #141c24; --fuente-t: 'Space Grotesk', system-ui, -apple-system, sans-serif; --fuente-c: 'Inter', system-ui, -apple-system, sans-serif; /* ESCALA TIPOGRÁFICA. Los clamp evitan una media query por tamaño y, sobre todo, evitan el salto feo justo en el punto de corte. */ --t-gigante: clamp(34px, 5.4vw, 60px); --t-titulo: clamp(27px, 3.6vw, 40px); --t-sub: clamp(19px, 2.1vw, 24px); --t-guia: clamp(16px, 1.5vw, 18.5px); --t-cuerpo: 15.5px; --t-chico: 13.5px; --t-menudo: 12px; /* RITMO DEL ESPACIO. Todo sale de estos seis; media que no esté aquí es media inventada, y así es como dos secciones acaban con 34 y 36 px. */ --e1: 6px; --e2: 12px; --e3: 20px; --e4: 32px; --e5: 52px; --e6: 84px; /* RADIOS, en jerarquía. El de adentro SIEMPRE menor que el de afuera: un botón de pastilla dentro de una tarjeta de 18px se ve de otro sistema. */ --r-caja: 18px; /* tarjetas, paneles, cuadros grandes */ --r-control: 12px; /* botones, campos, cosas que se tocan */ --r-pastilla: 999px; /* chips y etiquetas, y NADA más */ --sombra: 0 8px 30px rgba(16, 24, 40, .06); --sombra-alta: 0 24px 60px rgba(16, 24, 40, .12); /* MOVIMIENTO. Una sola curva y dos duraciones en todo el sistema. */ --brinco: cubic-bezier(.22, .7, .3, 1); --rapido: .18s; --calmo: .3s; --ancho: 1160px; } /* ───────────────────── LO ÚNICO QUE CAMBIA: EL COLOR ──────────────── */ .rx-dev { --marca: #2f5bff; --marca-honda: #1b3bc4; --marca-nube: #eaefff; --marca-viva: #6f93ff; } .rx-maker { --marca: #e8622c; --marca-honda: #a63f16; --marca-nube: #fdeee6; --marca-viva: #ff8c55; } .rx-real { --marca: #12a08c; --marca-honda: #08695c; --marca-nube: #e4f7f3; --marca-viva: #2fd7bc; } .rx-mkt { --marca: #a534e0; --marca-honda: #7a1aa8; --marca-nube: #f6ecfd; --marca-viva: #cb79f0; } /* Un cuadro puede llevar el color de OTRA división —la barra de la puerta, una tarjeta que enlaza a otra parte— sin cambiarle el color a la página. */ .rx .en-dev { --marca: #2f5bff; --marca-honda: #1b3bc4; --marca-nube: #eaefff; --marca-viva: #6f93ff; } .rx .en-maker { --marca: #e8622c; --marca-honda: #a63f16; --marca-nube: #fdeee6; --marca-viva: #ff8c55; } .rx .en-real { --marca: #12a08c; --marca-honda: #08695c; --marca-nube: #e4f7f3; --marca-viva: #2fd7bc; } .rx .en-mkt { --marca: #a534e0; --marca-honda: #7a1aa8; --marca-nube: #f6ecfd; --marca-viva: #cb79f0; } /* ──────────────────────────── LA BASE ─────────────────────────────── */ .rx *, .rx *::before, .rx *::after { box-sizing: border-box; } .rx { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente-c); font-size: var(--t-cuerpo); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .rx img, .rx svg { max-width: 100%; display: block; } /* El foco del teclado, UNA vez y para todo. Cada componente que se inventa el suyo es un componente donde se olvidó. */ .rx :focus-visible { outline: 2.5px solid var(--marca); outline-offset: 2px; border-radius: 4px; } .rx-envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; } .rx-seccion { padding: var(--e6) 0; } .rx h1, .rx h2, .rx h3, .rx h4 { font-family: var(--fuente-t); letter-spacing: -.025em; line-height: 1.1; margin: 0; } .rx h1 { font-size: var(--t-gigante); max-width: 17ch; } .rx h2 { font-size: var(--t-titulo); } .rx h3 { font-size: var(--t-sub); letter-spacing: -.015em; } .rx h4 { font-size: 17px; letter-spacing: -.01em; } /* La bajada de una sección. 62ch no es capricho: pasado eso el ojo pierde el renglón al volver a la izquierda. */ .rx-guia { font-size: var(--t-guia); color: var(--tinta-suave); max-width: 62ch; margin: var(--e2) 0 0; } /* ─────────────────── EL SELLO: LOS CUATRO PUNTOS ──────────────────── */ .rx-puntos { display: inline-flex; gap: 4px; align-items: center; } .rx-puntos i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; transition: transform var(--rapido) var(--brinco), opacity var(--rapido); } .rx-puntos i:nth-child(1) { background: #2f5bff; } .rx-puntos i:nth-child(2) { background: #e8622c; } .rx-puntos i:nth-child(3) { background: #12a08c; } .rx-puntos i:nth-child(4) { background: #a534e0; } /* El punto de la división en la que estás: encendido y más grande. Los otros no se esconden —siguen diciendo que la casa tiene cuatro— pero se apagan lo suficiente para que no compitan. */ .rx-puntos i:not(.aqui) { opacity: .3; } .rx-puntos i.aqui { transform: scale(1.42); } /* ─────────────────────────── LA BARRA ─────────────────────────────── */ .rx-barra { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--papel) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--linea); } .rx-barra-interior { max-width: var(--ancho); margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 18px; } .rx-marca { font-family: var(--fuente-t); font-weight: 700; font-size: 18px; color: var(--tinta); text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .rx-marca-div { color: var(--marca-honda); } .rx-volver { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); text-decoration: none; white-space: nowrap; } .rx-volver:hover { color: var(--tinta); } .rx-menu { display: flex; gap: 22px; align-items: center; margin-left: auto; } /* El `:not(.rx-btn)` NO es adorno. `.rx-menu a` tiene más especificidad (0,1,1) que `.rx-btn` (0,1,0), así que sin esto le gana el color y un botón dentro del menú sale con texto gris sobre su propio relleno — ilegible, y sin que falle nada. Pasó en la primera pasada de Urban Vision. Se excluye en vez de subirle la especificidad al botón: pelear especificidad con especificidad es cómo se acaba con !important. */ .rx-menu a:not(.rx-btn) { font-size: 14px; font-weight: 600; color: var(--tinta-suave); text-decoration: none; white-space: nowrap; } .rx-menu a:not(.rx-btn):hover { color: var(--tinta); } /* ────────────────────────── LOS BOTONES ───────────────────────────── */ /* UNA sola forma en las cuatro divisiones: 12px. Nada de pastillas — una pastilla dentro de una tarjeta de 18px rompe la jerarquía de radios y se lee como si viniera de otro sistema. Las pastillas son de los chips. */ .rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--fuente-c); font-size: 15px; font-weight: 600; padding: 13px 26px; border-radius: var(--r-control); border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; /* Se rellena desde `honda`, NO desde `marca`. El naranja y el verde azulado puros son tonos claros: el blanco encima daba 3.3:1 y hace falta 4.5:1. Con `honda` el peor caso es 6.28:1, y sigue siendo inconfundiblemente el color de la división. Lo mide `node pruebas/identidad.mjs`; no es una preferencia. */ background: linear-gradient(135deg, var(--marca-honda), color-mix(in srgb, var(--marca-honda) 78%, #000)); color: #fff; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--marca) 55%, transparent); transition: transform var(--rapido) var(--brinco), box-shadow var(--rapido), filter var(--rapido); } .rx-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--marca) 60%, transparent); } .rx-btn:active { transform: translateY(0); } .rx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .rx-btn-linea { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea-fuerte); box-shadow: none; } .rx-btn-linea:hover { border-color: var(--marca); box-shadow: none; } .rx-btn-chico { font-size: var(--t-chico); padding: 9px 17px; } .rx-btn .flecha { transition: transform var(--rapido) var(--brinco); } .rx-btn:hover .flecha { transform: translateX(4px); } /* ─────────────────────── CHIPS Y ANTETÍTULOS ──────────────────────── */ /* Aquí SÍ va la pastilla. */ .rx-chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-menudo); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-honda); /* honda, no marca: es texto chico */ background: var(--marca-nube); border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent); padding: 7px 14px; border-radius: var(--r-pastilla); } .rx-chip-neutro { color: var(--tinta-suave); background: var(--papel-hondo); border-color: var(--linea); } .rx-antetitulo { font-size: var(--t-menudo); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-honda); display: flex; align-items: center; gap: 10px; margin-bottom: var(--e2); } /* La rayita del antetítulo: el mismo gesto en las cuatro divisiones */ .rx-antetitulo::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--marca); flex: none; } /* ────────────────────────── LAS TARJETAS ──────────────────────────── */ .rx-tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-caja); padding: 26px 24px; box-shadow: var(--sombra); transition: transform var(--calmo) var(--brinco), box-shadow var(--calmo), border-color var(--calmo); } a.rx-tarjeta { text-decoration: none; color: inherit; display: block; } .rx-tarjeta-viva:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--marca) 40%, var(--linea)); } /* La línea de color de arriba: identifica la división de un vistazo */ .rx-tarjeta-marcada { border-top: 4px solid var(--marca); } /* El cuadro del icono. Nube de fondo, honda de trazo — el color puro se pierde en un icono de línea a este tamaño. */ .rx-icono { width: 46px; height: 46px; border-radius: 13px; background: var(--marca-nube); color: var(--marca-honda); display: flex; align-items: center; justify-content: center; margin-bottom: var(--e3); } .rx-icono svg { width: 24px; height: 24px; } /* Rejilla de tarjetas. `auto-fit` con `minmax` en vez de un número fijo de columnas: así no hace falta una media query por cada corte. */ .rx-rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .rx-rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Lista con viñeta cuadrada del color de la división */ .rx-lista { margin: 0; padding: 0; list-style: none; color: var(--tinta-suave); } .rx-lista li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: 14.5px; } .rx-lista li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--marca); opacity: .8; } /* ──────────────────────────── EL PIE ──────────────────────────────── */ .rx-pie { border-top: 1px solid var(--linea); padding: var(--e5) 0 var(--e4); font-size: var(--t-chico); color: var(--tinta-suave); } .rx-pie a { color: var(--tinta-suave); } .rx-pie a:hover { color: var(--tinta); } /* Las otras divisiones, en el pie de todas: la casa se recorre desde cualquier parte, no solo desde la puerta. */ .rx-divisiones { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; } .rx-divisiones a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; color: var(--tinta-suave); } .rx-divisiones a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); flex: none; } .rx-divisiones a:hover { color: var(--tinta); } /* ─────────────────────── PANTALLAS CHICAS ─────────────────────────── */ @media (max-width: 860px) { .rx { --e5: 40px; --e6: 56px; } .rx-envoltura, .rx-barra-interior { padding-left: 18px; padding-right: 18px; } .rx-menu { gap: 16px; } } @media (max-width: 620px) { /* El `:not(.rx-btn)` otra vez, y por otra razón. El comentario decía "los botones se quedan" pero la regla los escondía junto con el menú: un botón TAMBIÉN es un . En celular eso dejaba la barra sin la llamada a la acción, que es justo donde más falta hace. */ .rx-menu a:not(.rx-btn) { display: none; } .rx-volver { display: none; } .rx-btn { padding: 12px 20px; font-size: 14.5px; } } /* Quien pidió menos movimiento no quiere NINGUNO, no un poco menos. */ @media (prefers-reduced-motion: reduce) { .rx *, .rx *::before, .rx *::after { transition: none !important; animation: none !important; } .rx-btn:hover, .rx-tarjeta-viva:hover { transform: none; } } /* Imprimir: sin sombras ni fondos, y las direcciones a la vista */ @media print { .rx { background: #fff; } .rx-barra, .rx-btn { display: none; } .rx-tarjeta { box-shadow: none; break-inside: avoid; } .rx a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; } }