/* ───────────────────────────────────────────────────────────────────────── MATRIX MODE · theme override ───────────────────────────────────────────────────────────────────────── Se activa cuando tiene la clase `.matrix-mode` (matrix-toggle.js la pone/quita y persiste en localStorage). Estrategia: redefinir las CSS custom properties globales. Como todo el resto del sitio consume las variables (--bg, --ink, --primary, etc.), el cambio se propaga sin tocar el resto del CSS. Palette: - #0F0F0F Background base (casi negro) - #202020 Cards / surfaces - #5DD62C Matrix green brillante (primary, links, accents) - #337418 Verde oscuro (secondary, hover states) - #F8F8F8 Texto principal sobre dark */ /* VT323: monospace pixelada estilo CRT terminal — la más Matrix-feel disponible gratis en Google Fonts. Diseñada por Peter Hull a partir de las pantallas de los Digital VT320 (1987). */ @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); html.matrix-mode { /* ─── Color tokens ─── */ --bg: #0F0F0F; --bg-2: #202020; --paper: #202020; --ink: #F8F8F8; --ink-2: rgba(248, 248, 248, 0.72); --ink-3: rgba(248, 248, 248, 0.48); --border: rgba(93, 214, 44, 0.22); --border-2: rgba(93, 214, 44, 0.38); --primary: #5DD62C; --primary-2: #337418; --primary-tint: rgba(93, 214, 44, 0.14); --accent: #5DD62C; --accent-2: #337418; --accent-tint: rgba(93, 214, 44, 0.12); --good: #5DD62C; --good-tint: rgba(93, 214, 44, 0.14); --danger: #ff4444; --danger-tint: rgba(255, 68, 68, 0.10); /* ─── Tipografía: todo a VT323 (terminal mono) ─── */ --sans: 'VT323', 'Courier New', monospace; --serif: 'VT323', 'Courier New', monospace; --mono: 'VT323', 'Courier New', monospace; /* VT323 renderea más chico que las fuentes regulares; bump del base. */ font-size: 18px; background: #0F0F0F; color: #F8F8F8; } /* VT323 es single-weight: forzar peso normal globalmente (evita el sintético "bold" del browser que sale pixelado y feo). */ html.matrix-mode * { font-weight: normal !important; } /* Sin antialiasing: pixel-perfect para CRT auténtico */ html.matrix-mode, html.matrix-mode body, html.matrix-mode * { -webkit-font-smoothing: none; font-smooth: never; text-rendering: geometricPrecision; } /* Body base */ html.matrix-mode body { background: #0F0F0F !important; color: #F8F8F8; } /* ─── Overrides explícitos donde el cascade no alcanza ─── */ /* Cards y superficies de papel */ html.matrix-mode .card, html.matrix-mode .pilar, html.matrix-mode .h-illo, html.matrix-mode .h-stat-card, html.matrix-mode .compara, html.matrix-mode .cand-section-card, html.matrix-mode .alert, html.matrix-mode .timeline-edu, html.matrix-mode .perm-counters, html.matrix-mode .perm-arch-step, html.matrix-mode .perm-faq-card, html.matrix-mode .perm-ledger-table, html.matrix-mode .perm-type-card, html.matrix-mode .perm-verify { background: #202020; border-color: rgba(93, 214, 44, 0.22); color: #F8F8F8; } /* Botones primary: invertir (verde brillante con texto oscuro) */ html.matrix-mode .btn.primary { background: #5DD62C; color: #0F0F0F !important; border-color: #5DD62C; } html.matrix-mode .btn.primary:hover { background: #337418; color: #F8F8F8 !important; border-color: #337418; } html.matrix-mode .btn.secondary { background: transparent; color: #F8F8F8; border-color: rgba(93, 214, 44, 0.4); } html.matrix-mode .btn.secondary:hover { background: rgba(93, 214, 44, 0.10); border-color: #5DD62C; } /* Inputs / textareas / selects */ html.matrix-mode input, html.matrix-mode textarea, html.matrix-mode select { background: #0F0F0F; border: 1px solid rgba(93, 214, 44, 0.3); color: #F8F8F8; } html.matrix-mode input:focus, html.matrix-mode textarea:focus, html.matrix-mode select:focus { outline: 2px solid #5DD62C; border-color: #5DD62C; } html.matrix-mode input::placeholder, html.matrix-mode textarea::placeholder { color: rgba(248, 248, 248, 0.35); } /* Em (accents en títulos) → matrix green */ html.matrix-mode em { color: #5DD62C !important; } /* Topbar (estática + React) */ html.matrix-mode .topbar, html.matrix-mode .nav { background: #0F0F0F; border-bottom: 1px solid rgba(93, 214, 44, 0.2); } /* Logo del header en matrix mode: sello verde sobre negro. Se reemplaza el del PdfLogo (topbar + sidebar) vía content; mantiene el sizing height/auto. */ html.matrix-mode .topbar-brand img, html.matrix-mode .sidebar-brand img { content: url('../assets/logomatrix.png?v=2'); opacity: 0.8; width: auto !important; max-width: none !important; object-fit: contain !important; border-radius: 0 !important; } html.matrix-mode .topbar-nav-link, html.matrix-mode .nav-links a { color: rgba(248, 248, 248, 0.75); } html.matrix-mode .topbar-nav-link:hover, html.matrix-mode .nav-links a:hover { color: #5DD62C; } html.matrix-mode .topbar-nav-link.is-active { color: #5DD62C; text-decoration-color: #5DD62C; } /* Sidebar deslizante */ html.matrix-mode .sidebar { background: #0F0F0F; border-right-color: rgba(93, 214, 44, 0.2); } html.matrix-mode .side-item { color: #F8F8F8; border-bottom-color: rgba(93, 214, 44, 0.12); } html.matrix-mode .side-item:hover { background: rgba(93, 214, 44, 0.08); } /* Footer (la "f") — ya era oscuro, sólo retocar acentos */ html.matrix-mode footer.f { background: #0F0F0F !important; color: #F8F8F8; } /* Logo del footer → mismo sello verde que el header (mantiene su sizing). */ html.matrix-mode footer.f .f-brand img { content: url('../assets/logomatrix.png?v=2'); opacity: 0.8; width: auto !important; max-width: none !important; object-fit: contain !important; border-radius: 0 !important; } html.matrix-mode footer.f a { color: rgba(248, 248, 248, 0.65); } html.matrix-mode footer.f a:hover { color: #5DD62C; } /* Marquesina horizontal en hero del index */ html.matrix-mode .strip { background: #5DD62C; color: #0F0F0F; } /* Quote box */ html.matrix-mode .quote { background: #5DD62C; color: #0F0F0F; } html.matrix-mode .quote em { color: #337418 !important; } /* Chatbot panel — el widget se ve raro en light style sobre dark theme. Adaptamos colores principales. */ html.matrix-mode .pdf-chat-panel { background: #202020 !important; color: #F8F8F8 !important; border-color: rgba(93, 214, 44, 0.3) !important; } html.matrix-mode .pdf-chat-msg.assistant { background: #0F0F0F !important; color: #F8F8F8 !important; border-color: rgba(93, 214, 44, 0.2) !important; } html.matrix-mode .pdf-chat-msg.user { background: #5DD62C !important; color: #0F0F0F !important; } html.matrix-mode .pdf-chat-input { background: #0F0F0F !important; color: #F8F8F8 !important; border-color: rgba(93, 214, 44, 0.3) !important; } html.matrix-mode .pdf-chat-btn { background: #5DD62C !important; color: #0F0F0F !important; } /* Tweaks panel (dev panel del React) */ html.matrix-mode .tweaks-panel { background: #202020; border-color: rgba(93, 214, 44, 0.3); color: #F8F8F8; } /* SVG líneas decorativas en Permanencia → verde matrix */ html.matrix-mode .perm-cubes-lines line, html.matrix-mode .perm-spine-lines line { stroke: #5DD62C; opacity: 0.7; } /* Hover de cards genéricos */ html.matrix-mode .prp-dest-card:hover { border-color: #5DD62C; box-shadow: 0 20px 50px -30px rgba(93, 214, 44, 0.35); } /* Eyebrow text → tinted */ html.matrix-mode .eyebrow { color: #5DD62C; } /* Watermark del logo + grid del hero del index: ocultamos para dejar el escenario limpio a la lluvia matrix. */ html.matrix-mode .hero::before, html.matrix-mode .hero::after { display: none; } /* En modo matrix dejamos SOLO la lluvia verde (.pdf-matrix-rain): ocultamos el video de fondo del hero y las lluvias azules inline (index/home y Quiénes somos). Además evita que la regla de abajo (position:relative) las saque de su posición absoluta y rompa el layout del hero. */ html.matrix-mode .hero-video-bg, html.matrix-mode .hero-rain, html.matrix-mode .qs-hero-rain { display: none !important; } /* Sin el poster de fondo del hero (la cabeza 3D): fondo negro para la lluvia. */ html.matrix-mode .hero { background-image: none !important; background-color: #000 !important; } /* El contenido del hero (texto, botones, ilustración) debe quedar por encima del canvas de la lluvia matrix (que va al z-index: 0 detrás de todo). */ html.matrix-mode .hero > *:not(.pdf-matrix-rain), html.matrix-mode .perm-hero > *:not(.pdf-matrix-rain), html.matrix-mode .prp-hero > *:not(.pdf-matrix-rain), html.matrix-mode .mapa-hero > *:not(.pdf-matrix-rain), html.matrix-mode .ch-head > *:not(.pdf-matrix-rain), html.matrix-mode .cand-head > *:not(.pdf-matrix-rain) { position: relative; z-index: 1; } /* Las decoraciones tech de los heros (scanline + corners + cursor) también las ocultamos para que no compitan con la lluvia. IMPORTANTE: además de lo estético, esto las saca del layout — la regla de arriba les pone position:relative, y si el hero es un grid (.mapa-hero) esas decoraciones absolutas se vuelven grid items y rompen las columnas (mapa minúsculo y descolocado). display:none las quita del grid y el mapa vuelve a su lugar. */ html.matrix-mode .hero-scanline, html.matrix-mode .hero-corner, html.matrix-mode .mapa-hero-scanline, html.matrix-mode .mapa-hero-corner, html.matrix-mode .h-cursor { display: none; } /* Hero corners + scanline en index → verde matrix (ya usa var(--primary)) */ /* (no hace falta override — el var(--primary) ya es verde) */ /* Permanencia hero cube faces — caras de cubos wireframe en verde */ html.matrix-mode .cube-face { background: rgba(93, 214, 44, 0.04); border-color: #5DD62C; box-shadow: 0 0 14px rgba(93, 214, 44, 0.55), inset 0 0 0 1px rgba(93, 214, 44, 0.25); } /* ─── Mapa Argentina del hero del index ─── */ /* El mapa lo pinta JS via setAttribute('fill', ...). CSS `fill` con !important override esos atributos sin tener que tocar el código JS. Cubrimos también el hover (que JS reasigna en mouseenter/mouseleave). */ html.matrix-mode #hero-map path { fill: #5DD62C !important; stroke: #0F0F0F !important; } html.matrix-mode #hero-map path:hover { fill: #A8FF8C !important; } /* Sombra interna del mapa: en matrix queda con tono verde */ html.matrix-mode #hero-map feDropShadow { flood-color: #0F0F0F; } /* CABA overlay: el "dot" (silueta de CABA) sigue las provincias. El círculo del label queda blanco para no perder contraste con el verde. */ html.matrix-mode #hero-map #caba-overlay path { fill: #5DD62C !important; stroke: #0F0F0F !important; } html.matrix-mode #hero-map #caba-overlay line { stroke: #F8F8F8 !important; } /* Labels de las provincias siguen blancas — legibles sobre verde */ html.matrix-mode #hero-map #prov-labels text { fill: #F8F8F8 !important; } /* El label "CABA" queda en negro sobre el círculo blanco — buen contraste */ html.matrix-mode #hero-map #caba-overlay text { fill: #0F0F0F !important; } /* ─── Mapa Argentina del hero "Nuestros Precandidatos" (.mapa-hero) ─── */ /* Las provincias las pinta JS con un azul hardcodeado y el contorno lleva un glow azul animado. En matrix los pasamos a verde y cambiamos el glow. */ html.matrix-mode .mapa-hero-map .mapa-svg svg path { fill: #5DD62C !important; stroke: #0F0F0F !important; } html.matrix-mode .mapa-hero-map .mapa-svg svg path:hover { fill: #A8FF8C !important; } html.matrix-mode .mapa-hero-map .mapa-svg svg text { fill: #F8F8F8 !important; } html.matrix-mode .mapa-hero-map .mapa-svg { filter: drop-shadow(0 14px 48px rgba(93, 214, 44, 0.28)) !important; } html.matrix-mode .mapa-hero-map .mapa-svg svg { filter: drop-shadow(0 0 3px rgba(93, 214, 44, 0.55)) drop-shadow(0 0 9px rgba(93, 214, 44, 0.38)) drop-shadow(0 0 18px rgba(93, 214, 44, 0.24)) !important; animation: none !important; /* corta el glow azul (mapaHeroGlow) */ } /* Notification badge del chatbot */ html.matrix-mode .pdf-chat-badge { background: #5DD62C !important; color: #0F0F0F !important; }