/* Rodacumbres design tokens — extracted from claude design bundle. */ :root { /* El sitio es dark-mode forzado. Sin esto el browser pinta los form controls nativos (date picker, scrollbar, select dropdown) con temática light — el calendar-picker-indicator queda casi invisible sobre fondo oscuro y los popups del date input vienen en blanco. */ color-scheme: dark; /* ---------- CORE PALETTE ---------------------------------------------- */ /* Ink — the canvas is always near-black */ --rc-ink-0: #000000; /* pure black, hero bg */ --rc-ink-900: #0a0a0a; /* page bg */ --rc-ink-800: #141414; /* card / panel bg */ --rc-ink-700: #1f1f1f; /* raised card */ --rc-ink-600: #2a2a2a; /* hairline borders on dark */ --rc-ink-500: #3a3a3a; /* divider */ /* Bone — text on dark */ --rc-bone-0: #ffffff; --rc-bone-100: #f5f1ea; /* warm white, primary fg */ --rc-bone-300: #b8b2a6; /* secondary fg */ --rc-bone-500: #7a7468; /* tertiary / meta */ /* Naranja — primary accent, "lava" */ --rc-orange-300: #f4a96b; /* tint */ --rc-orange-400: #ee8c41; /* hover / glow */ --rc-orange-500: #e8742c; /* PRIMARY brand orange (from brief) */ --rc-orange-600: #c75d1c; /* pressed / deeper */ --rc-orange-700: #9c4513; /* darkest, on-light */ /* Verde petróleo — secondary accent (logo green) */ --rc-petrol-300: #4a7a6e; --rc-petrol-400: #36625a; --rc-petrol-500: #2a4a42; /* PRIMARY petrol (sampled from logo) */ --rc-petrol-600: #1f3832; --rc-petrol-700: #142621; /* ---------- Semantic — feedback / validation ------------------------- Cada color semántico tiene una rampa: tint claro (-300/-400), base (-500), profundo (-600), un tint translúcido para fondos (-tint) y un edge translúcido para bordes (-edge). Uso: • base → iconos + acentos de texto • tint → fondos suaves • edge → bordes Los alias sin sufijo (--rc-danger, --rc-success, --rc-warning, --rc-info) apuntan al -500 y existen para no romper consumidores previos. */ --rc-success-300: #7bd4a0; --rc-success-500: #4caf6f; --rc-success-600: #2f8a52; --rc-success-tint: rgba(76, 175, 111, 0.10); --rc-success-edge: rgba(76, 175, 111, 0.38); --rc-success: var(--rc-success-500); --rc-warning-300: #f6cc6b; --rc-warning-500: #f0b429; --rc-warning-600: #c69312; --rc-warning-tint: rgba(240, 180, 41, 0.10); --rc-warning-edge: rgba(240, 180, 41, 0.38); --rc-warning: var(--rc-warning-500); --rc-danger-300: #f08b95; --rc-danger-400: #ee5f6d; --rc-danger-500: #e63946; --rc-danger-600: #c11d2d; --rc-danger-tint: rgba(230, 57, 70, 0.10); --rc-danger-edge: rgba(230, 57, 70, 0.40); --rc-danger: var(--rc-danger-500); --rc-error: var(--rc-danger-500); --rc-info: var(--rc-petrol-400); --rc-info-tint: rgba(54, 98, 90, 0.16); --rc-info-edge: rgba(54, 98, 90, 0.48); /* ---------- Rellenos (fondo sólido con texto --rc-ink-0 encima) -------- El -500 de cada color sirve a la vez de texto/icono y de fondo de botón mientras el canvas es oscuro. En el tema de alto contraste (abajo) los -500 se oscurecen para leerse como texto sobre blanco, y entonces ya no sirven como fondo con texto negro: para eso están los -fill. Aquí valen lo mismo que el -500 (sin efecto en oscuro); el tema los separa. */ --rc-accent-fill: var(--rc-orange-500); --rc-accent-fill-hover: var(--rc-orange-400); --rc-accent-fill-press: var(--rc-orange-600); --rc-success-fill: var(--rc-success-500); --rc-warning-fill: var(--rc-warning-500); --rc-danger-fill: var(--rc-danger-500); /* ---------- ROLE TOKENS ---------------------------------------------- */ --rc-bg: var(--rc-ink-900); --rc-bg-elevated: var(--rc-ink-800); --rc-bg-raised: var(--rc-ink-700); --rc-fg: var(--rc-bone-100); --rc-fg-muted: var(--rc-bone-300); --rc-fg-faint: var(--rc-bone-500); --rc-accent: var(--rc-orange-500); --rc-accent-hover: var(--rc-orange-400); --rc-accent-press: var(--rc-orange-600); --rc-on-accent: var(--rc-ink-0); /* black ink on orange */ --rc-secondary: var(--rc-petrol-500); --rc-border: var(--rc-ink-600); --rc-border-strong: var(--rc-bone-500); /* ---------- TYPE FAMILIES -------------------------------------------- Type stack is a THREE-VOICE system: • A typewriter-stamp display (Special Elite, brand-licensed) used for race-card / dossier moments — eyebrows, hero lemas, ticket-style chrome. • A chunky poster face (Bowlby One) for H1/H2 — the loudest "shout". • A condensed sport face (Barlow Condensed) for H3–H5, UI labels. • Inter for body. JetBrains Mono for race numbers / data. The grit comes from Special Elite's worn typewriter letterforms, not from a wet-paint script. Pair Special Elite with high contrast and lots of uppercase — it reads as "field-stamped" rather than corporate-clean. ----------------------------------------------------------------------- */ --rc-font-spray: "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace; --rc-font-display: "Bowlby One", "Impact", system-ui, sans-serif; --rc-font-headline:"Barlow Condensed", "Oswald", "Impact", system-ui, sans-serif; --rc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --rc-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPE SCALE (clamped, sport-poster proportions) ----------- */ --rc-text-xs: 0.75rem; /* 12px - meta */ --rc-text-sm: 0.875rem; /* 14px - small body */ --rc-text-base: 1rem; /* 16px - body */ --rc-text-lg: 1.125rem; /* 18px - intro */ --rc-text-xl: 1.375rem; /* 22px - eyebrow */ --rc-text-2xl: 1.75rem; /* 28px - h4 */ --rc-text-3xl: 2.25rem; /* 36px - h3 */ --rc-text-4xl: clamp(2.5rem, 4vw + 1rem, 3.75rem); /* h2 */ --rc-text-5xl: clamp(3rem, 6vw + 1rem, 5.5rem); /* h1 */ --rc-text-hero: clamp(4rem, 11vw + 1rem, 10rem); /* poster headline */ --rc-leading-tight: 0.95; --rc-leading-snug: 1.1; --rc-leading-body: 1.55; --rc-tracking-stencil: 0.06em; /* opens up display caps */ --rc-tracking-eyebrow: 0.18em; /* small caps eyebrows */ /* ---------- SPACING (4pt base, race-poster generous) ----------------- */ --rc-space-1: 0.25rem; --rc-space-2: 0.5rem; --rc-space-3: 0.75rem; --rc-space-4: 1rem; --rc-space-5: 1.5rem; --rc-space-6: 2rem; --rc-space-7: 3rem; --rc-space-8: 4rem; --rc-space-9: 6rem; --rc-space-10: 8rem; /* ---------- RADII ---------------------------------------------------- */ --rc-radius-none: 0; --rc-radius-xs: 2px; --rc-radius-sm: 4px; --rc-radius-md: 8px; /* default card */ --rc-radius-lg: 14px; --rc-radius-pill: 999px; /* "Cut" — diagonal clip for tabs / hero corners */ --rc-clip-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); --rc-clip-cut-tl: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); /* ---------- SHADOWS / GLOWS ----------------------------------------- */ /* On dark we use orange-cast glows + sharp drop shadows, not soft blurs */ --rc-shadow-card: 0 8px 24px -8px rgba(0,0,0,0.85); --rc-shadow-lift: 0 18px 48px -16px rgba(0,0,0,0.9); --rc-shadow-stamp: 4px 4px 0 0 var(--rc-ink-0); /* offset poster shadow */ --rc-glow-orange: 0 0 0 1px var(--rc-orange-500), 0 0 32px -4px rgba(232,116,44,0.55); --rc-glow-petrol: 0 0 0 1px var(--rc-petrol-400), 0 0 28px -8px rgba(54,98,90,0.55); --rc-inner-grit: inset 0 0 0 1px rgba(255,255,255,0.04); /* ---------- MOTION --------------------------------------------------- */ --rc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* default UI */ --rc-ease-snap: cubic-bezier(0.7, 0, 0.2, 1); /* punchy buttons */ --rc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* badges/medals pop in */ --rc-dur-fast: 120ms; --rc-dur-base: 220ms; --rc-dur-slow: 420ms; } /* ========================================================================= TEMA "ALTO CONTRASTE" — opt-in, solo portal (socios + directiva) ------------------------------------------------------------------------- Nació en la pista: a pleno sol la paleta oscura no se lee al cargar los resultados de las mangas. Es un SEGUNDO tema, claro y de alto contraste; el oscuro sigue siendo el default y no cambia. Cómo se activa: `data-theme="contraste"` en . Lo pone SOLO el script de pre-pintado de `base_portal.html` (y `account/base.html`) a partir de `localStorage['rc-theme']`, por eso el sitio público nunca lo ve aunque la preferencia esté guardada. Nada de `prefers-color-scheme`. Qué redefine: la paleta completa (ink/bone/acentos/semánticos), porque el CSS del portal usa los tokens de paleta directos, no los de rol. Reglas: • `--rc-ink-0` NO cambia: es "texto sobre acento", no fondo. • Los -500 pasan a un tono legible COMO TEXTO sobre blanco (≥ 4.5:1; naranja #9c4513 = 6.4:1). Como fondo con texto negro ya no alcanzan, y para eso los -fill vuelven al color brillante (#e8742c con negro = 7:1). Los selectores que usan el -500 de fondo se redirigen a -fill en la sección "Alto contraste" al final de portal.css / components.css. • En oscuro, -300 es "más claro = más contraste sobre tinte". En claro el equivalente es MÁS OSCURO, por eso acá -300 < -500 en luminosidad. • Sombras al 25 %: sobre blanco una sombra al 90 % es una mancha. Los glows se reemplazan por un borde sólido: no se ven al sol. • Tokens "fantasma" (`--rc-line`, `--rc-bone-200`, `--rc-amber-*`): los templates los usan con fallback hex (`var(--rc-line,#2a2a2a)`) y no existen en :root a propósito —definirlos ahí cambiaría el oscuro. Acá sí existen para que esos fallbacks respondan al tema. Contrastes medidos (WCAG, sobre #ffffff): texto #111 18.9 · #333 12.6 · #4a4a45 8.9 · borde #6b6b66 5.4 · naranja #9c4513 6.4 · verde #1e7b43 5.3 · ámbar #9a6b00 4.7 · rojo #b3121f 7.0 · petróleo #1f3832 12.6. ========================================================================= */ :root[data-theme="contraste"] { color-scheme: light; /* date picker, select, scrollbar en claro */ /* Canvas: blanco puro es lo que más ayuda al sol; tarjetas blancas con borde marcado en vez de gris sobre gris. */ --rc-ink-900: #ffffff; /* page bg */ --rc-ink-800: #ffffff; /* card / panel bg */ --rc-ink-700: #eeeeea; /* raised: thead, filas alternas, placas */ --rc-ink-600: #6b6b66; /* borde visible a simple vista (5.4:1) */ --rc-ink-500: #4d4d48; /* divisor */ /* Texto */ --rc-bone-0: #000000; --rc-bone-100: #111111; /* principal (18.9:1) */ --rc-bone-300: #333333; /* secundario (12.6:1) */ --rc-bone-500: #4a4a45; /* meta (8.9:1; el gris oscuro no sirve al sol) */ /* Naranja: como texto. El brillante queda en --rc-accent-fill. */ --rc-orange-300: #7a3610; --rc-orange-400: #7a3610; /* hover de links: más oscuro = "hover" en claro */ --rc-orange-500: #9c4513; /* 6.4:1 sobre blanco */ --rc-orange-600: #7a3610; --rc-orange-700: #5c2a0c; --rc-accent-fill: #e8742c; /* botón primario: negro encima = 7:1 */ --rc-accent-fill-hover: #ee8c41; /* 8.5:1 */ --rc-accent-fill-press: #c75d1c; /* 5:1 */ /* Verde petróleo: como texto/borde. 500–700 no cambian (se usan de fondo con texto claro; ver overrides de color en portal.css). */ --rc-petrol-300: #1f3832; --rc-petrol-400: #2a4a42; /* Semánticos: -500 como texto legible; -fill para fondos con texto negro; tints más presentes (0.10 → 0.14) y edges opacos (0.38 → 0.7). */ --rc-success-300: #155c31; --rc-success-500: #1e7b43; --rc-success-600: #155c31; --rc-success-tint: rgba(30, 123, 67, 0.14); --rc-success-edge: rgba(30, 123, 67, 0.70); --rc-success-fill: #4caf6f; /* negro encima = 7.7:1 */ --rc-warning-300: #7a5500; --rc-warning-500: #9a6b00; /* el ámbar #f0b429 es invisible sobre blanco */ --rc-warning-600: #7a5500; --rc-warning-tint: rgba(154, 107, 0, 0.14); --rc-warning-edge: rgba(154, 107, 0, 0.70); --rc-warning-fill: #f0b429; /* negro encima = 11:1 */ --rc-danger-300: #8c0e18; --rc-danger-400: #a3111c; --rc-danger-500: #b3121f; --rc-danger-600: #8c0e18; --rc-danger-tint: rgba(179, 18, 31, 0.10); --rc-danger-edge: rgba(179, 18, 31, 0.70); --rc-danger-fill: #b3121f; /* va con texto BLANCO (7:1), no negro */ --rc-info-tint: rgba(42, 74, 66, 0.12); --rc-info-edge: rgba(42, 74, 66, 0.70); /* Rol */ --rc-border-strong: #111111; /* Sombras y glows */ --rc-shadow-card: 0 8px 24px -8px rgba(0,0,0,0.25); --rc-shadow-lift: 0 18px 48px -16px rgba(0,0,0,0.30); --rc-glow-orange: 0 0 0 2px var(--rc-orange-500); --rc-glow-petrol: 0 0 0 2px var(--rc-petrol-400); --rc-inner-grit: inset 0 0 0 1px rgba(0,0,0,0.04); /* Fantasma (ver cabecera) */ --rc-line: var(--rc-ink-600); --rc-bone-200: #222222; --rc-amber-300: #7a5500; --rc-amber-500: #9a6b00; }