/* * theme.css — Variables CSS del sistema de diseño de la web corporativa * de ZAALEN. * * Este fichero NO inventa un lenguaje visual nuevo: reproduce, en CSS * plano y sin build, el mismo canon que ya usan DEZIMI, OCTABI, SETIMI y * QUMERIQ (ver /home/diazsantos/ZAALEN/THEMES_PLAN.md). La razón es que * un visitante que llega desde la web y entra en cualquier app tiene que * percibir una sola casa, no cinco productos distintos: mismo chrome, * mismos radios, mismas sombras, misma tipografía. * * Los cuatro temas del canon conviven aquí: * * :root → datafox (neobrutalista, radius 0) * [data-theme="datalord"] → datalord (soft refined, radius 6) * [data-theme="dataramslight"] → Dieter Rams para Braun, claro ← POR DEFECTO * [data-theme="datarams"] → Dieter Rams para Braun, oscuro * * Lo único que cambia respecto a las apps es la cromaticidad de marca: * aquí la marca es la de la matriz —azul #0032a0 y rojo #e4002b del * logotipo ZAALEN— en lugar del cian de OCTABI o el verde de DEZIMI. * La geometría (radio, sombra, borde) y la escala tipográfica son * idénticas, que es lo que de verdad hace que la suite se reconozca. * * El tema activo lo escribe app.js sobre y lo * persiste en localStorage bajo `zaalen_theme`, exactamente igual que * `octabi_theme` / `dezimi_theme` / `setimi_theme` en las apps. */ /* ──────────────────────────────────────────────────────────────────────── Tipografías servidas desde nuestro propio origen. La web anterior cargaba Coolvetica desde fonts.cdnfonts.com, lo que comunicaba la IP de cada visitante a un tercero en cada visita — el mismo problema que las apps ya resolvieron cuando dejaron de pedirle las fuentes a Google (ver el comentario largo en el globals.css de OCTABI). Los .woff2 de abajo son copias locales de los mismos paquetes @fontsource-variable que usan las apps, así que no hay ninguna petición fuera de zaalen.com y de paso desaparece un punto de fallo externo. Se usan las variantes VARIABLES (eje wght 100..900) para poder apoyarse en el contraste de peso sin cargar un fichero por peso. ──────────────────────────────────────────────────────────────────────── */ /* Inter — tipografía de interfaz de toda la suite. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); 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: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cirílico: la web se sirve en ruso, y sin este subset el ruso caería a la fuente del sistema y se vería de otra familia que el resto. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/inter-greek-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* Archivo — la familia que los temas datarams* imponen sobre --font. Es el mismo swap tipográfico que hacen las apps en esos dos temas. */ @font-face { font-family: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2-variations'); 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: 'Archivo Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* JetBrains Mono — SÓLO para datos: cifras, precios, identificadores. */ @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); 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; } /* ════════════════════════════════════════════════════════════════════════ Tema datafox — neobrutalismo. Definido en :root porque es el set base del canon: los demás temas sólo sobreescriben lo que cambian. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marca ZAALEN ── El azul y el rojo salen literalmente del logotipo (los mismos hex que ya estaban en el index.html anterior y en 04. LOGOS/*.svg). No se inventa ningún hue: las variantes light/mid/dark se derivan del azul base, y el rojo entra como acento secundario, que es el papel que cumple en la marca (la cifra "1" roja sobre la marca azul). */ --brand: #0032a0; /* azul ZAALEN */ --brand-light: #e6ecf7; /* fondo de hover, tinte claro */ --brand-mid: #b3c2e2; /* divisores, áreas tintadas */ --brand-dark: #00206b; /* texto hover, estado pulsado */ --brand-bg: #f0f4fb; /* tinte muy pálido (~10 % de saturación) */ /* ── Acento secundario: el rojo del logotipo ── */ --accent: #e4002b; --accent-deep: #a80020; --accent-bg: #fdeaee; /* ── Superficies ── */ --bg: #ebedf1; --surface: #ffffff; --surface-2: #f4f5f7; --cream: #f8f5ee; /* ── Chrome (topbar + sidebar) ── El mismo navy #1a1f2e que las cuatro apps adoptaron en R3 F12. Este token no es sólo el fondo de la barra: en datafox es TAMBIÉN el color de --border y el de las sombras duras, así que gobierna todo el chrome del tema. */ --topbar: #1a1f2e; --topbar-2: #2a3142; --topbar-text: #e8eaed; --topbar-dim: #9aa0ad; --sidebar-bg: #ffffff; --sidebar-hover:#eef1f8; /* ── Bordes ── */ --border: var(--topbar); --border-dim: #e8eaed; /* ── Texto ── */ --text: #1a1f2e; --text-2: #5a6374; --text-3: #9aa0ad; --text-4: #c4c8d0; /* ── Status ── */ --ok: #3a8060; --ok-bg: #e3eee8; --warn: #a87333; --warn-bg: #f4ead8; --err: #b85042; --err-bg: #f5e2de; --info: #3b6fa8; --info-bg: #e2ecf6; /* ── Colores de plan sobre chrome oscuro ── Mismos valores calibrados que el mapa PLAN_BADGE_COLOR del Topbar de las apps, para que un plan se lea del mismo color en la web y dentro del producto. Scientist y Pioneer derivan de la marca de cada app; aquí, al ser la matriz, Scientist toma el azul aclarado para que cumpla contraste sobre el navy. */ --plan-scientist: #7aa8d8; --plan-pioneer: #b8854a; --plan-voyager: #6fb08f; /* ── Forma (datafox: radius 0, sombras duras, bordes de 2 px) ── */ --radius: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --shadow-sm: 2px 2px 0px var(--topbar); --shadow: 3px 3px 0px var(--topbar); --shadow-md: 4px 4px 0px var(--topbar); --frame-border: 2px solid var(--topbar); --frame-border-w: 2px; --frame-border-c: var(--topbar); --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Tipografía ── */ --font: 'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono Variable', 'Menlo', 'Consolas', monospace; /* Escala idéntica a la de las apps. */ --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* La web corporativa necesita dos escalones por encima de los de la interfaz: el lema del hero tiene que dominar la pantalla, y esos tamaños no existen dentro del producto porque allí nada es un titular de portada. */ --fs-4xl: 48px; --fs-5xl: clamp(2.75rem, 6.5vw, 5.25rem); /* ── El hero, gris de campo ── El hero es la única superficie oscura del scroll. No hereda del tema: lleva su propia paleta para que el cultivo se lea como lo que es, una micrografía, y para que el texto encima gane el contraste que sobre papel no tenía. El gris NO es negro a propósito: un campo negro es campo oscuro, y lo que se está mirando aquí es CONTRASTE DE FASE, donde el fondo es gris medio y la célula aparece con su halo contra él. Es también el límite Cuánto se puede aclarar lo marca el ACENTO, no el titular: el texto blanco aguanta mucho más gris del que aguanta el turquesa. Por eso los dos suben juntos — cada vez que se aclara el fondo hay que aclarar el acento o deja de cumplir. Medido sobre este gris: titular 6,7:1, descriptor 5,1:1, acento 5,1:1. El techo con este acento es #5f5d57. Estos tokens viven en :root y NO dentro de cada tema a propósito: el hero se ve igual en los cuatro, que es lo que se quiere de una portada. El conmutador de tema sigue mandando en todo lo demás. --hero-bg lo lee también background.js desde :root para decidir que está sobre oscuro y subir el alfa de las células; por eso tiene que declararse aquí y no sobre .hero, donde el script no lo vería. */ --hero-bg: #575550; --hero-text: #f4f2ec; /* 0,82 y no 0,72: contra un gris medio, el descriptor a 0,72 se quedaba en 4,8:1 y con el grano encima no daba margen. */ --hero-text-2: rgba(244, 242, 236, 0.82); /* El turquesa del logotipo-icono de QUMERIQ, y no el azul de marca: sobre el gris el #0032a0 se hunde, y este es el color que el visitante acaba de ver en la marca de arriba. Va aclarado respecto al del logotipo (#00cecb): a su valor original se queda en 3,9:1 sobre este fondo. Sigue leyéndose como el mismo color, sólo que sobre gris hace falta subirlo para que cumpla. */ --hero-accent: #7fe6e3; --hero-border: rgba(244, 242, 236, 0.42); --hero-hover: rgba(244, 242, 236, 0.16); /* ── Medidas del armazón ── */ --topbar-h: 56px; /* mismo alto que el Topbar de las apps */ --sidebar-w: 220px; /* expandido */ --sidebar-w-min: 56px; /* colapsado (sólo iconos) */ } /* ════════════════════════════════════════════════════════════════════════ Tema datalord — soft refined. Sólo cambian forma y superficies neutras. ════════════════════════════════════════════════════════════════════════ */ [data-theme="datalord"] { --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f4f5f7; --sidebar-bg: #ffffff; --sidebar-hover:#eef1f8; --border: #e5e7eb; --border-dim: #d4d7dc; --frame-border: 1px solid #e5e7eb; --frame-border-w: 1px; --frame-border-c: #e5e7eb; --radius: 6px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.04), 0 1px 1px rgba(26, 31, 46, 0.06); --shadow: 0 2px 6px rgba(26, 31, 46, 0.06), 0 1px 2px rgba(26, 31, 46, 0.04); --shadow-md: 0 6px 20px rgba(26, 31, 46, 0.08), 0 2px 4px rgba(26, 31, 46, 0.04); } /* ════════════════════════════════════════════════════════════════════════ Tema dataramslight — Dieter Rams para Braun, claro. TEMA POR DEFECTO de esta web (decisión del encargo). Fondo blanco cálido, hairlines, radio mínimo y sombras casi imperceptibles. ════════════════════════════════════════════════════════════════════════ */ [data-theme="dataramslight"] { --bg: #e9e7e1; /* El hero llevaba aquí un papel medio escalón más apagado que el resto del scroll. Ya no: desde 2026-08-26 es una superficie oscura y su paleta entera vive en :root, común a los cuatro temas. */ --surface: #fbfaf7; --surface-2: #f1efe9; --cream: #f4f1e9; --topbar: #1b1b19; /* carbón cálido, no navy */ --topbar-2: #2a2a27; --topbar-text: #ecebe4; --topbar-dim: #9b988f; --sidebar-bg: #f1efe9; --sidebar-hover:#eae7de; --border: #cfccc3; --border-dim: #dedbd3; --frame-border: 1px solid #cfccc3; --frame-border-w: 1px; --frame-border-c: #cfccc3; --text: #1b1b19; --text-2: #6e6c66; --text-3: #9b988f; --text-4: #b8b4aa; --radius: 2px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --shadow-sm: 0 1px 1px rgba(27, 27, 25, 0.05); --shadow: 0 1px 3px rgba(27, 27, 25, 0.07); --shadow-md: 0 2px 8px rgba(27, 27, 25, 0.09); /* La marca se conserva; sólo el tinte pálido se recalienta para no dar un azul frío sobre un fondo cálido. */ --brand-bg: #eceef5; --brand-light: #e4e8f3; --accent-bg: #f8e9e9; } /* ════════════════════════════════════════════════════════════════════════ Tema datarams — Dieter Rams para Braun, oscuro. Invierte las superficies a un casi-negro cálido; el azul de marca se levanta para que siga siendo legible sobre fondo oscuro. ════════════════════════════════════════════════════════════════════════ */ [data-theme="datarams"] { --bg: #141416; --surface: #201f22; --surface-2: #29282c; --cream: #29282c; --topbar: #0e0d10; --topbar-2: #1e1d21; --topbar-text: #ecebe4; --topbar-dim: #8e8c86; --sidebar-bg: #1b1a1d; --sidebar-hover:#26252a; --border: #3a3a3e; --border-dim: #313035; --frame-border: 1px solid #3a3a3e; --frame-border-w: 1px; --frame-border-c: #3a3a3e; --text: #ecebe4; --text-2: #a9a69f; --text-3: #7c7a74; --text-4: #55534e; --radius: 2px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.45); --shadow: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.55); /* #0032a0 sobre #141416 da 2,2:1 — ilegible. Se levanta el azul a un tono que cumple 4,5:1 sin abandonar el hue de la marca, y el rojo se aclara por el mismo motivo. Es exactamente lo que hace QUMERIQ con su azul royal en este tema. */ --brand: #6f9fce; --brand-dark: #a8c6e4; --brand-mid: #2c3f5c; --brand-light: #1a2433; --brand-bg: #161d29; --accent: #e8776f; --accent-deep: #f0a29b; --accent-bg: #2a1a1a; --ok: #6fb08f; --warn: #cba24c; --err: #d6796a; --info: #6f9fce; } /* ──────────────────────────────────────────────────────────────────────── Estructura Dieter-Rams compartida por los dos temas datarams*. Va más allá del color: impone la familia Archivo y da a los titulares las versales, el interletraje y la regla de acento que caracterizan al lenguaje Braun. Mismas reglas que en el globals.css de las apps. ──────────────────────────────────────────────────────────────────────── */ [data-theme="datarams"], [data-theme="dataramslight"] { --font: 'Archivo Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif; } [data-theme="datarams"] h1, [data-theme="datarams"] h2, [data-theme="datarams"] h3, [data-theme="dataramslight"] h1, [data-theme="dataramslight"] h2, [data-theme="dataramslight"] h3 { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; } /* La regla corta bajo los titulares — la firma visual del tema. Se excluye el lema del hero (.hero-motto) porque ahí el titular ya está sobre el fondo animado y una barra suelta ensuciaría la composición. */ [data-theme="datarams"] h2:not(.no-rule)::after, [data-theme="dataramslight"] h2:not(.no-rule)::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 7px; background: var(--brand); }