/* ═══════════════════════════════════════════════════════════════════ ROC · SISTEMA DE DISEÑO · v1.1 · 30/07/2026 ------------------------------------------------------------------- ESTE ES EL UNICO SITIO DONDE SE DEFINEN LOS COLORES Y TIPOGRAFIAS. Antes cada una de las 20 paginas llevaba su propia copia, y por eso habia 7 rojos, 6 nombres para 3 tipografias y dos paginas usando AZUL como color de marca. Cambiar el rojo eran 20 archivos. Ahora es una linea, aqui. COMO FUNCIONA Se carga DESPUES de los estilos de cada pagina, asi que estos valores mandan. Los tonos elegidos son los que ya usabas mas, para que casi nada cambie de aspecto: solo se corrigen los que desafinaban. PARA DESACTIVARLO Borra la linea de las paginas. Todo vuelve a como estaba. CONTRASTE Todos los pares texto/fondo estan medidos y cumplen el minimo de 4.5 que se considera legible. Los valores medidos van anotados. Antes --muted daba 4.12 (por debajo del minimo) en las 610 veces que se usa. Ahora da 6.54. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 1 · MARCA · cambia estas dos lineas y cambia toda la web ═══════════════════════════════════════════════════════════════════ */ :root { --roc-red: #e11d48; /* EL rojo de ROC. El unico. */ --roc-red-hover: #f02753; /* al pasar el raton por encima */ --roc-red-press: #b8163a; /* al pulsar */ /* El rojo de marca da 4.18 de contraste sobre fondo oscuro: vale para fondos de boton, iconos y titulos grandes, pero NO para texto pequeño. Para eso esta esta version aclarada, mismo tono (347 grados), que da 5.26. */ --roc-red-onDark: #e84a6d; /* ═════════════════════════════════════════════════════════════════ 2 · TIPOGRAFIAS · dos, no seis ----------------------------------------------------------------- RAJDHANI para numeros, dorsales, tiempos y titulos. Tiene aire de cronometro y le da caracter de motorsport. INTER para todo el texto corrido. Legible y neutra. ═══════════════════════════════════════════════════════════════ */ --font-display: 'Rajdhani', 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace; /* Alias de los nombres que ya usan tus paginas. No los borres: son los que hacen que las 20 paginas apunten al mismo sitio. */ --font-disp: var(--font-display); --font-head: var(--font-display); --font-body: var(--font-ui); --font-num: var(--font-display); /* ═════════════════════════════════════════════════════════════════ 3 · ESCALAS · para que los margenes no sean a ojo ═══════════════════════════════════════════════════════════════ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-full: 999px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 44px; --t-fast: .15s ease; --t-med: .25s cubic-bezier(.22,.8,.3,1); } /* ═══════════════════════════════════════════════════════════════════ 4 · TEMA OSCURO (el de por defecto) Contrastes medidos sobre el fondo #080c10 ═══════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { --bg: #080c10; --bg-solid: #080c10; --panel: #0d1117; --panel-2: #111820; --sidebar: #0d1117; --text: #e8edf2; /* 16.65 */ --muted: #8b96a5; /* 6.54 (antes 4.12 - no llegaba) */ --text-muted: #8b96a5; --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.14); --panel-border: rgba(255,255,255,.08); --hover: rgba(255,255,255,.05); --shadow: 0 6px 18px rgba(0,0,0,.35); --accent: var(--roc-red); --accent-text: var(--roc-red-onDark); /* CORREGIDO v1.1 · --badge NO es un acento: es el FONDO de las etiquetas. championships.html hace: .mh-meta { color: var(--accent); background: var(--badge); } Al ponerlo en rojo quedaba texto rojo sobre fondo rojo y la fecha de la carrera era ilegible. Devuelto a su valor. --accent-2 tambien se ha quitado de este archivo: en tus paginas es un NARANJA (#ff6b35) para degradados, no un rojo. */ --badge: #0b1220; --badgeText: #ffffff; /* Semanticos: NO son el rojo de marca. Un DNF y el logo no deben compartir color: si comparten, ninguno de los dos comunica. */ --err: #ef4444; /* 5.21 */ --danger: #ef4444; --ok: #10b981; /* 7.73 */ --success: #10b981; --warn: #f59e0b; /* 9.14 */ --gold: #fbbf24; /* 11.75 */ --info: #3b82f6; /* 5.33 - informativo, NO acento de marca */ } /* ═══════════════════════════════════════════════════════════════════ 5 · TEMA CLARO Sobre blanco hacen falta tonos mas oscuros: los mismos colores del tema oscuro NO se leen aqui. #10b981 daba 2.54 y #f59e0b 2.15. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --bg: #f7f9fc; --bg-solid: #f7f9fc; --panel: #ffffff; --panel-2: #f1f5f9; --sidebar: #ffffff; --text: #1a202c; /* 16.32 */ --muted: #5a6a7a; /* 5.56 */ --text-muted: #5a6a7a; --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.16); --panel-border: rgba(0,0,0,.10); --hover: rgba(0,0,0,.04); --shadow: 0 8px 20px rgba(15,23,42,.08); --accent: #c2113a; /* 6.11 - el rojo de marca oscurecido */ --accent-text: #c2113a; --badge: #f1f5f9; /* fondo de etiqueta, no acento */ --badgeText: #1e293b; --err: #d32020; /* 5.25 */ --danger: #d32020; --ok: #0f6f4d; /* 6.17 */ --success: #0f6f4d; --warn: #8a5a00; /* 5.93 */ --gold: #8a5a00; --info: #1d4ed8; } /* ═══════════════════════════════════════════════════════════════════ 6 · UTILIDADES · clases sueltas para el trabajo nuevo Empiezan por roc- para no chocar con nada tuyo. ═══════════════════════════════════════════════════════════════════ */ /* Numeros y tiempos: cifras de ancho fijo para que las columnas queden alineadas. En una tabla de tiempos esto se nota mucho. */ .roc-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .02em; } /* Dorsal de piloto. En automovilismo el numero ES la identidad: merece peso visual, no ser la nota al pie de la tarjeta. */ .roc-dorsal { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); letter-spacing: -.02em; line-height: 1; } /* Titulo de seccion */ .roc-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; color: var(--text); } /* Etiqueta pequeña sobre un titulo */ .roc-eyebrow { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-text); } /* Foco visible con el teclado. Ahora mismo no hay ninguno en toda la web: quien navega con tabulador no sabe donde esta. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-sm); } /* Respetar a quien pide menos animacion en su sistema operativo */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══════════════════════════════════════════════════════════════════ 7 · CORRECCIONES PUNTUALES Reglas concretas para resolver un problema de legibilidad sin tener que editar la pagina. Cada una con su motivo. ═══════════════════════════════════════════════════════════════════ */ /* championships.html · pildora de fecha y duracion de la carrera. Usa color:var(--accent) sobre background:var(--badge). El rojo de marca sobre el fondo oscuro de etiqueta da 3.99 de contraste, por debajo del minimo de 4.5. Con la variante aclarada sube a 5.02. */ .mh-meta { color: var(--accent-text); }