@charset "UTF-8"; /* ========================================================= ONION SUPPORT — MARCA COMPLETA (BRANDLOCKUP) Archivo: /src/css/views/public/brand-lockup.css ÚNICA fuente de estilos y geometría del lockup completo de la marca: logomark + wordmark ONIONSUPPORT + tagline SERVICIO TÉCNICO INFORMÁTICO. Marcado: /src/views/public/brand-lockup/template.js. La carga todo documento que pinta la marca: la portada (manifiesto `public-home` de src/router/styles.js) y los documentos estáticos (PUBLIC_DOCUMENT_STYLESHEETS de tools/public-static-document.mjs). Regla y verificación: docs/PUBLIC_EXPERIENCE.md#marca-completa-brandlockup. REGLA DE MARCA. Siempre que se pinta el lockup completo, el tagline comparte exactamente el ancho visual del wordmark ONIONSUPPORT: - La columna de texto es una rejilla de una sola pista que mide SÓLO el wordmark: el tagline declara `contain: inline-size`, así que no aporta ancho propio, y se estira a esa pista. El logomark y la separación quedan fuera de la columna. - El tracking negativo del wordmark se aplica también tras la última letra; su margen final lo devuelve para que la pista termine donde termina la T. Hacia fuera, el margen final de la raíz lo vuelve a descontar: la marca ocupa en su contexto lo mismo que su texto. - El tagline reparte sus glifos (un por carácter) de borde a borde con `justify-content: space-between`: empieza bajo la O inicial y termina bajo la T final con cualquier fuente de la pila (no hay @font-face: las métricas cambian con la plataforma) y a cualquier tamaño, sin JavaScript, sin medir y sin deformar los glifos. El hueco entre glifos es su tracking: el mismo entre cada par, como el de letter-spacing, pero sin sobrante tras el último carácter. - Su cuerpo es una proporción fija del wordmark: cambiar el tamaño de la marca no obliga a retocar el tagline. Con .38 el tracking resultante queda en torno a .12–.15em (Inter, Roboto, Arial, Open Sans, Noto, DejaVu) y el texto sin tracking ocupa a lo sumo un 84 % del wordmark: margen de sobra para cualquier fuente de la pila. API. Un contexto fija las entradas sobre su .brand-lockup y nada más: nunca estiliza las piezas internas ni repite su geometría. --brand-lockup-size cuerpo del wordmark; el tagline lo sigue --brand-lockup-mark-size lado del logomark --brand-lockup-logo-size lado de la imagen dentro del logomark --brand-lockup-mark-radius radio del logomark --brand-lockup-gap separación logomark–texto --brand-lockup-tagline-display `flex` (visible) o `none` --brand-lockup-accent acento: SUPPORT e inicio del logomark --brand-lockup-accent-end final del degradado del logomark --brand-lockup-tagline-ink color del tagline El wordmark toma el color del contexto (currentColor). - Autosuficiente: un documento estático no carga app.css (ni su reset), así que aquí se declaran tipografía, pesos y la caja de la imagen. - Las capas de la topbar: el lockup en `auth` y su tema claro en `compositions`. Sin !important, sin estilos inline, sin reglas por ruta. - Lo comprueban tools/public-brand-lockup-contract.mjs (fuente) y tools/public-brand-lockup-browser-contract.mjs (geometría medida). ========================================================= */ @layer auth { /* ========================================================= 1. ENTRADAS Valores por defecto sin especificidad: cualquier contexto los sustituye declarando las suyas sobre .brand-lockup. ========================================================= */ :where(.brand-lockup) { --brand-lockup-size: 30px; --brand-lockup-mark-size: 48px; --brand-lockup-logo-size: 34px; --brand-lockup-mark-radius: 18px; --brand-lockup-gap: 12px; --brand-lockup-tagline-display: flex; --brand-lockup-accent: var(--public-accent); --brand-lockup-accent-end: var(--public-accent-3); --brand-lockup-tagline-ink: var(--public-text-soft); } /* ========================================================= 2. LOCKUP ========================================================= */ .brand-lockup { /* Constantes de la marca, no entradas: el tracking del wordmark y la proporción tagline / wordmark. */ --brand-lockup-tracking: -.045em; --brand-lockup-tagline-scale: .38; display: inline-flex; align-items: center; gap: var(--brand-lockup-gap); min-block-size: var(--brand-lockup-mark-size); min-inline-size: max-content; /* La devolución del tracking final es interna a la columna (sección 4): hacia fuera la marca ocupa lo que ocupa su texto, cuyo tracking final cuelga tras la T como en cualquier texto. Así el lockup no empuja a quien lo aloja. */ margin-inline-end: var(--brand-lockup-tracking); font-family: var(--public-font-sans); font-size: var(--brand-lockup-size); font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; } /* ========================================================= 3. LOGOMARK ========================================================= */ .brand-lockup__mark { position: relative; display: inline-grid; place-items: center; flex: 0 0 var(--brand-lockup-mark-size); inline-size: var(--brand-lockup-mark-size); block-size: var(--brand-lockup-mark-size); aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgb(var(--public-rgb-white) / .16); border-radius: var(--brand-lockup-mark-radius); background: radial-gradient(circle at 30% 18%, rgb(var(--public-rgb-white) / .36), transparent 32%), linear-gradient(135deg, var(--brand-lockup-accent), var(--brand-lockup-accent-end)); box-shadow: 0 14px 34px rgb(var(--public-rgb-blue-659) / .26), inset 0 1px 0 rgb(var(--public-rgb-white) / .22); } .brand-lockup__mark::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(45deg, transparent 42%, rgb(var(--public-rgb-white) / .28), transparent 58%); transform: translateX(-40%); } .brand-lockup__mark picture { display: block; } .brand-lockup__mark img { position: relative; z-index: 1; display: block; inline-size: var(--brand-lockup-logo-size); block-size: var(--brand-lockup-logo-size); aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 8px 16px rgb(var(--public-rgb-black) / .25)); } /* ========================================================= 4. COLUMNA DE TEXTO · wordmark y tagline Una pista: la del wordmark. Es la referencia geométrica del tagline. ========================================================= */ .brand-lockup__text { display: grid; gap: 2px; } .brand-lockup__wordmark { display: flex; align-items: baseline; margin-inline-end: calc(-1 * var(--brand-lockup-tracking)); font-weight: 800; letter-spacing: var(--brand-lockup-tracking); } .brand-lockup__wordmark strong { color: var(--brand-lockup-accent); font-weight: var(--weight-semibold, 600); } .brand-lockup__tagline { display: var(--brand-lockup-tagline-display); justify-content: space-between; contain: inline-size; color: var(--brand-lockup-tagline-ink); font-size: calc(var(--brand-lockup-tagline-scale) * 1em); font-weight: 700; letter-spacing: 0; text-transform: uppercase; white-space: pre; } .brand-lockup__tagline > span { flex: none; } } @layer compositions { /* ========================================================= 5. TEMA CLARO El tema efectivo (/src/preboot/theme.js), igual en la portada que en un documento estático: el logomark se asienta sobre fondo claro. ========================================================= */ html:is([data-theme="light"], .theme-light) .brand-lockup__mark { border-color: rgb(var(--public-rgb-blue-659) / .18); box-shadow: 0 12px 30px rgb(var(--public-rgb-blue-659) / .20), inset 0 1px 0 rgb(var(--public-rgb-white) / .34); } html:is([data-theme="light"], .theme-light) .brand-lockup__mark img { filter: drop-shadow(0 7px 12px rgb(var(--public-rgb-blue-331) / .15)); } }