/* ============================================================================ Tipografía del Figma "Diseño SembraMedia" (branch 5-8-26-figma) [DEV, capa reversible — quitar el de base.html para sacarla entera] ---------------------------------------------------------------------------- Origen: MCP de Figma (fileKey LdhwgLNdhryS2eTaxDx2hU, página "Perfiles directorio"), leído directo del archivo el 2026-08-10 — no del SVG exportado (sin fuente/peso, ver design/figma-review-2026-08-05.md). Nodos citados por data-node-id para volver a verificar si el Figma cambia. Este archivo NO copia los px literales del Figma 1:1. Revisión de diseño (agente visual-designer, destilado-maestro 12 leyes) encontró que el sitio YA TIENE una escala tipográfica real (fluida, clamp()) en oasis/src/sass/base/_globals.scss (--fs-xs/small/body/body-lg/h4/h3/h2/h1) que el Figma no usa (usa px sueltos: 10/12/13/14/18/20/28/40, sin ratio único — Ley 1: "sistema > gusto", 8 tamaños sin proporción común es la firma amateur, no una decisión mía). Cada tamaño del Figma se mapeó al token más cercano de la escala YA EXISTENTE en vez de sumar un valor suelto más — ver decisiones/justificativos completos en design/decisiones-tipografia-figma-2026-08-10.md (incluye lo que se le va a preguntar a Carol, no asumido unilateralmente). SOMBRAS: confirmado que la card flotante sobre el mapa (node 4:191) NO tiene ninguna clase de shadow/blur — coincide con el grep sobre los 10 SVG del review anterior. Flat a propósito, nada que aplicar acá. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { /* Badge (Media outlets/Creator) y chips (Cultura/Economía/Género). CORRECCIÓN 2026-08-12 (Julián: "el chip está claramente mal con respecto al spacing del Figma"). El token `--fs-xs` es FLUIDO (11px→13px) y en desktop rendía su TECHO de 13px contra los 10px del Figma: +30% de tamaño de letra, que arrastraba alto de caja y padding — el badge medía 32.2px de alto contra los 21px del diseño (+53%). Es el MISMO error que el review de Fable ya había cazado en el excerpt de card (usar el token fluido donde el diseño pide un valor fijo, ver --figma-card-body-font abajo); acá se repitió. Se fija en 11px: es el piso real de la escala del sitio (ningún texto UI baja de ahí) y el argumento de legibilidad del comentario anterior se sostiene — lo que NO se sostenía era rendir 13px. Medido en el archivo VIVO, no en los PNG viejos: rect del badge node 4:671 = 88×21, radius 7, borde 0.5 inside; texto node 4:672 = Chivo 10px, line-height 15.6. */ --figma-badge-font: 400 11px / 1.4 'Chivo', Arial, Helvetica, sans-serif; /* Peso: el Figma usa Chivo Light (300) en la card pero Regular (400) en el tooltip — mismo componente, dos pesos, inconsistencia del propio archivo (Ley 1). Se resuelve a Regular en los dos lugares: es el peso que YA carga el sitio (Light 300 requeriría sumar un peso nuevo solo para esto) y a 10-13px Light arriesga legibilidad real (trazos finos, más aún en pantallas no-retina) — ver justificativo completo en el doc de decisiones. Pregunta abierta para Carol: ¿cuál de los dos pesos era la intención? */ /* Título de card (nombre del medio) — Figma pide 20px Bold. node 4:436/4:468/4:507. CORRECCIÓN 2026-08-12 (review adversarial de Fable): el comentario anterior decía "calza EXACTO con el PISO de --fs-h4 (20-24px)" — cierto, pero el piso solo rinde a 375px de viewport; en desktop el clamp() rinde el TECHO, o sea **24px contra los 20px del diseño (+20%)**. Es el mismo bug del excerpt y del badge, tercera aparición. Se fija en 20px literal. */ --figma-card-title-font: 700 20px / 1.2 'Chivo', Arial, Helvetica, sans-serif; /* Cuerpo/excerpt de card — CORRECCIÓN (review Fable 2026-08-10): --fs-body rendía 18px en desktop (el techo del rango, no el piso), infladas contra el 14px fijo del Figma (node 4:439) — la card se veía notablemente más "gorda" que el diseño. Se fija en 14px literal en vez de usar el token fluido: acá la fidelidad al valor exacto pesa más que ganar fluidez. Line-height 1.6 (rango prosa Ley 2: 1.5-1.7). */ --figma-card-body-font: 400 14px / 1.6 'Chivo', Arial, Helvetica, sans-serif; --figma-card-body-color: #4F5459; /* Label y valor de campo (Location:/Year the organization started publishing:) — Figma 12px. node 4:444/4:450 (label) y 4:446/4:452 (valor). CORRECCIÓN 2026-08-12 (Fable): --fs-small rinde su techo de **14px en desktop** contra los 12px del diseño (+17%). Se fija en 12px literal. Los tokens --figma-card-label-color / --figma-card-value-color se ELIMINARON: no los consumía ningún var() (código muerto) y el #36C2F2 que declaraba el label quedó REFUTADO por el round 4 — ese cyan era de la composición ES; el color real de los labels lo pone el core. */ --figma-card-label-font: 700 12px / 1.4 'Chivo', Arial, Helvetica, sans-serif; --figma-card-value-font: 400 12px / 1.45 'Chivo', Arial, Helvetica, sans-serif; /* Tooltip del mapa: título (nombre del medio) — Figma pide 18px Bold con line-height 19px (ratio 1.06, por debajo del rango de headings 1.1-1.3, Ley 2 — se siente apretado en 2 líneas con el subtítulo debajo). Se usa line-height 1.2 (dentro de rango). node 4:203. CORRECCIÓN 2026-08-12 (Fable): --fs-body-lg rendía 20px en desktop contra los 18px del diseño (+11%) — y encima el frame del tooltip en el Figma mide 500px mientras el tooltip real mide ~280px visibles, o sea que si algo sobraba era tamaño, no faltaba. Se fija en 18px literal. */ --figma-tooltip-title-font: 700 18px / 1.2 'Chivo', Arial, Helvetica, sans-serif; /* Tooltip: subtítulo (país/ciudad) — 13px calza con el techo de --fs-xs (11-13px). node 4:203. */ --figma-tooltip-subtitle-font: 400 var(--fs-xs) / 1.3 'Chivo', Arial, Helvetica, sans-serif; /* Tooltip: cuerpo — mismo token que el subtítulo, prosa corta → 1.5 (rango body Ley 2). Regular (ya lo era). node 4:204. */ --figma-tooltip-body-font: 400 var(--fs-xs) / 1.5 'Chivo', Arial, Helvetica, sans-serif; --figma-tooltip-body-color: #505050; /* Heading de sección del sidebar ("Global directory"/"Revenue sources") — 28px Bold. node 12:445/12:460. CORRECCIÓN 2026-08-12 (Fable): mismo caso, --fs-h2 rendía 32px en desktop contra 28 (+14%). Fijado. */ --figma-sidebar-heading-font: 700 28px / 1.1 'Chivo', Arial, Helvetica, sans-serif; /* Número grande del contador — Figma 40px. node 12:449. --fs-h1 rendía 42px (+5%, el desvío más chico de la familia, pero desvío igual). Fijado. Line-height 1 (número aislado, no prosa — no aplica el rango de Ley 2). Color: se unifica a #509ECF. El valor medido es #549ECF, a un dígito de distancia del token que el sitio ya usa — mismo criterio que se aplicó al accent del radio del filtro (profile-type.css), que antes no se seguía acá. */ --figma-sidebar-count-font: 700 40px / 1 'Chivo', Arial, Helvetica, sans-serif; --figma-sidebar-count-color: #509ECF; /* Label ("profiles selected") y párrafo ("Learn more...") del sidebar: el Figma los pide en Inter — Y ESO YA ES LA CONVENCIÓN DEL SITIO (oasis/src/sass/pages/_homepage.scss usa var(--po-font-inter) en .label/.paragraph desde antes de este Figma). No es una inconsistencia de Carol, es su archivo siguiendo un sistema pre-existente que el sitio nunca terminó de cargar (Inter no tenía @font-face — se agrega arriba). No se overridea acá: el core ya usa var(--fs-body), que en desktop rinde 18px = exactamente lo que pide el Figma, y además es fluido. */ } /* ---------- Aplicación a selectores reales (solo dentro de la home/directorio) ---------- */ /* .pt-badge SIN scope de body.homepage a propósito (corrección Fable): es un componente compartido entre la home (cards+tooltip) Y el perfil individual (medium_page.html no tiene body_class, "body.homepage" nunca matchea ahí — el badge del perfil se quedaba sin la tipografía correcta). */ .pt-badge { font: var(--figma-badge-font); letter-spacing: normal; } body.homepage .card .stat__value .stat__colors, body.homepage .card .stat__value [class*="stat__colors"] { font: var(--figma-badge-font) !important; } body.homepage .card__title { font: var(--figma-card-title-font); /* Color: se REVIRTIÓ el cyan #36C2F2 (round 4) — ese color salía de las "Tarjetas SembraMedia" (composición ES del Figma). La referencia correcta para ESTE sitio es la composición EN "Directorio Project Oasis" (node 4:2894, "Tarjetas Project Oasis"), cuyos títulos usan el índigo que el core ya tenía (--po-color-blue #31519F) — no pisarlo. */ /* Fix real, no cosmético: probado con los nombres de medio más largos del dataset real (hasta 110 caracteres) — sin este límite el título crece a ~120px y rompe la altura pareja de la grilla de cards (Ley 5: contenido real primero, el Figma solo usa "Medio.ejemplo"). 2 líneas + ellipsis. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } body.homepage .card__excerpt { font: var(--figma-card-body-font); color: var(--figma-card-body-color); } /* Labels/valores de campo (Ubicación:/Año) — solo tamaño/peso; el COLOR se revirtió (round 4): el cyan venía de las cards ES; las "Tarjetas Project Oasis" (EN, la referencia de este sitio) usan el índigo del core. Los divisores internos también se revirtieron al gris claro original del core por el mismo motivo (el #4F5459 oscuro salía de las cards ES). */ body.homepage .card .stat__label { font: var(--figma-card-label-font) !important; } body.homepage .card .stat__value { font: var(--figma-card-value-font) !important; } /* Tooltip: el selector core (.homepage__main .cardtooltip &__header &__title, compilado a una cadena de varias clases anidadas) tiene más especificidad real que la nuestra — sin !important el font-family/line-height/color de acá pierden el cascade en silencio (detectado en el review de Fable 2026-08-10, confirmado con getComputedStyle real, no supuesto). */ body.homepage .cardtooltip__header__title { font: var(--figma-tooltip-title-font) !important; } body.homepage .cardtooltip__header__subtitle { font: var(--figma-tooltip-subtitle-font) !important; } body.homepage .cardtooltip__row { font: var(--figma-tooltip-body-font) !important; color: var(--figma-tooltip-body-color) !important; } /* Botón "view profile" del tooltip — alineado 2026-08-12 contra el Figma VIVO (node 4:189, muestreado a 244% de zoom): fill #2BA0D4 y pill totalmente redondeado. El sitio tenía #509ECF y radius 8px. Nota: este #2BA0D4 es el MISMO azul del radio seleccionado del filtro de categoría en la composición EN — o sea es un acento consistente del diseño, no un valor suelto. ⚠️ A11y: blanco sobre #2BA0D4 da 2.97:1 (el estado anterior daba 2.94:1 — igual de bajo, no es una regresión); el texto de 13px pediría 4.5:1. Anotado como pregunta para Carol, no se corrige unilateralmente. */ body.homepage .cardtooltip__actions .link { background: #2BA0D4 !important; border-radius: 999px !important; } body.homepage .sidebar__header h3 { font: var(--figma-sidebar-heading-font); } body.homepage .results-counter.number { font: var(--figma-sidebar-count-font); color: var(--figma-sidebar-count-color); } /* ---------- Geometría (radius/borde) — gap-scan 2026-08-10, mismo MCP ---------- El sitio ya tenía radius/border para card y sidebar, pero con valores propios (pre-Figma). Corrección puntual a lo que el MCP devuelve: */ /* Card: borde actual #E0E0E0 (gris clarito, casi invisible) vs Figma #4D4D4D (node 4:435/4:461, gris marcado). radius ya coincidía (10px). */ body.homepage .card { border-color: #4D4D4D; } /* Sidebar: el header interno ya tenía su radius 8px correcto (coincide con el Figma). Lo que faltaba es el borde exterior de TODA la caja — node 12:442, "Border" — 1px solid #509ECF + radius 15px envolviendo header+contenido. */ body.homepage .homepage__main__sidebar.sidebar { border: 1px solid #509ECF; border-radius: 15px; overflow: hidden; } /* ---------- Barra de búsqueda/filtro — REVERTIDA (round 4, 2026-08-10) ---------- Los overrides que vivían acá (borde 2px #36C2F2 en inputs/selects, chevron custom cyan, botón "Advanced search filters" en cyan, labels "Search:/Filter:" y contador de resultados sobre la fila) salían de la composición EN ESPAÑOL del Figma (Frame 2608099 / node 4:2346). La referencia correcta para este sitio es la composición EN INGLÉS "Directorio Project Oasis" (node 4:2894) — y en ese frame la fila de inputs NO es un rediseño: es un screenshot del sitio ACTUAL pegado como imagen en el mockup (verificado por metadata: el frame no contiene ningún nodo de input/select/botón). Es decir, Carol solo rediseñó la fila de Category — los inputs/botón quedan COMO ESTÁN en el sitio. Se elimina todo el bloque; solo sobrevive la lupita del input de búsqueda (pedido explícito de Julián), que vive en design-experiments.css. */ /* Heading "Media profiles" sobre la grilla — no existe en el Figma (la composición va directo de filtros a cards) y Julián pidió sacarlo (round 4). */ body.homepage h3.h3-title.text-indigo { display: none; }