/* ============================================================================ HYRIS — TOKENS DE DISEÑO ---------------------------------------------------------------------------- Fuente de verdad del color, radios, sombras, espaciado y tipografía. Ningún otro archivo escribe un color literal (lo verifica npm run check). LA PALETA NO ESTÁ INVENTADA. Está extraída píxel a píxel de los assets oficiales de la carpeta "logos Hyris" (Hyris26_Logo_byLFM.png y Hyris26_LogoAnimated_byLFM.gif), analizando el histograma de colores del logotipo: #EE7EFF 9,3 % relleno claro de las letras → brand-highlight #9D39DB 5,2 % morado medio → brand-primary #700EAD 4,8 % morado profundo → brand-primary-deep #4E0F76 4,8 % morado oscuro → brand-shadow #390858 4,9 % morado casi negro → base de los fondos #000000 17,9 % contorno duro del pixel art → brand-outline #F95EFF magenta del brillo → brand-accent #EEC105/#E99505/#C06A04 corona del logo → brand-gold* Tres capas: 1) PRIMITIVAS — los colores tal cual salen del logo. 2) SEMÁNTICAS — brand / background / text / border / state. 3) ROLES — nombres que usan los componentes, derivados de (2). ========================================================================== */ :root { /* ======================= 1. PRIMITIVAS (del logo) ====================== */ --hy-violet-100: #fb98ff; --hy-violet-200: #ee7eff; --hy-violet-300: #f95eff; --hy-violet-400: #b251e4; --hy-violet-500: #9d39db; --hy-violet-600: #700ead; --hy-violet-700: #4e0f76; --hy-violet-800: #390858; --hy-violet-900: #250639; --hy-violet-950: #150420; --hy-magenta-300: #ef62f0; --hy-magenta-500: #e054e5; /* --- ACENTOS DE SECCIÓN ------------------------------------------------ NUEVOS (no salen del logo, y se dice). CRITERIO, corregido tras la primera versión: los acentos son de SEÑALIZACIÓN, no de decoración. Un amarillo puro (#EEC105) sobre fondo oscuro tiene un contraste brutal y cansa la vista en cuanto ocupa una barra entera. Así que: · todos bajan a una saturación media (≈55-65 %), no al máximo; · todos comparten la misma luminosidad (≈68 %), así ninguno "grita" más que otro y se pueden mezclar en la misma pantalla; · el amarillo puro desaparece: Equipo pasa a CORAL cálido (combina con el morado de marca) y Ayuda a un ámbar apagado, casi arena. Es el mismo criterio que usan las interfaces de juego modernas: color para orientar, nunca para deslumbrar. */ --hy-cyan-400: #5cc4d4; /* Catálogo — frío, para datos y clasificaciones */ --hy-blue-500: #7d9bf0; /* Comunidad — cercano, social */ --hy-amber-400b: #d9a86a; /* Ayuda — atención sin alarma, arena */ --hy-pink-400: #e88ac0; /* Match — cálido, del corazón pixel del hotel */ --hy-gold-300: #eec105; --hy-gold-500: #e99505; --hy-gold-700: #c06a04; --hy-gold-900: #935404; --hy-outline: #000000; --hy-white: #ffffff; /* Neutros. ANTES eran violeta puro y hacían que TODO se viera morado; ahora son azul-noche con una pizca de violeta: el morado se reserva para la marca y para lo que hay que mirar. */ /* Fondos. Se han subido un escalón: el negro casi puro daba sensación de agujero y hacía que cada panel pareciera un recorte. Ahora hay aire entre el fondo, los paneles y las fichas, que es lo que da profundidad. */ --hy-ink-950: #0f0e18; --hy-ink-900: #16151f; --hy-ink-800: #1e1c2a; --hy-ink-700: #262436; --hy-ink-600: #302d43; --hy-ink-850: #1a1826; --hy-mist-100: #f4f2fb; --hy-mist-200: #d8d4e8; --hy-mist-300: #aea8c6; --hy-mist-400: #8b85a3; /* Estado (universales de interfaz, no de marca) */ --hy-green-400: #4ade80; --hy-green-600: #16a34a; --hy-amber-400: #fbbf24; --hy-red-400: #f87171; --hy-blue-400: #53b2f8; --hy-discord: #5865f2; --hy-discord-strong: #4752c4; /* ======================= 2. SEMÁNTICAS ================================= */ color-scheme: dark; /* Marca */ --brand-primary: var(--hy-violet-500); --brand-primary-deep: var(--hy-violet-600); --brand-secondary: var(--hy-violet-700); --brand-accent: var(--hy-violet-300); --brand-highlight: var(--hy-violet-200); --brand-gold: var(--hy-gold-300); --brand-gold-deep: var(--hy-gold-700); --brand-outline: var(--hy-outline); /* Fondo */ --background-base: var(--hy-ink-900); --background-deep: var(--hy-ink-950); --background-elevated: var(--hy-ink-700); --background-panel: var(--hy-ink-800); --background-sunken: var(--hy-ink-850); --background-hover: var(--hy-ink-600); /* Texto */ --text-primary: var(--hy-mist-100); --text-strong: var(--hy-white); --text-secondary: var(--hy-mist-200); --text-muted: var(--hy-mist-300); --text-faint: var(--hy-mist-400); --text-accent: var(--seccion-texto); --text-on-brand: var(--hy-white); --text-on-gold: #3a2402; /* Borde */ /* Los bordes siguen al acento de la sección: es lo que hace que Catálogo se vea "de catálogo" y Match "de Match" sin cambiar ni un componente. */ --border-default: rgba(255, 255, 255, 0.09); --border-strong: var(--seccion-borde); --border-subtle: rgba(255, 255, 255, 0.055); --border-hairline: rgba(255, 255, 255, 0.07); --border-pixel: var(--brand-outline); /* Estado */ --state-success: var(--hy-green-400); --state-success-deep: var(--hy-green-600); --state-warning: var(--hy-amber-400); --state-error: var(--hy-red-400); --state-info: var(--hy-blue-400); --state-success-soft: rgba(74, 222, 128, 0.16); --state-success-border: rgba(74, 222, 128, 0.35); --state-error-soft: rgba(248, 113, 113, 0.16); --state-error-border: rgba(248, 113, 113, 0.35); --state-warning-soft: rgba(251, 191, 36, 0.16); --state-warning-border: rgba(251, 191, 36, 0.35); /* ======================= 3. ROLES DE COMPONENTE ======================== */ /* Nombres que usan components.css / pages.css. Derivados de los anteriores: cambiar la marca arriba repinta toda la web. */ --bg-page: var(--background-base); --bg-page-deep: var(--background-deep); --bg-veil: rgba(15, 14, 24, 0.72); --bg-veil-strong: rgba(15, 14, 24, 0.9); --surface: var(--background-panel); --surface-raised: var(--background-elevated); --surface-sunken: var(--hy-ink-850); --surface-hover: var(--background-hover); --surface-inset: rgba(255, 255, 255, 0.035); --surface-nav: rgba(22, 21, 31, 0.92); --text: var(--text-primary); --text-dim: var(--text-faint); --text-on-primary: var(--text-on-brand); --border: var(--border-default); --border-soft: var(--border-subtle); /* `--accent` ES el acento de la sección: un solo token repinta la página. */ --accent: var(--seccion); --accent-hover: var(--seccion-fuerte); --accent-deep: var(--seccion-profundo); --accent-soft: var(--seccion-suave); --accent-soft-hover: var(--seccion-borde); --accent-2: var(--brand-accent); --accent-2-soft: rgba(249, 94, 255, 0.16); --gold: var(--brand-gold); --gold-soft: rgba(238, 193, 5, 0.16); /* Gradientes de marca (mismo salto de tono que el logo) */ --grad-primary: linear-gradient(180deg, var(--hy-violet-400) 0%, var(--hy-violet-600) 100%); --grad-primary-hover: linear-gradient(180deg, var(--hy-violet-200) 0%, var(--hy-violet-500) 100%); --grad-magenta: linear-gradient(180deg, var(--hy-violet-300) 0%, var(--hy-violet-600) 100%); --grad-gold: linear-gradient(180deg, var(--hy-gold-300) 0%, var(--hy-gold-700) 100%); --grad-surface: linear-gradient(135deg, rgba(48, 45, 67, 0.96) 0%, rgba(30, 28, 42, 0.94) 100%); --grad-hero-fade: linear-gradient( 90deg, var(--surface) 0%, var(--surface) 34%, var(--velo-panel) 52%, var(--velo-borde) 100% ); /* Cabecera de panel: el degradado de la sección, a color sólido. Antes llevaba rayas encima (venían de HabHub) y se quitaron. */ --panelbar-bg: var(--seccion-barra); --panelbar-border: rgba(255, 255, 255, 0.16); --panelbar-text: var(--hy-white); --panelbar-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.2); /* Capas neutras reutilizables */ --on-image: #ffffff; --hl-faint: rgba(255, 255, 255, 0.06); --hl-soft: rgba(255, 255, 255, 0.22); --hl-strong: rgba(255, 255, 255, 0.45); --hl-text: rgba(255, 255, 255, 0.78); --shade-soft: rgba(0, 0, 0, 0.18); --shade: rgba(0, 0, 0, 0.28); --shade-strong: rgba(0, 0, 0, 0.35); --checker: rgba(0, 0, 0, 0.08); --veil-soft: rgba(8, 3, 15, 0.25); --veil-mid: rgba(8, 3, 15, 0.35); --page-glow: rgba(140, 92, 210, 0.2); --ok-glow: rgba(74, 222, 128, 0.18); --backdrop: rgba(10, 9, 17, 0.76); --velo-panel: rgba(30, 28, 42, 0.9); --velo-panel-suave: rgba(30, 28, 42, 0.55); /* --- SOBRE FOTO --------------------------------------------------------- Colores para lo que vive ENCIMA de una captura oscura (la tarjeta de la entrada). No cambian con el tema: la foto de debajo es la misma en claro y en oscuro, así que si estos siguieran al tema, en claro el texto se volvía oscuro sobre una caja oscura y desaparecía. */ --sobre-foto-texto: #ffffff; --sobre-foto-suave: rgba(255, 255, 255, 0.82); --sobre-foto-tenue: rgba(255, 255, 255, 0.68); --sobre-foto-caja: rgba(255, 255, 255, 0.12); --sobre-foto-borde: rgba(255, 255, 255, 0.24); --velo-auth: rgba(22, 21, 31, 0.82); --velo-auth-caja: rgba(22, 21, 31, 0.72); --velo-auth-medio: rgba(30, 28, 42, 0.7); --velo-auth-brillo: rgba(112, 14, 173, 0.35); /* Velo del editor de escenas: oscurece todo menos el trozo encuadrado. */ --velo-recorte: rgba(8, 7, 14, 0.62); /* No es un color de la marca: es la parte OPACA de una máscara (lo que se ve). Vive aquí porque el resto de hojas no puede escribir literales. */ --mascara-solida: #000; /* Velo mínimo para que ninguna escena clara reviente sobre la interfaz oscura. No la difumina: sólo le baja el brillo lo justo. */ --velo-borde: rgba(30, 28, 42, 0.34); /* --- ACENTO DE SECCIÓN ------------------------------------------------- Cada página fija `data-seccion` en el y toda la sección se tiñe: cabeceras de panel, puntos, antetítulos y chips. Un solo token, ningún componente sabe en qué sección está. Por defecto, la marca. */ --seccion: var(--brand-primary); --seccion-fuerte: var(--brand-highlight); --seccion-profundo: var(--brand-primary-deep); --seccion-texto: var(--brand-highlight); --seccion-suave: rgba(157, 57, 219, 0.16); --seccion-borde: rgba(157, 57, 219, 0.34); --seccion-grad: linear-gradient(180deg, var(--hy-violet-400) 0%, var(--hy-violet-600) 100%); /* LAS BARRAS DE LA WEB (cabeceras de panel). Un degradado en diagonal de morado oscuro a lila, MUY suave: la barra ocupa todo el ancho, así que un salto de color fuerte cansa. Es el mismo en todas las secciones: la web sólo usa morado y lila. */ --seccion-barra: linear-gradient(100deg, #4a2178 0%, #6c3fa8 55%, #8b5cc4 100%); /* --- Radios ------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px; /* --- Sombras ----------------------------------------------------------- */ --sh-xs: 0 1px 2px rgba(6, 5, 12, 0.4); --sh-sm: 0 2px 8px rgba(6, 5, 12, 0.34); --sh-md: 0 8px 24px rgba(6, 5, 12, 0.42); --sh-lg: 0 18px 48px rgba(6, 5, 12, 0.5); --sh-nav: 0 10px 30px rgba(6, 5, 12, 0.45); --sh-btn: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); --sh-btn-press: 0 0 0 rgba(0, 0, 0, 0), inset 0 2px 4px rgba(0, 0, 0, 0.35); --sh-glow: 0 0 0 4px var(--seccion-suave); /* --- Espaciado (escala de 4) ------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* --- Medidas de layout (proporciones tomadas de HabHub) ---------------- */ --shell-max: 1440px; --shell-gutter: 24px; --nav-h: 104px; --hero-h: 268px; /* EL BANNER. Mismo tamaño en todas las secciones: es lo que hace que la web se vea ordenada al pasar de una a otra. Inicio, perfil y catálogo tienen su propia composición y no siguen esta medida. */ --banner-w: 600px; --banner-h: 232px; /* CUÁNTO MUERDE EL ARCO. Es el ancho del óvalo que la tarjeta le quita a la foto por la izquierda. Estaba en el 26 % —156 px de una banda de 600— y se comía media escena: lo que ella encuadraba a la izquierda no llegaba a verse. Al 16 % la curva sigue estando y se pierde bastante menos. Este número tiene que ser el MISMO que el `arco` de scripts/editor-escenas.mjs, que es el que dibuja la zona sombreada del cuadro de recorte. */ --arco-banda: 16%; --arco-panel: 15%; --panelbar-h: 54px; --rail-w: 372px; --grid-gap: 24px; /* --- Tipografía -------------------------------------------------------- */ /* Nunito es la tipografía que ya usa hyris.life en producción. La carpeta "logos Hyris" no incluye ningún archivo de fuente, así que se mantiene. */ --font-sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-19: 19px; --fs-22: 22px; --fs-26: 26px; --fs-32: 32px; --fs-40: 40px; --fs-54: 54px; --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; --ls-tight: -0.02em; --ls-wide: 0.08em; --ls-wider: 0.12em; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; /* --- Movimiento -------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; /* --- Capas ------------------------------------------------------------- */ --z-base: 1; --z-sticky: 50; --z-dropdown: 60; --z-float: 70; } /* ============================================================================ ACENTOS POR SECCIÓN ---------------------------------------------------------------------------- `data-seccion` lo pone AppShell a partir de la página. Redefine sólo los tokens de acento: ni un componente cambia. ========================================================================== */ /* SÓLO MORADO Y LILA EN TODA LA WEB. Equipo, Comunidad (TOP), Match, Catálogo y Ayuda NO tienen acento propio: usan el morado de Hyris, que es la marca. El azul de Comunidad y el ámbar de Ayuda se quitaron a petición suya: "los únicos colores deben ser morado/lila". La única sección con acento propio es la Tienda, y es LILA — un pariente claro del mismo morado, no otro color. */ :root[data-seccion="tienda"] { /* Tienda: LILA. Un pariente claro del morado de marca, no otro color. */ --seccion: #c48bf0; --seccion-fuerte: #dcb4fa; --seccion-profundo: #7d3fb5; --seccion-texto: #dcb4fa; --seccion-suave: rgba(196, 139, 240, 0.16); --seccion-borde: rgba(196, 139, 240, 0.34); --seccion-grad: linear-gradient(180deg, #c48bf0 0%, #7d3fb5 100%); --seccion-barra: linear-gradient(100deg, #56297f 0%, #7d47b2 55%, #a06fd4 100%); --page-glow: rgba(196, 139, 240, 0.16); } /* Catálogo NO tiene acento propio: usa el morado de Hyris, que es la marca. */ /* ============================================================================ ESCALA COMPACTA ---------------------------------------------------------------------------- Por debajo de 1600 px la web baja un punto de escala: tipografía, alturas y separaciones. No es un `zoom` del navegador (eso rompería el pixel-art): son los MISMOS tokens un paso más pequeños, así que todo sigue proporcionado y cabe más en pantalla sin barra de desplazamiento horizontal. ========================================================================== */ @media (max-width: 1600px) { :root { --fs-54: 44px; --fs-40: 33px; --fs-32: 27px; --fs-26: 23px; --fs-22: 20px; --fs-19: 17px; --fs-17: 16px; --fs-16: 15px; --fs-15: 14px; --fs-14: 13px; --nav-h: 88px; --hero-h: 232px; --panelbar-h: 48px; --grid-gap: 20px; --rail-w: 336px; } } /* ============================================================================ TEMA CLARO — se redefinen sólo los roles semánticos. ========================================================================== */ :root[data-theme="claro"] { color-scheme: light; --background-base: #f4f0fa; --background-deep: #eae2f6; --background-elevated: #ffffff; --background-panel: #ffffff; --background-hover: #f2ebfc; --text-primary: #22103a; --text-strong: #150620; --text-secondary: #43315e; --text-muted: #5c4a78; --text-faint: #7a6a93; --text-accent: var(--hy-violet-600); --border-default: rgba(78, 15, 118, 0.16); --border-strong: rgba(78, 15, 118, 0.32); --border-subtle: rgba(78, 15, 118, 0.1); --border-hairline: rgba(21, 6, 32, 0.08); --bg-veil: rgba(255, 255, 255, 0.66); --bg-veil-strong: rgba(255, 255, 255, 0.88); --surface-sunken: #f7f3fd; --surface-inset: rgba(37, 6, 57, 0.04); --surface-nav: rgba(255, 255, 255, 0.94); --accent: var(--hy-violet-600); --accent-hover: var(--hy-violet-500); --accent-deep: var(--hy-violet-700); --accent-soft: rgba(112, 14, 173, 0.1); --accent-soft-hover: rgba(112, 14, 173, 0.18); --accent-2-soft: rgba(249, 94, 255, 0.12); --gold: var(--hy-gold-700); --gold-soft: rgba(238, 193, 5, 0.22); --grad-surface: linear-gradient(135deg, #ffffff 0%, #faf6ff 100%); --grad-hero-fade: linear-gradient(90deg, var(--surface) 0%, var(--surface) 36%, rgba(255, 255, 255, 0.86) 52%, rgba(255, 255, 255, 0) 84%); --hl-faint: rgba(37, 6, 57, 0.05); --hl-soft: rgba(255, 255, 255, 0.5); --hl-strong: rgba(255, 255, 255, 0.7); --shade-soft: rgba(34, 16, 58, 0.12); --shade: rgba(34, 16, 58, 0.16); --shade-strong: rgba(34, 16, 58, 0.2); --veil-soft: rgba(255, 255, 255, 0.25); --veil-mid: rgba(255, 255, 255, 0.45); --page-glow: rgba(157, 57, 219, 0.12); --sh-xs: 0 1px 2px rgba(34, 16, 58, 0.08); --sh-sm: 0 2px 8px rgba(34, 16, 58, 0.08); --sh-md: 0 8px 24px rgba(34, 16, 58, 0.1); --sh-lg: 0 18px 48px rgba(34, 16, 58, 0.14); --sh-nav: 0 8px 24px rgba(34, 16, 58, 0.12); --sh-glow: 0 0 0 4px rgba(112, 14, 173, 0.14); }