/** * Visual Modes CSS — Digital Dementia 2026 * * Define variables y estilos por modo visual. * Se aplica vía clase en : mode-ascii | mode-pixel | mode-rainbow * Coexiste con el sistema de light-mode (body.light-mode) sin conflicto. */ /* ─── Default ─────────────────────────────────────────────────────────────── */ /* Sin clase extra — el CSS de Webflow ya define los colores base */ /* ─── ASCII Mode ──────────────────────────────────────────────────────────── */ html.mode-ascii body, html.mode-ascii body:not(.light-mode) { background-color: #0e0e0c !important; color: #f0ede4 !important; } html.mode-ascii { --primary_color_text: #0e0e0c; --secondary_color: #f0ede4; --vm-accent: #c8f23a; } html.mode-ascii .body { font-family: 'Courier New', 'IBM Plex Mono', monospace; } /* ─── Pixel Mode ──────────────────────────────────────────────────────────── */ html.mode-pixel body, html.mode-pixel body:not(.light-mode) { background-color: #0a0a0a !important; color: #ffffff !important; } html.mode-pixel { --primary_color_text: #0a0a0a; --secondary_color: #ffffff; --vm-accent: #ffffff; } /* Canvas pixelado: sin suavizado */ html.mode-pixel canvas.vm-canvas, html.mode-pixel img.vm-processed { image-rendering: pixelated; image-rendering: crisp-edges; } /* ─── Rainbow Mode ────────────────────────────────────────────────────────── */ html.mode-rainbow body, html.mode-rainbow body:not(.light-mode) { background-color: #0a001a !important; color: #e0d0ff !important; } html.mode-rainbow { --primary_color_text: #0a001a; --secondary_color: #e0d0ff; --vm-accent: #c8f23a; } /* hue-rotate sobre el body completo — afecta todo lo que tenga color */ html.mode-rainbow .body { animation: vm-rainbow-hue 4s linear infinite; } @keyframes vm-rainbow-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } /* Dar color saturado a los elementos clave para que el hue-rotate los afecte */ /* Fondo con tinte — el hue-rotate lo irá girando */ html.mode-rainbow .body { background-color: #0a001a !important; } /* Texto con tinte violáceo saturado */ html.mode-rainbow .body, html.mode-rainbow p, html.mode-rainbow h1, html.mode-rainbow h2, html.mode-rainbow h3, html.mode-rainbow div, html.mode-rainbow span, html.mode-rainbow a { color: #e0d0ff !important; } /* Links y elementos interactivos con color base cálido */ html.mode-rainbow a:hover { color: #c8f23a !important; } /* Bordes y separadores con color saturado */ html.mode-rainbow * { border-color: rgba(180, 100, 255, 0.4) !important; outline-color: rgba(100, 200, 255, 0.4) !important; } /* Botones y elementos con background coloreado */ html.mode-rainbow button, html.mode-rainbow .contact, html.mode-rainbow .servicios-tag, html.mode-rainbow .sidebar-block-label, html.mode-rainbow .work-back { background-color: rgba(80, 0, 160, 0.6) !important; color: #f0e0ff !important; border: 1px solid rgba(200, 120, 255, 0.5) !important; } /* Tags y etiquetas */ html.mode-rainbow .servicios-tag { background-color: rgba(100, 0, 200, 0.5) !important; } /* Secciones y bloques con fondo teñido */ html.mode-rainbow .header-section, html.mode-rainbow .footer-dd, html.mode-rainbow .work-sidebar, html.mode-rainbow .sidebar-block { background-color: rgba(20, 0, 40, 0.8) !important; border-color: rgba(160, 80, 255, 0.3) !important; } /* Líneas decorativas */ html.mode-rainbow hr, html.mode-rainbow .divider { border-color: rgba(180, 100, 255, 0.6) !important; } /* El settings panel queda excluido del filtro para ser legible */ html.mode-rainbow .vm-settings-panel { filter: none !important; animation: none !important; } /* ─── Media wrapper ───────────────────────────────────────────────────────── */ /* Contenedor que envuelve cada img/video procesado */ .vm-wrapper { position: relative; display: inline-block; line-height: 0; /* evita espacio extra bajo el img */ } .vm-wrapper canvas.vm-canvas, .vm-wrapper pre.vm-ascii { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .vm-wrapper pre.vm-ascii { margin: 0; padding: 0; overflow: hidden; font-family: 'Courier New', monospace; font-size: 6px; line-height: 1; white-space: pre; color: var(--secondary_color, #f0ede4); background: transparent; display: flex; align-items: flex-start; } /* ─── Settings Panel ──────────────────────────────────────────────────────── */ .vm-settings-panel { position: fixed; bottom: 24px; right: 24px; z-index: 10000; isolation: isolate; /* aísla del mix-blend-mode: hard-light del body */ mix-blend-mode: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; } /* Botón toggle del panel */ .vm-settings-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--secondary_color, #d4d0cc); color: var(--primary_color_text, #1a1a18); border: none; cursor: pointer; font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.15s; mix-blend-mode: normal; } .vm-settings-btn:hover { opacity: 0.8; } /* Panel contenedor */ .vm-panel-body { display: none; flex-direction: column; gap: 20px; padding: 20px; background: #1a1a18; color: #d4d0cc; border: 1px solid #333; min-width: 200px; margin-bottom: 8px; mix-blend-mode: normal; } .vm-panel-body.open { display: flex; } /* Sección interna */ .vm-panel-section { display: flex; flex-direction: column; gap: 10px; } .vm-panel-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; margin-bottom: 2px; } /* Radio buttons de modo */ .vm-mode-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; } .vm-mode-option input[type="radio"] { accent-color: #c8f23a; cursor: pointer; } .vm-mode-option span { letter-spacing: 0.04em; } /* Slider de resolución */ .vm-slider-row { display: flex; align-items: center; gap: 10px; } .vm-slider { flex: 1; accent-color: #c8f23a; cursor: pointer; } .vm-slider-value { min-width: 30px; text-align: right; opacity: 0.7; } /* Charset buttons */ .vm-charset-row { display: flex; gap: 6px; flex-wrap: wrap; } .vm-charset-btn { padding: 4px 10px; background: transparent; color: #d4d0cc; border: 1px solid #444; cursor: pointer; font-family: inherit; font-size: 10px; letter-spacing: 0.06em; transition: background 0.1s, border-color 0.1s; } .vm-charset-btn:hover { border-color: #888; } .vm-charset-btn.active { background: #c8f23a; color: #0e0e0c; border-color: #c8f23a; } /* Ocultar secciones condicionales */ .vm-panel-section.vm-hidden { display: none; }