/* ============================================================================ SpiderNet · LOS TOKENS DE MARCA. Este fichero es la fuente unica. ============================================================================ Los valores salen de la diapositiva del deck «What has to be true to reach EUR 100M»: fondo casi negro con un punto de azul, diagramas dibujados con linea de 1 pixel en cian, y UNA palabra por pantalla en ese mismo cian. POR QUE ESTA TODO AQUI Y NO REPARTIDO ------------------------------------- Hubo un tiempo en que la paleta estaba en dos sitios: aqui (acento #0EA5E9) y otra vez en la hoja compilada de Tailwind, que la tapaba por orden de carga. Funcionaba, pero se caia sola de dos maneras: · bastaba cambiar el orden de los en head.ejs para que volviera el azul viejo, y · views/pages/public/index.ejs NO carga la hoja de Tailwind — solo esta —, asi que la portada se quedaba con la paleta antigua mientras el resto del sitio ya tenia la nueva. Ahora hay un solo juego de tokens y un solo acento. Los nombres heredados se conservan porque las vistas ya los usan, pero son ALIAS: apuntan al acento, no definen un color propio. Nada de esto necesita `!important`. LA REGLA QUE NO SE SALTA ------------------------ UN SOLO ACENTO. Si aparece un segundo color de marca en una pagina, esta mal. Ni indigo, ni fucsia, ni violeta: eran la paleta de antes del deck. Tipografia: Poppins (interfaz) + JetBrains Mono (cifras, formulas y las etiquetas en versalita muy espaciada que rotulan los diagramas). ============================================================================ */ /* LAS FUENTES SE SIRVEN DESDE ESTE MISMO DOMINIO (public/fonts/). Antes venian de fonts.googleapis.com con un @import, y un @import de fuentes es BLOQUEANTE: no se pinta una sola letra hasta que esa peticion a un tercero termina. En China Google esta bloqueado, asi que "termina" quiere decir "expira": la pagina se queda sin texto. Mismas familias y mismos pesos que antes; subconjunto latin, que cubre ingles y espanol. font-display: swap pinta con la fuente del sistema mientras llega la nuestra, y no deja nunca la pantalla en blanco. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- LOS SEIS. Todo lo demas de este fichero sale de aqui. --- */ /* Casi negro CON un punto de azul, no gris neutro: sobre gris el trazo cian se apaga y el conjunto se vuelve una web de IA cualquiera. */ --sn-bg: #050A0F; /* Un escalon por encima del fondo, para las cajas. Uno, no dos: en el deck la caja se distingue por su linea, no por su relleno. */ --sn-surface: #0B1219; /* EL TRAZO FINO de los diagramas. Es el acento a baja opacidad y no un color propio, a proposito: asi no puede colarse un segundo azul por la puerta de atras. A 1 pixel sobre el fondo da la linea de la diapositiva. */ --sn-line: rgba(34, 211, 238, 0.28); /* El cian electrico de los titulares. UNA palabra por pantalla. */ --sn-accent: #22D3EE; /* Blanco roto. Nunca #fff puro sobre negro: vibra y cansa. */ --sn-text: #E6EDF3; /* El gris de los pies de foto y de las fuentes. */ --sn-muted: #97A3B0; /* --- Derivados. Ni un color nuevo: todos salen de los seis de arriba. --- */ --sn-text-muted: var(--sn-muted); --sn-panel: rgba(11, 18, 25, 0.82); --sn-accent-soft: rgba(34, 211, 238, 0.10); /* `--sn-accent-2` existia para un segundo azul mas claro. Hoy es el MISMO acento: las vistas que lo usan siguen funcionando y ninguna introduce un color nuevo. Se conserva el nombre, no el segundo color. */ --sn-accent-2: var(--sn-accent); /* Tipografia */ --sn-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; --sn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* --- Alias heredados. Apuntan al token, no definen color. --- */ /* dashboard-theme.css */ --bg: var(--sn-bg); --surface: var(--sn-surface); --surface-2: #121B24; --border: var(--sn-line); --text: var(--sn-text); --text-muted: var(--sn-muted); --text-dim: #5C6875; --accent: var(--sn-accent); --accent-2: var(--sn-accent); --accent-hover: var(--sn-accent); --accent-soft: var(--sn-accent-soft); --font: var(--sn-font); /* Los mismos seis, con los nombres cortos que usan las paginas publicas. */ --line: var(--sn-line); --muted: var(--sn-muted); /* design-system.css: brand-a/b/c eran indigo, fucsia y cian. Los tres caen al unico acento. */ --spider-bg: var(--sn-bg); --spider-surface: rgba(11, 18, 25, 0.58); --spider-surface-strong: var(--sn-panel); --spider-border: var(--sn-line); --spider-text: var(--sn-text); --spider-brand-a: var(--sn-accent); --spider-brand-b: var(--sn-accent); --spider-brand-c: var(--sn-accent); /* Sin degradado de dos colores: el deck no tiene ninguno. Se conserva el nombre para no romper las vistas que lo usan, plano sobre el acento. */ --gradient-brand: linear-gradient(135deg, var(--sn-accent) 0%, var(--sn-accent) 100%); /* Estados: no son paleta de marca, se conservan. */ --success: #10B981; --success-soft: rgba(16, 185, 129, 0.12); --danger: #EF4444; --danger-soft: rgba(239, 68, 68, 0.12); /* Sistema */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; /* EL AIRE ES EL 80% DEL EFECTO. Un solo escalon de separacion vertical entre secciones, para que sea grande Y constante: dos secciones separadas por medidas distintas leen como un descuido. */ --space-section: 160px; } @media (max-width: 768px) { :root { --space-section: 96px; } } /* La etiqueta tecnica del deck: versalita muy espaciada, pequena y en el gris de las fuentes. Rotula los diagramas — «DATA ACCUMULATES», «THE MARKET IS ALREADY PAYING» — y no es un titular. */ .deck-label { font-family: var(--sn-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sn-muted); } /* La linea de 1 pixel, como clase, para que nadie tenga que recordar la opacidad y para que cambiarla sea un solo sitio. */ .deck-rule { border: 0; border-top: 1px solid var(--sn-line); } .deck-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }