/* ══════════════════════════════════════════════════════════════════════
ContextLexMX · Marca v1.0 — capa de marca (archivo portable)
Fuente de verdad: «DESIGN-wordmark v1.0» — ContextLexMX · sistema de
wordmark (tesis, construcción, usos, contraste, prohibiciones).
En el portal este archivo se sirve como /assets/brand.css (mismo
contenido). Se carga DESPUÉS de account.css y ANTES de la capa de
página (ver brand-spec.md).
Contenido:
0. Fuente de marca (@font-face, self-hosted)
1. Tokens de marca (:root, prefijo --clx-)
2. Wordmark (.clx) — snippet del DESIGN con la geometría intacta
3. Integración con el encabezado del portal (.brand)
Reglas duras que este archivo respeta (CSP default-src 'self'):
· Sin @import, sin URLs externas, sin estilos en línea, sin JS.
· La fuente se sirve desde el mismo origen (brand/bricolage-grotesque.woff2).
PROHIBICIONES del DESIGN §Prohibiciones que este CSS NO debe «mejorar»:
1. El rosa sólo existe como bloque de «Lex»: ni como texto, ni en
Context/MX, ni como acento de página.
2. El bloque no se mueve a otro segmento.
3. Dentro del bloque nunca va texto hueso/blanco (tinta = 5.61:1 ✓;
hueso dentro del bloque = 3.04:1 ✗; blanco = 3.46:1 ✗).
4. El bloque no se redondea ni lleva sombra, degradado, filete o inclinación.
5. Sin espacios ni cambios de mayúsculas dentro de la marca: «ContextLexMX».
6. No recomponer con otra fuente, peso u ancho, ni con Bricolage en
opsz automático. Si la fuente no está, se usan los SVG de brand/.
7. No estirar, condensar ni cambiar el tracking ni la altura del bloque.
══════════════════════════════════════════════════════════════════════ */
/* ── 0. Fuente de marca · Bricolage Grotesque (SIL OFL 1.1) ────────────
Archivo: brand/bricolage-grotesque.woff2 — conversión de formato de
fonts/BricolageGrotesque-VF.ttf (sin subsetting ni edición de contornos),
redistribuido sin modificar; licencia en brand/fonts/OFL.txt.
Los rangos declarados son los ejes completos del archivo (el wordmark
pide 800 / 88 % / opsz 96 dentro de ellos). font-display:swap acelera el
primer pintado; la ventana de intercambio (texto en la fuente de
respaldo) está documentada en brand-spec.md §Ventana de intercambio. */
@font-face {
font-family: "Bricolage Grotesque";
src: url("brand/bricolage-grotesque.woff2") format("woff2");
font-weight: 200 800;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
}
/* ── 1. Tokens de marca ────────────────────────────────────────────────
Materiales del DESIGN. El prefijo --clx- evita colisión con los tokens
del portal (--primary, --ink, --paper…), que NO se sustituyen: la marca
conserva sus materiales sobre cualquier fondo claro (el bloque no cambia
de color, PROHIBICIÓN 1-2). */
:root {
--clx-tinta: #0D0D0F; /* Context/MX sobre claro; Lex dentro del bloque */
--clx-hueso: #F3F0E8; /* Context/MX sobre oscuro */
--clx-rosa: #FF2E93; /* fill del bloque. Sólo aquí. */
--clx-x-min: 16px; /* tamaño mínimo de uso en pantalla (lockup 91 × 17 px) */
}
/* ── 2. Wordmark — construcción modular ────────────────────────────────
Unidad base X = font-size; todo lo demás es múltiplo de X:
mayúscula 0.66X · bloque 1.06X de alto × 1.432X de ancho ·
lockup 5.689X × 1.06X (5.37 : 1) · tracking −0.018X ·
aire de Lex al borde del bloque 0.09X por lado ·
tinta vecina a 0.06X del bloque.
Área de protección: 0.5X por los cuatro lados (espacio en blanco; en el
encabezado lo garantizan los paddings del portal, ver brand-spec.md).
line-height:1, display:inline-flex y opsz 96 son parte de la construcción:
si se cambian, el bloque se mueve (probado contra el SVG a X = 400 px).
HTML (el texto vive, no es imagen):
ContextLexMX
Variantes por fondo:
.clx → hueso + bloque rosa (fondo tinta, nativo)
.clx.sobre-claro → tinta + bloque rosa (papel, documentos claros) */
.clx {
--x: 96px; /* unidad base X */
--texto: var(--clx-hueso); /* Context y MX */
--bloque: var(--clx-rosa); /* fill del bloque */
--lex: var(--clx-tinta); /* Lex dentro del bloque */
display: inline-flex; align-items: baseline; white-space: nowrap;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800; font-stretch: 88%; font-variation-settings: "opsz" 96;
font-size: var(--x); line-height: 1;
letter-spacing: calc(var(--x) * -0.018);
font-kerning: normal; font-variant-ligatures: none;
color: var(--texto);
}
.clx .lex {
background: var(--bloque); color: var(--lex);
/* los paddings no son simétricos porque miden desde cajas de avance y el
DESIGN mide a la tinta: 0.06 + blanco de L (0.030) = 0.09 a la izquierda;
0.106 − tracking (0.018) + blanco de x (0.002) = 0.09 a la derecha */
padding: calc(var(--x)*.03) calc(var(--x)*.106) calc(var(--x)*.03) calc(var(--x)*.06);
margin: 0 calc(var(--x)*.03) 0 calc(var(--x)*.06);
}
.clx.sobre-claro { --texto: var(--clx-tinta); }
/* ── 3. Integración con el encabezado del portal ───────────────────────
El rótulo del portal deja de ser texto en serif (.brand de account.css)
y pasa a ser la marca viva. Encaja en el mismo ancla :
mismas ligas, misma posición, misma retícula.
· display:inline-flex quita el hueco de línea base del ancla (la marca es
un inline-flex y si no, queda aire debajo).
· account.css trae «.brand span { color: var(--primary) }» (0-1-1), que
pintaba los segmentos de la marca de vino y también al propio .clx
(que es un span). Las tres reglas siguientes la superan por
especificidad sin depender del orden de carga y sin tocar la
construcción del lockup (sólo reafirman su color):
.brand .clx (0-2-0) → el lockup · --texto
.brand .clx > span(0-2-1) → Context, MX · hereda del lockup
.brand .clx .lex (0-3-0) → Lex · --lex
· X = 21 px: misma masa óptica que el rótulo anterior (21 px serif),
sobre el mínimo de 16 px. Lockup 119.5 × 22.3 px.
Área de protección 0.5X = 10.5 px: los paddings del portal (24 px
laterales, 16 px arriba/abajo) la cubren sin cambios. */
.brand { display: inline-flex; align-items: center; }
.brand .clx { color: var(--texto); --x: 21px; }
.brand .clx > span { color: inherit; }
.brand .clx .lex { color: var(--lex); }