/* ============================================================================= TEMA CLARO / OSCURO — la única hoja que decide colores ----------------------------------------------------------------------------- Cómo funciona: aquí viven los MISMOS nombres definidos dos veces, uno por tema. El resto del CSS no vuelve a escribir un color: pide var(--loquesea) y el tema decide. Así cambiar de modo no necesita una regla nueva por cada componente ni pelear especificidad con los !important que ya existen. El tema se marca en el (no en el ) para poder pintar el fondo antes de que exista el body y evitar el parpadeo blanco al cargar. REGLA DE ORO DEL LIMA: #9cff00 sobre blanco da 1,26:1 — es ilegible. En claro el lima NO se usa nunca como texto: se conserva idéntico pero solo como RELLENO (botones, marcadores, chips, barras) y el acento tipográfico pasa al verde profundo de su misma familia. En oscuro sigue siendo el acento de siempre. Cada valor está verificado contra WCAG 2.1 (mínimo AA). ========================================================================== */ /* ===== OSCURO (tema por defecto: es la identidad actual del sitio) ========= */ :root, [data-theme="dark"] { color-scheme: dark; /* --- Superficies --- */ --bg: #020812; --bg-2: #06111f; --bg-3: #0b172a; --surface: rgba(10, 20, 35, .5); /* tarjetas translúcidas sobre el fondo pixel */ --surface-2: rgba(255, 255, 255, .04);/* paneles secundarios (columna del megamenú) */ --surface-solid: #091a2b; /* desplegables: necesitan opacidad real */ --band: rgba(2, 8, 18, .42); /* banda de sección más densa que el fondo */ --veil: rgba(2, 8, 18, .55); /* velo sobre imágenes */ --field: rgba(2, 8, 18, .6); /* campos de formulario: más hundidos que la tarjeta */ /* --- Texto --- */ --text: #e8eef7; --text-strong: #ffffff; --text-muted: rgba(255, 255, 255, .72); --text-faint: rgba(255, 255, 255, .58); --text-on-fill: #071a3d; /* sobre el lima: siempre oscuro */ /* --- Marca --- */ --accent: #9cff00; /* acento TIPOGRÁFICO (aquí sí puede ser lima) */ --accent-fill: #9cff00; /* relleno de marca: idéntico en los dos temas */ --accent-stroke: #9cff00; /* contorno del relleno */ --accent-soft: rgba(156, 255, 0, .16);/* fondos de acento muy suaves */ --link: #9cff00; --brand-blue: #1f5eff; /* azul de marca, tal cual */ --blue-ink: #6f9bff; /* azul legible como TEXTO sobre oscuro */ /* --- Líneas --- */ --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .22); --line-ui: rgba(255, 255, 255, .38); /* bordes de campos: exigen 3:1 */ --line-accent: rgba(156, 255, 0, .38); --line-accent-soft: rgba(156, 255, 0, .18); /* --- Header --- */ --header-veil: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%); --header-veil-scrolled: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 100%); --header-text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .7); --header-mark-shadow: drop-shadow(0 1px 4px rgba(0, 0, 0, .85)); --menu-bg: linear-gradient(135deg, #020812, #091a2b); --menu-bg-mega: linear-gradient(115deg, #020812 0%, #071426 72%, #0b2430 100%); /* El recuadro destacado del megamenú se queda oscuro en los dos temas: dentro lleva un número gigante en lima puro, que sobre claro sería ilegible. */ --menu-visual: linear-gradient(135deg, #10284f, #063c48); /* --- Sombras y efectos --- */ --shadow-card: none; --shadow-pop: 0 24px 64px rgba(0, 0, 0, .42); --shadow-lift: 0 28px 80px rgba(0, 0, 0, .42); --glow-accent: 0 0 8px rgba(156, 255, 0, .8), 0 0 18px rgba(156, 255, 0, .55), 0 0 30px rgba(156, 255, 0, .35); --glow-accent-strong: 0 0 12px rgba(156, 255, 0, 1), 0 0 26px rgba(156, 255, 0, .85), 0 0 42px rgba(156, 255, 0, .6); --grid-line: rgba(156, 255, 0, .07); /* rejilla técnica de fondo */ --scanline: rgba(255, 255, 255, .03); --card-blur: blur(4px); /* --- Páginas internas (proyectos, soluciones, productos) --- */ --thumb-bg: #061937; /* fondo de las miniaturas de proyecto */ --link-soft: #9cc2ff; /* enlaces dentro de tarjeta */ --teal-ink: #7fe0e3; /* el turquesa de la paleta, legible */ --tag-line: rgba(31, 94, 255, .4); --tag-text: #c7d8ff; --tag-bg: rgba(31, 94, 255, .14); --accent-soft-blue: rgba(31, 94, 255, .1); --hero-inner: linear-gradient(160deg, #020812 0%, #06111f 60%, #0b172a 100%); /* --- Estados --- */ --error: #ff6b7d; --warn: #ffd23b; --ok: #5ce08a; /* --- El fondo de píxeles: imagen en oscuro --- */ --page-bg-layers: linear-gradient(180deg, rgba(2, 8, 18, .9) 0%, rgba(6, 17, 31, .94) 100%), url("../img/pixel-bg.webp") center top / cover no-repeat fixed, var(--bg); --fx-opacity: 1; /* partículas del canvas */ } /* ===== CLARO ============================================================== */ [data-theme="light"] { color-scheme: light; /* --- Superficies --- El lienzo y la banda se hundieron un punto respecto de la primera versión (#f4f7fb/#e9eef6). Con aquellos valores la tarjeta blanca se separaba del fondo apenas 1,075:1 y TODO flotaba: las tarjetas no se leían como objetos y las secciones no se distinguían entre sí. Ahora la separación es 1,123:1 tarjeta-lienzo y 1,121:1 lienzo-banda, que es lo que da relieve y ritmo. El coste fueron dos tokens de texto ajustados en un punto (abajo). */ --bg: #eef2f8; --bg-2: #e7edf6; --bg-3: #dde6f2; --surface: #ffffff; --surface-2: #e9eff7; --surface-solid: #ffffff; --band: #dde6f2; --veil: rgba(255, 255, 255, .72); --field: #ffffff; /* campo blanco + borde: se lee hundido */ /* --- Texto (todos verificados AA o mejor sobre las tres superficies) --- */ --text: #0a1c3d; --text-strong: #0a1c3d; --text-muted: #4d5a70; /* 6,97 blanco · 6,21 lienzo · 5,54 banda */ /* Verificado también contra la malla de puntos compuesta encima de la banda, que es el fondo más oscuro que llega a haber detrás de un texto (4,55). */ --text-faint: #505a6d; /* 6,94 blanco · 6,18 lienzo · 5,51 banda */ --text-on-fill: #0a1c3d; /* 13,41 sobre el lima */ /* El azul profundo usado como SUPERFICIE, no como texto: es lo que le da al tema claro sus piezas con peso (el marcador de precios). Nombre propio para no pisar los --ink / --ink-2 heredados de styles.css, que son colores de texto y significan otra cosa. */ --ink-surface: #0a1c3d; --ink-surface-2: #12294f; /* --- Marca: el lima NO es texto aquí --- El acento tipográfico es el VERDE PROFUNDO de la familia del lima (matiz 101° frente a los 83° del lima): se lee como el hermano oscuro del neón, no como un color prestado. Da 7,2:1, exactamente la misma legibilidad que tendría el azul de marca, así que no se pierde nada por usarlo. */ --accent: #2b5e14; /* 7,74 blanco · 6,89 lienzo · 6,14 banda */ --accent-fill: #9cff00; /* el lima, intacto */ --accent-stroke: #57921f; /* verde de trazo (3,79 · 3,38 · 3,01) */ --accent-soft: rgba(156, 255, 0, .22); --link: #2b5e14; --brand-blue: #1f5eff; --blue-ink: #1746c4; /* --- Líneas: con más cuerpo que antes, si no las tarjetas no tienen borde -- */ --line: #cdd8e8; --line-strong: #b8c6da; --line-ui: #7e8488; /* 3,79 · 3,37 · 3,01 — campos */ --line-accent: #57921f; --line-accent-soft: rgba(87, 146, 31, .4); /* --- Header: velo claro en vez de negro, y sin sombras de texto --- */ --header-veil: linear-gradient(180deg, rgba(244, 247, 251, .92) 0%, rgba(244, 247, 251, .62) 55%, rgba(244, 247, 251, 0) 100%); --header-veil-scrolled: linear-gradient(180deg, rgba(247, 249, 252, .96) 0%, rgba(244, 247, 251, .9) 100%); --header-text-shadow: none; --header-mark-shadow: none; --menu-bg: linear-gradient(135deg, #ffffff, #f4f7fb); --menu-bg-mega: linear-gradient(115deg, #ffffff 0%, #f6f9fd 72%, #eef4fa 100%); --menu-visual: linear-gradient(135deg, #10284f, #063c48); /* igual que en oscuro, a propósito */ /* El pie sí se aclara: justo encima queda la banda CTA oscura, así que dos bloques oscuros seguidos cerrarían la página con un muro negro. */ --footer-bg: #e7edf6; --footer-text: #4d5a70; --footer-strong: #0a1c3d; --footer-line: #cdd8e8; /* --- Sombras: azuladas, nunca negras, y en DOS capas --- Una sola sombra grande y difusa (lo que había) no define el borde de la tarjeta: la mancha se ve, el objeto no. La capa corta de 1-2px es la que hace que la tarjeta se lea apoyada sobre la página. */ --shadow-card: 0 1px 2px rgba(10, 28, 61, .07), 0 8px 22px rgba(10, 28, 61, .08); --shadow-pop: 0 2px 6px rgba(10, 28, 61, .09), 0 18px 44px rgba(10, 28, 61, .14); --shadow-lift: 0 3px 8px rgba(10, 28, 61, .1), 0 26px 60px rgba(10, 28, 61, .16); /* El neón no existe sobre fondo claro: se apaga y el acento se sostiene solo */ --glow-accent: none; --glow-accent-strong: none; --grid-line: rgba(10, 28, 61, .06); --scanline: rgba(10, 28, 61, .025); --card-blur: none; /* --- Páginas internas --- */ --thumb-bg: #eef3f9; --link-soft: #2b5e14; /* 7,74:1 sobre tarjeta blanca */ --teal-ink: #096b6e; /* el turquesa de marca, oscurecido para papel */ --tag-line: #9db6ee; --tag-text: #123a9e; --tag-bg: rgba(31, 94, 255, .1); --accent-soft-blue: rgba(31, 94, 255, .07); --hero-inner: linear-gradient(160deg, #ffffff 0%, #f2f6fc 60%, #e9eff7 100%); --ghost-text: #0a1c3d; --ghost-line: #7e8488; --ghost-bg: rgba(10, 28, 61, .05); --hero-photo-veil: linear-gradient(115deg, rgba(247, 249, 252, .96) 0%, rgba(240, 245, 251, .93) 56%, rgba(226, 242, 243, .88) 100%); /* Las tarjetas de estas páginas usan las mismas sombras que el resto */ --shadow-card-alt: var(--shadow-card); --shadow-hover-alt: var(--shadow-pop); /* --- Estados (verificados sobre blanco) --- */ --error: #b3261e; --warn: #8a5a00; --ok: #1c6b3a; /* --- Fondo: sin la imagen oscura; una malla de puntos que mantiene el aire pixelado sin ensuciar el contraste ni cargar 38 KB --- */ --page-bg-layers: radial-gradient(circle at 1px 1px, rgba(10, 28, 61, .1) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, #f3f6fb 0%, var(--bg) 55%, #e7edf6 100%); --fx-opacity: .25; /* las partículas se atenúan, no molestan */ } /* ===== BANDA INVERTIDA ==================================================== Un bloque que se queda oscuro dentro del tema claro para conservar el ritmo visual (si todo es del mismo tono, las secciones se funden). En tema oscuro no hace nada: ya está oscuro. ========================================================================== */ /* Utilidad para un bloque invertido dentro del tema claro (por si en algún sitio hace falta una banda oscura de contraste). Ya no se aplica a ninguna sección: el tema claro llega a TODA la página. */ [data-theme="light"] .band-invert { --surface: rgba(255, 255, 255, .06); --band: #0b1a33; --text: #ffffff; --text-strong: #ffffff; --text-muted: rgba(255, 255, 255, .78); --text-faint: rgba(255, 255, 255, .62); --accent: #9cff00; /* aquí el lima SÍ vuelve a ser texto: 13,82:1 */ --link: #9cff00; --line: rgba(255, 255, 255, .14); --line-accent: rgba(156, 255, 0, .4); --grid-line: rgba(156, 255, 0, .07); --shadow-card: none; color: var(--text); } /* Solo la utilidad genérica pinta su fondo; .play-section ya trae el suyo */ [data-theme="light"] .band-invert { background: var(--band); } /* ===== LOGO Y MASCOTA EN CLARO ============================================ Los dos son blancos con detalles en lima: sobre papel desaparecen. No se les cambia ni un color —son la marca— sino el soporte sobre el que se apoyan. Logo: se le pone debajo la pastilla azul profunda que ya llevaba de fondo en el archivo original (daptux-mark.jpg tiene ese fondo horneado), ahora como forma limpia y redondeada en vez de un rectángulo recortado. Mascota: no puede ir sobre pastilla porque es un personaje suelto, así que se le dibuja un contorno de 1px con cuatro drop-shadow. Al ser pixel art de bordes duros, el contorno se lee como parte del dibujo. ========================================================================== */ [data-theme="light"] .brand__mark { border-radius: 9px; padding: 3px; background: #071a3d; box-sizing: content-box; } /* EL BOT EN TEMA CLARO — navy macizo, igual que el logo oficial. ----------------------------------------------------------------------------- Antes el cuerpo seguía siendo BLANCO y se le pintaban cuatro drop-shadow navy alrededor para fingirle un contorno. Sobre papel el resultado era un robot descolorido —blanco sobre blanco con un filo— envuelto en el halo lima que .pixel-bot lleva de serie, que en oscuro se lee como neón y en claro como una mancha verde. La solución no es contornear: es RELLENAR. El cuerpo se pinta del navy de marca y se apaga el halo, que solo tiene sentido sobre fondo oscuro. */ [data-theme="light"] .pixel-bot .bot-frame { fill: #071a3d; } /* El interior de la cabeza (solo lo usa el bot de login.php) va del color del papel, no del fondo oscuro del boot: si no, queda un cuadro negro en la cara. */ [data-theme="light"] .pixel-bot .bot-face { fill: var(--bg, #eef2f8); } [data-theme="light"] .pixel-bot, [data-theme="light"] .mascot, [data-theme="light"] .hero__bot svg { filter: none; } /* El latido del cuerpo pinta su propio halo lima con una animación: sobre papel se ve como una mancha verde que va y viene. Se apaga el halo y se conserva el vuelo (bot-arcade), que es lo que le da vida al personaje. */ [data-theme="light"] .bot-body { animation: bot-arcade 6.5s ease-in-out infinite; } [data-theme="light"] .mascot.is-flying { filter: none; } /* ===== BOTÓN DE TEMA ====================================================== Vive en el header, junto al selector de idioma. ========================================================================== */ .theme-switch { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0; color: inherit; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .theme-switch:hover { border-color: var(--accent-fill); background: var(--accent-soft); } .theme-switch:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; } .theme-switch:active { transform: scale(.94); } /* El icono se cambia por CSS, no por JS: así no parpadea al cargar */ .theme-switch__icon::before { content: "☀"; } [data-theme="light"] .theme-switch__icon::before { content: "☾"; } @media (prefers-reduced-motion: reduce) { .theme-switch { transition: none; } }