/* * Hingenia — Dark mode (estático, sin Tailwind build). * Se activa cuando tiene la clase .dark. * * Estrategia: cubrir chrome (header/footer) + páginas principales (front-page, * cursos, blog, ebooks, masterclass, membresía, page.php genérica) reescribiendo * los utilitarios Tailwind más comunes dentro de .site-main, sin tocar * componentes ya oscuros (footer, cards con fondos saturados, etc.). */ html.dark { color-scheme: dark; /* Pintamos el HTML del color base para que cualquier zona "fuera" del body (overscroll, área detrás del header sticky en el primer paint, alturas menores al viewport) no muestre blanco. */ background-color: #080809; } html.dark body { background-color: #080809; color: #e5e7eb; background-image: radial-gradient(ellipse 1300px 820px at 12% -8%, rgba(37, 99, 235, 0.08), transparent 58%), radial-gradient(ellipse 1000px 640px at 88% 26%, rgba(99, 102, 241, 0.05), transparent 58%), radial-gradient(ellipse 900px 600px at 50% 112%, rgba(255, 255, 255, 0.022), transparent 60%); background-attachment: fixed; } /* ============== HEADER ============== */ /* Header sticky con efecto glass: ANTES era muy transparente (alpha 0.62) y al estar en scroll=0 el cristal mostraba el cuasi-blanco de páginas con fondo claro (membresía, libro de reclamaciones) y se veía una franja luminosa por encima del contenido. Subimos la opacidad para que el header funcione como un sólido casi-opaco, manteniendo un toque glass al hacer scroll sobre cards oscuras del contenido. */ html.dark .site-header { background-color: rgba(8, 8, 9, 0.92); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Logo Hingenia: blanco en modo oscuro. - Texto fallback (text-hingenia-primary) → blanco - Imagen del logo custom → invertida a blanco con CSS filter */ html.dark .site-header .text-hingenia-primary { color: #ffffff !important; } html.dark .site-header .custom-logo, html.dark .site-header .custom-logo-link img, html.dark #hg-mobile-drawer .custom-logo, html.dark #hg-mobile-drawer .custom-logo-link img { filter: brightness(0) invert(1); } html.dark .site-header .text-gray-700, html.dark .site-header .text-gray-800, html.dark .site-header .text-gray-900 { color: #e5e7eb; } html.dark .site-header .text-gray-500, html.dark .site-header .text-gray-600 { color: #9ca3af; } html.dark .site-header a:hover, html.dark .site-header button:hover { color: #f9fafb; } html.dark .site-header .hover\:bg-gray-50:hover, html.dark .site-header .hover\:bg-gray-100:hover { background-color: #1c1c21; } /* Dropdown del menú */ html.dark .site-header .bg-white { background-color: #121214; border-color: #1c1c21; } /* Ítem de menú activo: usa bg-blue-50 (clarísimo) → se veía blanco. El texto sigue blanco (regla del logo arriba) y se lee sobre el azul. */ html.dark .site-header .bg-blue-50 { background-color: rgba(37, 99, 235, 0.22) !important; } /* Drawer mobile */ html.dark #hg-mobile-drawer { background-color: #121214; color: #e5e7eb; } html.dark #hg-mobile-drawer .text-gray-400 { color: #94a3b8; } html.dark #hg-mobile-drawer .text-gray-500, html.dark #hg-mobile-drawer .text-gray-600, html.dark #hg-mobile-drawer .text-gray-700, html.dark #hg-mobile-drawer .text-gray-800 { color: #e5e7eb; } html.dark #hg-mobile-drawer .border-gray-100, html.dark #hg-mobile-drawer .border-gray-200 { border-color: #1c1c21; } html.dark #hg-mobile-drawer .hover\:bg-gray-50:hover { background-color: #1c1c21; } html.dark #hg-mobile-drawer .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15); } /* ============== TOGGLE BUTTON ============== */ .hg-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; color: #2a2a30; transition: background-color 0.15s, color 0.15s; background: transparent; border: 0; cursor: pointer; } .hg-theme-toggle:hover { background-color: rgba(0,0,0,0.05); } .hg-theme-toggle .icon-sun { display: none; } .hg-theme-toggle .icon-moon { display: block; } html.dark .hg-theme-toggle { color: #e5e7eb; } html.dark .hg-theme-toggle:hover { background-color: rgba(255,255,255,0.08); } html.dark .hg-theme-toggle .icon-sun { display: block; } html.dark .hg-theme-toggle .icon-moon { display: none; } /* Versión inline para drawer mobile (no circular) */ .hg-theme-toggle--row { width: 100%; height: auto; border-radius: 0.5rem; padding: 0.625rem 0.75rem; gap: 0.75rem; justify-content: flex-start; font-size: 0.875rem; font-weight: 500; } html.dark .hg-theme-toggle--row { color: #e5e7eb; } /* ============== MAIN CONTENT ============== */ html.dark .site-main { background-color: transparent; color: #e5e7eb; } /* Wrapper exterior bg-gray-50 que envuelve secciones de varias páginas: en vez de un gris plano, lo dejamos transparente para que se vea el gradient atmosférico del body (estilo EDteam). */ html.dark .site-main > .bg-gray-50, html.dark .site-main > div > .bg-gray-50 { background-color: transparent !important; } /* Cards / surfaces: gradient sutil + borde glow leve sobre el navy más profundo. Esto da el feel "EDteam" — cards que parecen levitar sobre el atmosphere. */ html.dark .site-main .bg-white { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%) !important; border-color: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.dark .site-main .bg-gray-50 { background-color: rgba(255, 255, 255, 0.025) !important; } html.dark .site-main .bg-gray-100 { background-color: rgba(255, 255, 255, 0.04) !important; } html.dark .site-main .bg-slate-50 { background-color: rgba(255, 255, 255, 0.025) !important; } html.dark .site-main .bg-slate-100 { background-color: rgba(255, 255, 255, 0.04) !important; } html.dark .site-main .bg-blue-50 { background-color: rgba(37, 99, 235, 0.10) !important; } html.dark .site-main .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; } html.dark .site-main .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; } html.dark .site-main .bg-rose-50 { background-color: rgba(244, 63, 94, 0.10) !important; } /* Hover de cards bg-white con shadow-xl/lg → glow azul tipo EDteam */ html.dark .site-main .bg-white.hover\:shadow-xl:hover, html.dark .site-main .hover\:shadow-xl:hover.bg-white, html.dark .site-main article.bg-white:hover { border-color: rgba(96, 165, 250, 0.25) !important; box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15), 0 12px 40px -12px rgba(37, 99, 235, 0.45) !important; } /* Texto */ html.dark .site-main .text-gray-900 { color: #f9fafb !important; } html.dark .site-main .text-gray-800 { color: #f3f4f6 !important; } html.dark .site-main .text-gray-700 { color: #e5e7eb !important; } html.dark .site-main .text-gray-600 { color: #d1d5db !important; } html.dark .site-main .text-gray-500 { color: #9ca3af !important; } html.dark .site-main .text-gray-400 { color: #94a3b8 !important; } html.dark .site-main .text-slate-900 { color: #f9fafb !important; } html.dark .site-main .text-slate-800 { color: #f3f4f6 !important; } html.dark .site-main .text-slate-700 { color: #e5e7eb !important; } html.dark .site-main .text-slate-600 { color: #d1d5db !important; } /* Bordes */ html.dark .site-main .border-gray-100 { border-color: #18181b !important; } html.dark .site-main .border-gray-200 { border-color: #2a2a30 !important; } html.dark .site-main .border-gray-300 { border-color: #4b5563 !important; } html.dark .site-main .border-slate-100 { border-color: #18181b !important; } html.dark .site-main .border-slate-200 { border-color: #2a2a30 !important; } html.dark .site-main .divide-gray-100 > * + * { border-color: #18181b !important; } html.dark .site-main .divide-gray-200 > * + * { border-color: #2a2a30 !important; } /* Sombras suaves se ven raras sobre fondo oscuro: las atenuamos */ html.dark .site-main .shadow, html.dark .site-main .shadow-sm, html.dark .site-main .shadow-md, html.dark .site-main .shadow-lg, html.dark .site-main .shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); } /* Inputs / forms */ html.dark .site-main input[type="text"], html.dark .site-main input[type="email"], html.dark .site-main input[type="password"], html.dark .site-main input[type="search"], html.dark .site-main input[type="number"], html.dark .site-main input[type="tel"], html.dark .site-main input[type="url"], html.dark .site-main textarea, html.dark .site-main select { background-color: #18181b; color: #e5e7eb; border-color: #2a2a30; } html.dark .site-main input::placeholder, html.dark .site-main textarea::placeholder { color: #9ca3af; } /* Hover de utilitarios claros — los volvemos un poco más oscuros */ html.dark .site-main .hover\:bg-gray-50:hover { background-color: #1c1c21 !important; } html.dark .site-main .hover\:bg-gray-100:hover { background-color: #18181b !important; } html.dark .site-main .hover\:bg-white:hover { background-color: #121214 !important; } /* Prose (artículos del blog) */ html.dark .site-main .prose { color: #e5e7eb; } html.dark .site-main .prose :where(h1,h2,h3,h4,h5,h6,strong) { color: #f9fafb; } html.dark .site-main .prose :where(a) { color: #60a5fa; } html.dark .site-main .prose :where(blockquote) { color: #d1d5db; border-left-color: #2a2a30; } html.dark .site-main .prose :where(code) { color: #fbbf24; background: rgba(251, 191, 36, 0.08); } html.dark .site-main .prose :where(hr) { border-color: #2a2a30; } /* Badges/pills con fondos claros */ html.dark .site-main .bg-blue-100 { background-color: rgba(37, 99, 235, 0.18) !important; color: #93c5fd !important; } html.dark .site-main .text-blue-800 { color: #93c5fd !important; } html.dark .site-main .text-blue-700 { color: #60a5fa !important; } /* ============== CLASES CUSTOM HINGENIA ============== */ /* text-hingenia-dark (#030712) y text-hingenia-navy (#0F172A) son casi negros — se quedan ilegibles sobre fondo oscuro. Los pasamos a blanco/cercano. */ html.dark .site-main .text-hingenia-dark { color: #f9fafb !important; } html.dark .site-main .text-hingenia-navy { color: #f3f4f6 !important; } html.dark .site-main .text-hingenia-deep { color: #93c5fd !important; } html.dark .site-main .text-hingenia-primary { color: #60a5fa !important; } html.dark .site-main .text-hingenia-secondary { color: #93c5fd !important; } /* bg-hingenia-dark/navy ya son oscuros — quedan bien igual. bg-hingenia-light (#F9FAFB) y bg-hingenia-soft (#DBEAFE) son claros — flipear. */ html.dark .site-main .bg-hingenia-light { background-color: #111827 !important; } html.dark .site-main .bg-hingenia-soft { background-color: rgba(37, 99, 235, 0.18) !important; } /* Bordes de marca con tinte oscuro casi invisibles → cambiamos al primary blue para que dibujen el contorno con identidad de marca */ html.dark .site-main .border-hingenia-dark { border-color: #2563eb !important; } html.dark .site-main .border-hingenia-navy { border-color: #1c1c21 !important; } /* Botones con bg-hingenia-dark se mimetizan con el navy. Los promovemos al azul primary para que destaquen como CTA. Solo cuando son o