/* ============================================================ HRZN · SISTEMA TIPOGRAFICO Aplica la guia tipografica v1.0 sobre el cockpit de FinOps. ------------------------------------------------------------ Vive en su propio archivo a proposito: la version anterior de este trabajo estaba dentro de horizon-skin.css y se perdio entera cuando esa hoja se regenero. Aca sobrevive. SOLO TIPOGRAFIA: tamanios, pesos, tracking, interlineado y cifras tabulares. Ningun color. Asi compone con horizon-dark.css en vez de pelearle — un archivo de tipografia que ademas pinta es un archivo que rompe el tema oscuro. Se enlaza ULTIMO, despues de horizon-dark.css. ============================================================ */ :root{ /* ocho pasos, uno por trabajo */ /* pedido: hero mas grande. El manual fija Display en 44; esto lo excede a proposito hasta 56. Va en clamp porque a 56px fijos la cifra del hero se partia en dos lineas por debajo de ~900px de ancho: "$55 / .30 / left this month" apilado. Con clamp escala en vez de romper. */ --t-display: clamp(44px, 5.2vw, 68px); --t-page: clamp(30px, 3.2vw, 42px); /* sigue al display */ --t-section: 22px; --t-card: 18px; --t-body: 16px; /* contextos de lectura */ --t-dense: 14px; /* tablas y paneles · PISO del sistema */ /* Sube de 12 a 14. El manual fija Label en 700/12 con tracking 14%, pero el dueno pidio tres veces que las etiquetas fueran mas grandes y esa restriccion manda. A 14 la etiqueta iguala al cuerpo denso en tamanio y se distingue por otras tres cosas a la vez: mayuscula, peso 700 y tracking del 14%. Sigue leyendose como etiqueta, no como cuerpo. */ --t-label: 14px; --t-data: 40px; /* tracking de mayusculas · calibrado contra cloudbeach.com, que usa 0.040em de forma consistente en 28, 32, 34 y 48px. Mi propuesta original de 0.012em resulto ser mas apretada que lo que la marca ya usa en su propio sitio. */ --tr-display: .040em; --tr-page: .040em; --tr-section: .055em; --tr-label: .140em; --tr-micro: .160em; /* las caps no tienen descendentes: menos interlinea que la minuscula */ --lh-display: 1.00; --lh-section: 1.15; --lh-card: 1.30; --lh-body: 1.60; --lh-dense: 1.55; } /* ── 1 · UTILIDADES DE TAILWIND SOBRE LOS OCHO PASOS ────────── El cockpit pinta con utilidades horneadas en el markup, asi que la unica forma de meterlas en la escala es mapearlas una por una. */ /* las utilidades sub-14 (text-xs, text-[10px], text-[11px]…) no se mapean aca: las levanta el piso de la seccion 3bis, que necesita mas especificidad para ganarle a horizon-skin.css */ .finops-dashboard .text-xs { line-height: var(--lh-dense) !important; } .finops-dashboard .text-sm { font-size: var(--t-body) !important; line-height: var(--lh-body) !important; } .finops-dashboard .text-base { font-size: var(--t-body) !important; line-height: var(--lh-body) !important; } .finops-dashboard .text-lg { font-size: var(--t-card) !important; line-height: var(--lh-card) !important; } .finops-dashboard .text-2xl { font-size: 26px !important; } .finops-dashboard .text-3xl { font-size: var(--t-data) !important; } .finops-dashboard .text-4xl { font-size: var(--t-display) !important; } /* ── 2 · TITULOS DE SECCION · caps con su tracking ──────────── */ .finops-dashboard .chartplotter-titlebar h2, .finops-dashboard .spend-radar-card h2, .finops-dashboard .systems-load-panel h2, .finops-dashboard .budgets-panel h2, .finops-dashboard .space-y-4 > div > h2 { font-size: var(--t-section) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--tr-section) !important; line-height: var(--lh-section) !important; } /* ── 3 · TITULOS DE CARD · 18px, SIN caps ───────────────────── Son frases, no etiquetas: la mayuscula ahi cuesta comprension sin dar jerarquia. */ .finops-dashboard .systems-load-card h3, .finops-dashboard .space-y-4 h3 { font-size: var(--t-card) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -.005em !important; line-height: var(--lh-card) !important; } /* ── 3bis · PISO DE 14px ────────────────────────────────────── El cockpit tenia 164 nodos de texto bajo 14px repartidos en ~40 componentes. "El dueno no quiere textos chicos." Medido en vivo: un piso global (`:where(...)` sobre todas las etiquetas) NO sirve — arrastra hacia abajo los h2 cuyo texto vive en un interno y las cifras de 26px que heredan del contenedor. Se probaron cuatro variantes y todas cambiaban unas regresiones por otras. Lo que si funciona, y es lo que queda: subir POR UTILIDAD DE TAMANIO — que es exactamente donde vive lo chico — y reservar el barrido de elementos sin clase a los componentes que no contienen cifras grandes que puedan heredar de mas. La raiz va repetida (.finops-dashboard x3) a proposito: las reglas de horizon-skin.css son del tipo `.componente tag`, especificidad (0,1,1), y le ganan a una raiz simple aunque lleve !important. */ .finops-dashboard.finops-dashboard.finops-dashboard :is( .text-xs, .text-\[9\.5px\], .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-\[13px\] ):not(option) { font-size: var(--t-dense) !important; } /* componentes de prosa: suben tambien lo que no declara tamanio */ .finops-dashboard.finops-dashboard.finops-dashboard :is( .horizon-bot-shell, .horizon-bot-launcher-copy, .radar-blip-tooltip, .radar-signal-copy, .radar-axis-caption, .radar-review-cta, .budget-row-actions, .finops-empty, .live-state, .finops-feedback-strip, .helm-status-copy, .finops-range-switch, .systems-load-footer, /* estos cuatro se sumaron despues: su texto son spans SIN clase que heredaban 11px del contenedor, asi que el piso por utilidad de la seccion 3bis no los alcanzaba. Aqui caen "SPENT · MTD", "MONTH-END FORECAST", "$146 above cap", "4.1% budget drift" y "$55.30 remaining". */ .chartplotter-overview, .chartplotter-latest, .chartplotter-course, .navigation-helm-bar ), .finops-dashboard.finops-dashboard.finops-dashboard :is( .horizon-bot-shell, .horizon-bot-launcher-copy, .radar-blip-tooltip, .radar-signal-copy, .radar-axis-caption, .radar-review-cta, .budget-row-actions, .finops-empty, .live-state, .finops-feedback-strip, .helm-status-copy, .finops-range-switch, .systems-load-footer, /* estos cuatro se sumaron despues: su texto son spans SIN clase que heredaban 11px del contenedor, asi que el piso por utilidad de la seccion 3bis no los alcanzaba. Aqui caen "SPENT · MTD", "MONTH-END FORECAST", "$146 above cap", "4.1% budget drift" y "$55.30 remaining". */ .chartplotter-overview, .chartplotter-latest, .chartplotter-course, .navigation-helm-bar ) :where(p,span,small,b,strong,em,td,li,div,a,button,time,label) { font-size: var(--t-dense) !important; } /* ── 4 · ETIQUETAS · el unico 12px permitido, siempre trackeado ── Va con cuatro raices para quedar por encima del piso de tres. */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard :is( .finops-hero-signals, .chartplotter-kicker, .helm-drift-label, .helm-status-title, .finops-filter-field > span, .finops-control-title strong, .finops-kpi span.text-xs.font-bold, .finops-kpi span.text-\[13px\] ), .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard :is( .finops-hero-signals, .chartplotter-kicker, .helm-drift-label, .helm-status-title, .finops-filter-field > span, .finops-control-title strong, .finops-kpi span.text-xs.font-bold, .finops-kpi span.text-\[13px\] ) :where(span, b, small, strong) { font-size: var(--t-label) !important; } /* las pildoras de estado ya vienen en caps desde el markup */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard [class*="rounded-full"][class*="text-[10px]"], .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard [class*="uppercase"][class*="text-[10px]"] { font-size: var(--t-label) !important; } /* si mide 12, tiene que estar en caps trackeadas — es la condicion que hace legible ese tamanio, no un adorno */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard :is( .chartplotter-kicker, .helm-drift-label, .helm-status-title, .finops-filter-field > span, .finops-control-title strong, .finops-kpi span.text-xs.font-bold, .finops-kpi span.text-\[13px\] ) { font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--tr-label) !important; line-height: 1.3 !important; } /* ── 5 · EL UNICO 11px AUTORIZADO ───────────────────────────── "Header labels are 11px tracked caps on the sunken fill — the only place a smaller-than-12 optical size is permitted, because tracked caps read larger than they measure." */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard .budgets-table thead th { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--tr-micro) !important; } /* ── 6 · PISO DE 14px EN LO QUE SE LEE PARA ACTUAR ─────────── Los links Edit/Details de la tabla son las acciones mas usadas del producto y venian en 12px: objetivo chico para el click y chico para leer. */ .finops-dashboard .budgets-table a, .finops-dashboard .budgets-table button, .finops-dashboard .budgets-table tbody td, .finops-dashboard .finops-filter-reset, .finops-dashboard .chartplotter-action, .finops-dashboard .chartplotter-edit, .finops-dashboard .finops-hero .z-10 button, .finops-dashboard .utility-pill .period-button, .finops-dashboard .utility-pill .period-button b { font-size: var(--t-dense) !important; } /* los tooltips y estados vacios se LEEN: nunca en 11 ni 12 */ .finops-dashboard .has-tooltip::after, .finops-dashboard .radar-signal-copy > span, .finops-dashboard .finops-empty, .finops-dashboard .finops-empty * { font-size: var(--t-dense) !important; line-height: var(--lh-dense) !important; letter-spacing: normal !important; text-transform: none !important; } /* ── 7 · LA CIFRA MANDA · proporcion etiqueta:cifra 3,3 : 1 ─── */ .finops-dashboard .finops-kpi--projected .text-3xl { font-size: var(--t-data) !important; } .finops-dashboard .finops-kpi--secondary .text-3xl, .finops-dashboard .finops-kpi--watch .text-3xl { font-size: clamp(28px, 2.9vw, var(--t-data)) !important; } .finops-dashboard .finops-kpi .text-3xl, .finops-dashboard .finops-hero .flex.items-baseline.space-x-1 > span { font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1 !important; } /* ── 8 · CIFRAS TABULARES POR CONTENEDOR ───────────────────── Poppins trae cifras proporcionales: el 1 es mas angosto que el 0 y las columnas bailan al actualizarse. Puesto en el contenedor, cualquier cifra nueva lo hereda sola. */ .finops-dashboard .finops-kpi, .finops-dashboard .budgets-table, .finops-dashboard .chartplotter-overview, .finops-dashboard .chartplotter-stage, .finops-dashboard .chartplotter-latest, .finops-dashboard .systems-load-card, .finops-dashboard .systems-load-footer, .finops-dashboard .spend-radar-card, .finops-dashboard .finops-spend-feed, .finops-dashboard .utility-pill { font-variant-numeric: tabular-nums; } /* la cifra del hero NO va tabular: en Poppins la figura tabular le da al punto decimal el ancho de un digito y abre un hueco visible ("$55 .30"). Tabular sirve para columnas que se actualizan, no para un numero unico que nunca se alinea con nada. */ .finops-dashboard .finops-hero .flex.items-baseline.space-x-1 { font-variant-numeric: normal; } /* ── 9 · IDENTIFICADORES DE MAQUINA EN MONO ────────────────── En Poppins el 1, la l y la I son casi identicas. */ /* ── 9 · LA MONO NO ES PARA DINERO ─────────────────────────── Auditado en vivo: 70 elementos de la pagina renderizaban en mono. De los 70, UNO tenia un machine string de verdad — la zona horaria "America/New_York". El resto era dinero ($43.76 left, $3,541.75), porcentajes (103%, 96.9% used), rotulos (SYSTEMS LOAD · LIVE TRACKING, MONTH STARTS, WHAT HAPPENS WHEN A BUDGET...) y prosa ("Sum of line budgets of"). El manual reserva la mono para machine strings: ARNs, IDs, nombres de modelo, keys. Nada de eso es dinero ni un rotulo. Peor: una version anterior de este archivo FORZABA la mono en .font-mono, o sea que yo estaba agravando el problema. Aqui la clase pasa a Poppins. Lo que si gana es `tabular-nums`, que es lo que la gente busca cuando alcanza la mono para una columna de cifras — y el manual lo pide en TODO numero. Para un machine string real queda .hz-machine, abajo. */ .finops-dashboard.finops-dashboard.finops-dashboard .font-mono { font-family: inherit !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; } .finops-dashboard .hz-machine, .finops-dashboard code, .finops-dashboard kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 13px !important; letter-spacing: 0 !important; } /* ── 10 · EXCEPCION GRAFICA · iniciales de avatar ───────────── No son texto que se lea: son insignias dentro de circulos de ancho fijo. A 12px se desbordan del circulo. */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard .viewers span { font-size: 9px !important; letter-spacing: 0 !important; } /* ── 11 · LA CIFRA DEL HERO ─────────────────────────────────── El markup parte el importe en tres dentro de un contenedor con `space-x-1`, que pone 4px de margen entre CADA hijo — tambien entre "$55" y ".30", que son un solo numero. Se leia "$55 .30". Y los tres tramos median 30px: la cifra no lideraba nada. Se paso a 44 / 28 -- el entero manda, los centavos y la frase acompanian. Acotado a .finops-hero — hay otros 3 contenedores con la misma clase utilitaria en la pagina que no deben cambiar. UNIFICADO. Los tres tramos pasan a --t-hero, el mismo token que usan los titulares de las otras diez pantallas. Esto DESHACE la jerarquia 44/28 del parrafo de arriba, a proposito: el pedido fue que el titular no distinga numero de letra, y aca el importe y los centavos son numero. Los dos tokens que estaban aca -- --t-display para el entero y --t-page para el resto -- son exactamente el par que el resto del producto tambien partia en dos. --t-hero es su punto medio, ya bajado a 40px. MEDIDO antes: 56.3px el entero contra 34.7px las palabras. POR QUE UN VALOR FIJO Y NO EL CLAMP: el cockpit se renderiza dentro de un iframe, y ahi `vw` es el ancho del IFRAME, no de la ventana. Con el mismo clamp que el resto, FinOps resolvia 33px mientras sus hermanas resolvian 40 -- medido. 40px fijo es lo que de verdad las iguala. El piso de 27px del clamp lo cubria el iframe angosto, que aca no se da: su ancho lo manda el area de contenido. Por que se corrige aca y no en hrzn-unify.css: estas reglas llevan `.finops-dashboard` repetido tres veces mas cuatro clases mas un pseudo, o sea (0,8,0) con !important. Igualar eso desde otra hoja era escalar una carrera de especificidad; esta hoja es la dueña de la tipografia de FinOps y la cargan solo finops.html y el cockpit. */ .finops-dashboard.finops-dashboard.finops-dashboard .finops-hero .flex.items-baseline.space-x-1 > :first-child { margin-right: 0 !important; font-size: 40px !important; letter-spacing: -.015em !important; } .finops-dashboard.finops-dashboard.finops-dashboard .finops-hero .flex.items-baseline.space-x-1 > :nth-child(2) { font-size: 40px !important; margin-right: .28em !important; } .finops-dashboard.finops-dashboard.finops-dashboard .finops-hero .flex.items-baseline.space-x-1 > :nth-child(3) { font-size: 40px !important; } /* ── 12 · LEYENDA DEL RADAR ─────────────────────────────────── Medido: a 14px la leyenda desbordaba su card (350px de contenido en 322px de caja). Son seis etiquetas de escala en una fila fija ("On course / <90% / Watch / 90-100%..."), no texto de lectura: entran en el token de etiqueta, 12px en caps trackeadas. */ .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard .radar-meaning-legend, .finops-dashboard.finops-dashboard.finops-dashboard.finops-dashboard .radar-meaning-legend :where(span,b,small,strong,div) { font-size: var(--t-label) !important; letter-spacing: 0 !important; /* medido: con tracking seguia excediendo 6px */ } /* ── 13 · SEGURO DE ENVOLTURA ───────────────────────────────── Subir el cuerpo de 11 a 14px agranda cada bloque de texto. En columnas angostas eso desbordaba la caja. `min-width:0` desarma el piso de min-content que traen los hijos de flex/grid. */ .finops-dashboard.finops-dashboard.finops-dashboard :where(p,span,div,td,li) { min-width: 0; overflow-wrap: break-word; } /* ── 14 · LAS CIFRAS DE LA TABLA DE BUDGETS ────────────────── El manual fija 14px para tablas (Dense body), y ahi se queda el texto. Pero las cifras se leian chicas por dos razones sumadas: venian en mono —que a igual cuerpo se ve mas chica y mas fina que Poppins— y compartian tamanio con las etiquetas de su propia fila. Arreglada la mono en la seccion 9, las cifras suben un paso de la escala, a 16px con peso 600. Medido: la tabla pasa de 702 a 710px de ancho y la fila de 92 a 95px de alto, sin desbordes nuevos — ya scrollea en horizontal por diseno dentro de .budgets-table-scroll. El handle es `.font-mono`, que en esta tabla marca exactamente las celdas de dato y deja fuera la prosa del resumen de abajo. */ /* nowrap: a 16px la columna de usage se quedaba corta y "102%" se partia en dos lineas ("102" / "%"). Una cifra partida no es una cifra. La tabla ya scrollea en horizontal, asi que no cortar es preferible a encoger. */ .finops-dashboard.finops-dashboard.finops-dashboard .budgets-table tbody .font-mono { font-size: 16px !important; font-weight: 600 !important; white-space: nowrap !important; } /* ── 15 · CONTROLES DE FORMULARIO ──────────────────────────── Medido: los tres selects del filtro ("All sources", "All categories", "All people") renderizaban a 10px. Era el texto mas chico de toda la pagina y encima en controles que se usan para operar el tablero. No los alcanzaba nada de lo anterior: un