/* ============================================================ THEME.CSS — Sistema de diseño compartido de Humb3rSec Este archivo centraliza colores, tipografía, sombras y animaciones para que TODO el sitio (portafolio, blog, guías, apuntes, proyectos, sección personal y panel admin) se vea coherente. Se enlaza ANTES del CSS propio de cada página, así que cualquier página puede sobreescribir un valor puntual si lo necesita, pero por defecto hereda esta paleta moderna. ============================================================ */ :root { /* ---- Paleta base (modernizada, más "cyber" que el azul plano anterior: degradado eléctrico azul → violeta) ---- */ --accent: #4da3ff; /* azul eléctrico */ --accent-2: #7c5cff; /* violeta */ --accent-gradient: linear-gradient(135deg, #4da3ff 0%, #7c5cff 100%); --accent-gradient-soft: linear-gradient( 135deg, rgba(77, 163, 255, 0.18), rgba(124, 92, 255, 0.18) ); /* Compatibilidad: el resto del CSS ya escrito usa var(--red) y var(--primary) como su color principal de acento y de texto. Al redefinirlos aquí, todo el sitio adopta la nueva paleta sin tener que reescribir cientos de reglas existentes. */ --red: var(--accent); --primary: #e9e7f5; --dark-bg: #12141a; --bg-elevated: #181b23; --bg-elevated-2: #1f232d; --border-subtle: rgba(255, 255, 255, 0.08); --muted-text: #9aa0ad; --radius: 0.85rem; --radius-sm: 0.5rem; --radius-lg: 1.25rem; --shadow-glow: 0 0 22px rgba(77, 163, 255, 0.35); --shadow-glow-strong: 0 0 32px rgba(77, 163, 255, 0.55); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35); --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.18s ease; --font-heading: "Poppins", "Segoe UI", Arial, sans-serif; --font-body: "Inter", "Segoe UI", Arial, sans-serif; /* Superficies de tarjetas/paneles usadas en todo style.css, guias.css, blog.css, etc. Antes estaban escritas como color literal (#212529, #1e1e1e...) repetido en decenas de reglas; ahora son variables para poder ofrecer modo claro sin tocar cada selector. El valor por defecto es idéntico al color original, así que el modo oscuro (el de siempre) no cambia ni un pixel. */ --surface-0: #121212; --surface-1: #212529; --surface-2: #1e1e1e; --surface-3: #181b23; } /* ============================================================ MODO CLARO Se activa con data-theme="light" en (ver assent/src/js/theme-toggle.js, que además lo aplica lo antes posible mediante un script inline en el para evitar un parpadeo del tema incorrecto). Todo lo de arriba (modo oscuro) queda exactamente igual; esto solo añade overrides. ============================================================ */ :root[data-theme="light"] { --dark-bg: #f3f5fa; --bg-elevated: #ffffff; --bg-elevated-2: #eef1f7; --primary: #1b1e27; --muted-text: #5b6270; --border-subtle: rgba(15, 18, 26, 0.12); --shadow-soft: 0 10px 30px rgba(15, 18, 26, 0.12); --surface-0: #eef1f7; --surface-1: #ffffff; --surface-2: #f5f7fb; --surface-3: #eef1f7; } [data-theme="light"] body { background: radial-gradient( 1200px 600px at 15% -10%, rgba(77, 163, 255, 0.1), transparent 60% ), radial-gradient( 1000px 500px at 100% 0%, rgba(124, 92, 255, 0.08), transparent 55% ), var(--dark-bg); color: var(--primary); } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--dark-bg); } [data-theme="light"] a { color: inherit; } [data-theme="light"] .navbar-scrolled { background: rgba(255, 255, 255, 0.88); box-shadow: 0 4px 24px rgba(15, 18, 26, 0.12); } [data-theme="light"] .navbar .nav-link, [data-theme="light"] .navbar-nav .nav-link, [data-theme="light"] .navbar-brand, [data-theme="light"] .navbar-toggler { color: #1b1e27; } [data-theme="light"] .navbar-nav.site-nav-menu { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--border-subtle); } [data-theme="light"] footer, [data-theme="light"] .admin-header { color: var(--primary); } /* ---- Botón de cambio de tema (sol/luna) ---- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15)); background: transparent; color: inherit; cursor: pointer; font-size: 0.95rem; padding: 0; transition: background var(--transition-fast), transform var(--transition-fast); } .theme-toggle-btn:hover { background: var(--accent-gradient-soft); transform: translateY(-1px); } /* ---- Tipografía base ---- */ h1, h2, h3, h4, h5, h6, .hero-name, .section-title, .welcome-card h1, .card-title, .logo-btn { font-family: var(--font-heading); } body { font-family: var(--font-body); } /* ---- Fondo con degradado sutil en vez de un color plano: da profundidad sin necesitar imágenes nuevas ---- */ body { background: radial-gradient( 1200px 600px at 15% -10%, rgba(77, 163, 255, 0.08), transparent 60% ), radial-gradient( 1000px 500px at 100% 0%, rgba(124, 92, 255, 0.07), transparent 55% ), var(--dark-bg); } /* ---- Barra de scroll personalizada, coherente en todo el sitio ---- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--dark-bg); } ::-webkit-scrollbar-thumb { background: var(--accent-gradient); border-radius: 10px; } * { scrollbar-color: var(--accent) var(--dark-bg); } /* ---- Selección de texto con el acento de marca ---- */ ::selection { background: var(--accent-2); color: #fff; } /* ---- Enfoque accesible visible con el nuevo acento ---- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Fallback de fondo para el hero sin depender de una imagen ("fondo-montanas.jpg" no existe en el proyecto y causaba un 404 permanente): un degradado + resplandores animados que se ve moderno en cualquier resolución y no depende de un archivo. ---- */ .hero-fallback-bg { background: radial-gradient( 900px 500px at 20% 20%, rgba(77, 163, 255, 0.35), transparent 60% ), radial-gradient( 900px 600px at 85% 80%, rgba(124, 92, 255, 0.3), transparent 60% ), linear-gradient(160deg, #0d0f14 0%, #14161f 55%, #181225 100%); background-size: 200% 200%; animation: heroGlow 18s ease-in-out infinite; } @keyframes heroGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Microinteracción genérica para botones tipo "pill" ---- */ .btn, button, .btn-admin, .btn-outline-danger, .explore-btn, .nav-button { transition: transform var(--transition-fast), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base); } /* ---- Utilidad de aparición al hacer scroll ---- Se activa agregando la clase "reveal" a un contenedor; el script assent/src/js/reveal.js añade "reveal-visible" cuando entra en pantalla. Si el usuario prefiere menos movimiento, se muestra directamente sin animar. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .reveal.reveal-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-fallback-bg { animation: none; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }