/* ============================================================================= TOKENS DE MARCA — SABER INVESTIGAR ----------------------------------------------------------------------------- Cliente: Saber Investigar (saberinvestigar.com) Plataforma de formacion e investigacion academica Dra. Jacqueline Hurtado de Barrera Proyecto: Migracion a sistema propio · Concepto Creativo CA · 2026 Contrato completo de nombres en docs/TOKENS.md. Paleta de cuatro colores, heredada del sitio en produccion: · Teal #00b2bf → color de marca. Blobs, fondos de seccion, filetes, iconos, fondos de CTA. NUNCA texto sobre blanco. · Naranja #F47C20 → acento y accion. Botones primarios rellenos, destacados dentro de titular sobre fondo oscuro. NUNCA texto sobre blanco. · Navy #0f2d3d → el "negro" de esta marca. Texto y secciones oscuras. · Niebla #f0f2f5 → fondo de secciones alternas. Las secciones oscuras NO llevan clases propias: se resuelven con los modificadores del chasis .cc-section--dark y .cc-section--tinted. NO renombrar ni eliminar ningun token: el chasis los consume por nombre. ============================================================================= */ :root { /* ---------- PRIMITIVOS DE MARCA ---------- Un bloque NUNCA los usa directamente. Existen para que cambiar la marca sea editar estas lineas y nada mas. */ --cc-c-teal: #00b2bf; /* teal de marca. Superficie, no texto */ --cc-c-teal-deep: #007d87; /* teal legible como texto sobre blanco */ --cc-c-orange: #f47c20; /* naranja de accion. Superficie, no texto */ --cc-c-orange-deep: #b85708; /* naranja legible como texto sobre blanco */ --cc-c-navy: #0f2d3d; /* el oscuro de la marca */ --cc-c-mist: #f0f2f5; /* gris frio de secciones alternas */ --cc-c-white: #ffffff; /* ---------- COLOR ---------- */ --cc-bg: var(--cc-c-white); --cc-bg-alt: var(--cc-c-mist); --cc-surface: var(--cc-c-white); --cc-ink: var(--cc-c-navy); --cc-ink-soft: color-mix(in srgb, var(--cc-c-navy) 70%, var(--cc-c-white)); --cc-ink-inverse: var(--cc-c-white); --cc-brand: var(--cc-c-teal); --cc-brand-2: var(--cc-c-teal-deep); --cc-accent: var(--cc-c-orange); --cc-accent-2: var(--cc-c-orange-deep); --cc-line: color-mix(in srgb, var(--cc-c-navy) 12%, transparent); --cc-overlay: color-mix(in srgb, var(--cc-c-navy) 62%, transparent); /* NOTA DE CONTRASTE — medida, no estimada. Esta es la regla que mas se incumple en este sitio hoy y la razon de que existan brand-2 y accent-2. SOBRE FONDO CLARO (--cc-bg #ffffff): --cc-ink #0f2d3d → 14.2:1 todo OK --cc-ink-soft (~#576c77) → 4.8:1 texto secundario OK, incluido 11px --cc-brand-2 #007d87 → 4.90:1 texto, enlaces y antetitulos OK --cc-accent-2 #b85708 → 4.77:1 texto, enlaces y antetitulos OK ILEGIBLES COMO TEXTO SOBRE BLANCO. Superficie, icono, filete y borde: --cc-brand #00b2bf → 2.59:1 --cc-accent #f47c20 → 2.71:1 SOBRE FONDO OSCURO: blanco sobre --cc-brand (#00b2bf) → 3.07:1 Suficiente para titulares de 24px o mas en peso 700+. Para parrafo sobre teal, el texto va en --cc-ink, no en blanco. blanco sobre --cc-ink (#0f2d3d) → 14.2:1 todo OK --cc-accent sobre --cc-ink → 5.25:1 el naranja SI es texto aqui Esto no es preferencia estetica. El publico lee tesis y metodologia en pantalla, buena parte desde el movil. */ /* ---------- TIPOGRAFIA ---------- Una sola familia, Inter, en tres pesos. El caracter del sitio no lo da la fuente sino el contraste de peso: 800 en titulares contra 400 en cuerpo. Auto-hospedada: cero peticiones a Google. */ --cc-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cc-weight-display: 800; --cc-weight-body: 400; --cc-weight-ui: 600; /* botones, antetitulos, etiquetas */ --cc-tracking-display: -0.01em; --cc-leading-display: 1.18; --cc-leading-body: 1.7; /* Escala fluida. Los extremos salen del sitio en produccion: el H1 del hero va de 30 a 50px y los H2 de seccion de 28 a 44px. */ --cc-text-xs: clamp(0.6875rem, 0.66rem + 0.10vw, 0.75rem); /* 11 → 12 */ --cc-text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13 → 14 */ --cc-text-base: clamp(0.96875rem, 0.94rem + 0.13vw, 1.0625rem); /* 15.5 → 17 */ --cc-text-lg: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17 → 19 */ --cc-text-xl: clamp(1.1875rem, 1.10rem + 0.38vw, 1.375rem); /* 19 → 22 */ --cc-text-2xl: clamp(1.375rem, 1.24rem + 0.60vw, 1.75rem); /* 22 → 28 */ --cc-text-3xl: clamp(1.625rem, 1.42rem + 0.92vw, 2.25rem); /* 26 → 36 */ --cc-text-4xl: clamp(1.75rem, 1.40rem + 1.56vw, 2.75rem); /* 28 → 44 */ --cc-text-5xl: clamp(1.875rem, 1.42rem + 2.03vw, 3.125rem); /* 30 → 50 */ --cc-text-6xl: clamp(2.25rem, 1.56rem + 3.13vw, 4rem); /* 36 → 64 */ /* ---------- FORMA ---------- Dos radios muy distintos conviviendo, y es a proposito: el boton es compacto (8px) y la tarjeta es generosa (20px). Ese contraste es lo que hace que las tarjetas de curso se lean como objetos y los botones como acciones. */ --cc-radius-sm: 8px; --cc-radius: 14px; --cc-radius-lg: 20px; --cc-radius-pill: 999px; --cc-border-width: 1px; /* ---------- ELEVACION ---------- Tintadas con el navy, nunca negro puro. Dos capas: un contacto corto que define el borde y una difusion larga que da altura. */ --cc-shadow-sm: 0 1px 2px -1px color-mix(in srgb, var(--cc-c-navy) 10%, transparent), 0 2px 12px -2px color-mix(in srgb, var(--cc-c-navy) 8%, transparent); --cc-shadow: 0 2px 6px -2px color-mix(in srgb, var(--cc-c-navy) 10%, transparent), 0 8px 28px -4px color-mix(in srgb, var(--cc-c-navy) 12%, transparent); --cc-shadow-lg: 0 4px 10px -4px color-mix(in srgb, var(--cc-c-navy) 12%, transparent), 0 20px 48px -8px color-mix(in srgb, var(--cc-c-navy) 16%, transparent); /* Sombra de accion: la del boton naranja. Tintada con el acento, no con el navy, porque sobre blanco una sombra fria bajo un boton calido se ve sucia. */ --cc-shadow-action: 0 4px 16px color-mix(in srgb, var(--cc-c-orange) 30%, transparent); --cc-shadow-action-hover: 0 8px 24px color-mix(in srgb, var(--cc-c-orange) 45%, transparent); /* ---------- ESPACIADO ---------- Esta escala NO cambia por marca: es el ritmo del sistema. */ --cc-space-unit: 8px; --cc-space-1: calc(var(--cc-space-unit) * 0.5); /* 4 */ --cc-space-2: var(--cc-space-unit); /* 8 */ --cc-space-3: calc(var(--cc-space-unit) * 1.5); /* 12 */ --cc-space-4: calc(var(--cc-space-unit) * 2); /* 16 */ --cc-space-5: calc(var(--cc-space-unit) * 3); /* 24 */ --cc-space-6: calc(var(--cc-space-unit) * 4); /* 32 */ --cc-space-8: calc(var(--cc-space-unit) * 5); /* 40 */ --cc-space-10: calc(var(--cc-space-unit) * 6); /* 48 */ --cc-space-12: calc(var(--cc-space-unit) * 8); /* 64 */ --cc-space-16: calc(var(--cc-space-unit) * 11); /* 88 */ --cc-container: 1300px; --cc-gutter: 24px; --cc-section-y: clamp(56px, 7vw, 88px); /* ---------- MOVIMIENTO ---------- Personalidad: media. Los valores salen del fadeUp del sitio actual (0.55s, 22px), redondeados al contrato. */ --cc-ease: cubic-bezier(0.4, 0, 0.2, 1); --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cc-dur-fast: 200ms; --cc-dur: 560ms; --cc-dur-slow: 800ms; --cc-reveal-y: 24px; --cc-reveal-stagger: 90ms; /* ---------- BREAKPOINTS ---------- CSS no admite var() dentro de @media: chassis.css repite estos valores literalmente. Si cambia uno aqui, cambia tambien alla. */ --cc-bp-sm: 480px; --cc-bp-md: 768px; --cc-bp-lg: 1024px; --cc-bp-xl: 1440px; /* ---------- EXTENSIONES DE ESTE PROYECTO ---------- Documentadas antes en docs/TOKENS.md, como manda el procedimiento. Son de esta instancia: el siguiente proyecto no las tendra. */ /* Filete de dos colores que abre las secciones de Cursos y Blog. El contrato no tiene ninguna ranura capaz de guardar un degradado: todos los tokens de color guardan color plano. DECORATIVO: nunca texto encima. */ --cc-gradient-brand: linear-gradient(90deg, var(--cc-c-teal) 0%, var(--cc-c-orange) 100%); --cc-gradient-brand-reverse: linear-gradient(90deg, var(--cc-c-orange) 0%, var(--cc-c-teal) 100%); } /* ============================================================================= REGLAS BASE DE MARCA Compiten de tu a tu con GeneratePress: misma especificidad, gana la ultima en cargar. Por eso functions.php encola este archivo con generate-style como dependencia. ============================================================================= */ body { font-family: var(--cc-font-body); font-size: var(--cc-text-base); font-weight: var(--cc-weight-body); line-height: var(--cc-leading-body); color: var(--cc-ink); background: var(--cc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: var(--cc-weight-display); line-height: var(--cc-leading-display); letter-spacing: var(--cc-tracking-display); color: var(--cc-ink); } h1 { font-size: var(--cc-text-5xl); } h2 { font-size: var(--cc-text-4xl); } h3 { font-size: var(--cc-text-2xl); } /* h4 baja a peso UI: a 19px el 800 de Inter empieza a verse apelmazado. */ h4 { font-size: var(--cc-text-lg); font-weight: 700; letter-spacing: 0; } a { color: var(--cc-brand-2); } /* El foco visible es requisito, no adorno: en este sitio se navega mucho con teclado desde el area de alumno. */ :focus-visible { outline: 2px solid var(--cc-brand-2); outline-offset: 2px; border-radius: var(--cc-radius-sm); } /* Quien pide menos movimiento, recibe menos movimiento. El motor del plugin ya lo respeta; esto cubre las animaciones propias de los bloques. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }