/* ═══════════════════════════════════════════════════════════════════ UrnaGames — Design Tokens (fuente única de verdad) ─────────────────────────────────────────────────────────────────── Arquitectura: SHELL → landing + navegación + result final (compartido) GAME THEMES → cada juego tiene su propio "cartucho" visual: · J1 (Brújula) → Windows viejo · gris utilitario · J2 (Legislador) → TBD (cartucho expresivo) · J3 (Candidatos) → TBD (cartucho expresivo) Shell concept: Argentinidad Arcade — boot screen minimalista azul noche + celeste AR + dorado, pixel en momentos clave. Reglas: · Un solo :root de shell en todo el frontend. · Cada juego declara su tema con clase .theme-jN sobre . · Ningún archivo redefine tokens del shell. Si falta un valor, sumarlo acá. · Fuentes remotas: cargar preconnect + en cada HTML head (Inter, JetBrains Mono, Press Start 2P, VT323). ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Canvas ───────────────────────────────────────────────────── */ --ink: #0D0D2B; /* Azul noche · canvas oscuro (landing + result slides) */ --ink-2: #14142E; /* Card oscuro · superficie sobre ink */ --ink-3: #1E1E42; /* Card oscuro elevada · hover / active */ --paper: #F4EFE4; /* Crema · canvas claro (quiz + result header) */ --paper-2: #FFFFFF; /* Card claro */ --paper-3: #FAF7F0; /* Card claro alterno */ /* ── Marca ────────────────────────────────────────────────────── */ --gold: #FFC700; /* Dorado · CTA primario en dark, highlight */ --gold-hover: #FFD933; --gold-dim: rgba(255,199,0,0.12); --gold-bdr: rgba(255,199,0,0.30); --celeste: #6BA8FF; /* Celeste AR · secundario, data, links */ --celeste-hover: #85B8FF; --celeste-dim: rgba(107,168,255,0.14); --celeste-bdr: rgba(107,168,255,0.35); --accent: var(--gold); /* Alias: acción principal */ --accent-2: var(--celeste); /* Alias: acción secundaria / data */ /* ── Semánticos ───────────────────────────────────────────────── */ --ok: #4ADE80; --warn: #FFB020; --danger: #FF4E4E; /* ── Neutrales sobre INK ──────────────────────────────────────── */ --ink-text: rgba(255,255,255,0.95); --ink-text-2: rgba(255,255,255,0.70); --ink-text-3: rgba(255,255,255,0.40); --ink-line: rgba(255,255,255,0.10); --ink-fill: rgba(255,255,255,0.05); --ink-fill-2: rgba(255,255,255,0.08); /* ── Neutrales sobre PAPER ────────────────────────────────────── */ --paper-text: #1C1916; --paper-text-2: #5A5348; --paper-text-3: #9A9187; --paper-line: #E2DDD5; --paper-fill: #EFEAE0; /* ── Tipografía ───────────────────────────────────────────────── */ --font-pixel: 'Press Start 2P', ui-monospace, monospace; --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, monospace; --font-sans: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif; /* ── Type scale (sans) ────────────────────────────────────────── */ --fs-hero: clamp(2.4rem, 8vw, 4.4rem); /* Reservado para casos raros */ --fs-h1: clamp(1.8rem, 5vw, 2.7rem); --fs-h2: clamp(1.3rem, 3.2vw, 1.7rem); --fs-h3: 1.15rem; --fs-body-lg: 1.0625rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-xxs: 0.6875rem; /* ── Type scale (pixel) — más chico porque cuenta más ─────────── */ --fs-pixel-lg: clamp(1.1rem, 3vw, 1.6rem); /* H1 landing */ --fs-pixel-md: 0.75rem; /* CTA principal */ --fs-pixel-sm: 0.55rem; /* Chips, badges, meta */ --fs-pixel-xs: 0.42rem; /* Micro-labels */ /* ── Line heights ─────────────────────────────────────────────── */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ── Spacing scale ────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; /* ── Radius ───────────────────────────────────────────────────── */ --r-pixel: 3px; /* Cuadrado retro — botones/cards del mundo arcade */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 99px; /* ── Elevación ────────────────────────────────────────────────── */ --el-pixel-sm: 3px 3px 0 rgba(0,0,0,0.30); /* Sombra escalonada retro */ --el-pixel-md: 4px 4px 0 rgba(0,0,0,0.40); --el-pixel-lg: 6px 6px 0 rgba(0,0,0,0.45); --el-pixel-gold:4px 4px 0 rgba(255,199,0,0.30); /* Card J1 activa */ --el-soft: 0 2px 8px rgba(0,0,0,0.06); --el-soft-lg: 0 8px 24px -8px rgba(0,0,0,0.15); /* ── Layout ───────────────────────────────────────────────────── */ --max-content: 1080px; --max-narrow: 760px; --max-quiz: 620px; /* ── Motion ───────────────────────────────────────────────────── */ --dur-fast: 0.12s; --dur-base: 0.20s; --dur-slow: 0.35s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-pixel: steps(4, end); /* Animaciones estilo arcade */ } /* ═══════════════════════════════════════════════════════════════════ Breakpoints — usar en @media queries ─────────────────────────────────────────────────────────────────── Sólo dos. Todo el frontend respeta este contrato: @media (min-width: 640px) { … tablet / desktop base … } @media (min-width: 1024px) { … desktop grande, opcional … } No agregar breakpoints nuevos sin discusión. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ THEME: J1 · Brújula Ideológica — Windows viejo (gris utilitario) ─────────────────────────────────────────────────────────────────── Rol: interfaz de test psicométrico serio. Prioridad #1 = legibilidad y concentración. Ornamento mínimo, personalidad instrumental. Activación: (o ). ═══════════════════════════════════════════════════════════════════ */ .theme-j1 { /* Superficies grises Win95 */ --j1-desktop: #008080; /* Teal escritorio Win95 (opcional, sólo si mostramos "escritorio") */ --j1-window: #C0C0C0; /* Gris ventana clásico */ --j1-window-2: #DFDFDF; /* Gris highlight superior/izq (bevel outset) */ --j1-window-3: #808080; /* Gris sombra inferior/der (bevel outset) */ --j1-window-4: #404040; /* Gris borde exterior duro */ --j1-field: #FFFFFF; /* Campo blanco (input, radio dot area) */ --j1-field-alt: #F5F5F5; /* Campo alterno / row hover */ /* Barra de título */ --j1-title: #000080; /* Azul barra de título activa */ --j1-title-2: #1084D0; /* Azul barra activa (gradiente end) */ --j1-title-inactive:#808080; --j1-title-text: #FFFFFF; /* Texto */ --j1-text: #000000; --j1-text-2: #404040; /* Meta, hint */ --j1-text-3: #808080; /* Disabled */ --j1-text-invert: #FFFFFF; /* Acento — mínimo, sólo para selección y foco */ --j1-accent: #000080; /* Mismo azul que la title bar → un solo acento */ --j1-accent-hover: #1084D0; /* Semánticos */ --j1-danger: #C41F1F; /* Sólo error / indeterminado */ --j1-ok: #007000; /* Tipografía Win95: sans neutral para UI + mono para chips retro */ --j1-font-ui: 'Pixelated MS Sans Serif', 'Perfect DOS VGA 437', Tahoma, "MS Sans Serif", Geneva, sans-serif; --j1-font-mono: 'VT323', 'Perfect DOS VGA 437', ui-monospace, "Courier New", monospace; --j1-font-body: 'Inter', -apple-system, "Segoe UI", Tahoma, sans-serif; /* Sizes — más chicos que shell, estilo software antiguo */ --j1-fs-title: 0.75rem; /* Barra título */ --j1-fs-menu: 0.8125rem; /* Menús */ --j1-fs-label: 0.8125rem; /* Labels + botones */ --j1-fs-body: 1rem; /* Cuerpo de pregunta — legibilidad manda */ --j1-fs-body-lg: 1.125rem; /* Pregunta principal */ --j1-fs-meta: 0.75rem; /* Meta info */ /* Bevel Win95 (bordes 3D duros) */ --j1-bevel-out: inset 1px 1px 0 var(--j1-window-2), inset -1px -1px 0 var(--j1-window-3), inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 var(--j1-window-4); --j1-bevel-in: inset 1px 1px 0 var(--j1-window-3), inset -1px -1px 0 var(--j1-window-2), inset 2px 2px 0 var(--j1-window-4), inset -2px -2px 0 #FFFFFF; --j1-bevel-field: inset 1px 1px 0 var(--j1-window-3), inset -1px -1px 0 #FFFFFF, inset 2px 2px 0 var(--j1-window-4), inset -2px -2px 0 var(--j1-window-2); /* Radios: cero. Todo cuadrado. */ --j1-radius: 0; --j1-radius-window: 0; /* Spacing más denso — pantalla de programa 90s */ --j1-sp-2: 4px; --j1-sp-3: 8px; --j1-sp-4: 12px; --j1-sp-5: 16px; --j1-sp-6: 20px; /* Motion: casi nula. Es un programa serio. */ --j1-dur: 0.08s; } /* Cuando theme-j1 está activo, el body respira Win95 por defecto */ .theme-j1 body, body.theme-j1 { background: var(--j1-desktop); color: var(--j1-text); font-family: var(--j1-font-ui); line-height: var(--lh-normal); } /* ═══════════════════════════════════════════════════════════════════ Reset mínimo compartido ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg, video { max-width: 100%; display: block; } /* ═══════════════════════════════════════════════════════════════════ Utilidades base — mínimas, ampliables por archivo ═══════════════════════════════════════════════════════════════════ */ /* Textura scanline retro para fondos oscuros */ .tex-scanlines { position: relative; } .tex-scanlines::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px ); pointer-events: none; z-index: 2; } /* Sr-only para accesibilidad */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Botón de sonido (chiptune toggle) — global en todas las páginas ── */ #ug-sound-btn { position: fixed; top: 10px; right: 10px; z-index: 150; font-family: 'VT323', 'Courier New', monospace; font-size: 0.9rem; line-height: 1; color: #000; background: #c0c0c0; border: none; padding: 4px 9px; cursor: pointer; box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #808080 inset, 2px 2px 0 #dfdfdf inset, -2px -2px 0 #5a5a5a inset; } #ug-sound-btn:active { box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #fff inset; padding-top: 5px; } #ug-sound-btn.ug-sound-on { color: #000080; font-weight: 700; }