/* ========================================================================== Josep Morán — Sistema de tema claro/oscuro (switch flotante sol/luna) Por defecto la web es DARK (definido en los estilos globales / dark-mode.css). Este archivo SOLO añade: (a) la versión CLARA cuando , y (b) el botón flotante para alternar. No cambia nada del modo oscuro. ========================================================================== */ /* ---------- 1) Paleta en modo CLARO: se voltean las 5 variables neutras. La marca (lima accent-1), el violeta (accent-7/8) y accent-5 NO cambian. ---------- */ :root[data-theme="light"] { --wp--preset--color--base: #FFFFFF; /* fondo de página */ --wp--preset--color--contrast: #2b2b2b; /* texto principal */ --wp--preset--color--accent-2: #f4f4f4; /* superficies (tarjetas) */ --wp--preset--color--accent-3: #949494; /* texto secundario */ --wp--preset--color--accent-4: #686868; /* bordes / foco */ } /* ---------- 2) Elementos que SIEMPRE han de ser oscuros (usan 'base' como superficie, no como fondo de página). En claro 'base' pasa a blanco, así que se fijan a oscuro para no romperse. El diseño queda idéntico en ambos modos. ---------- */ /* Cabecera: banda lima con menú/enlaces oscuros (en ambos temas) */ :root[data-theme="light"] .wp-block-navigation__container.has-base-color, :root[data-theme="light"] .wp-block-navigation__container.has-base-color a, :root[data-theme="light"] .wp-block-navigation__container.has-base-color .wp-block-navigation-item__label { color: #121212 !important; } /* Menú móvil desplegado: fondo oscuro + texto lima (en ambos temas) */ :root[data-theme="light"] .wp-block-navigation__responsive-container.has-base-background-color.is-menu-open { background-color: #121212 !important; } /* Botones: superficie oscura + texto lima + anillo degradado (idéntico al dark) */ :root[data-theme="light"] .wp-block-button__link, :root[data-theme="light"] .wp-element-button, :root[data-theme="light"] .wppc-card__all, :root[data-theme="light"] .wpforms-container .wpforms-submit { background-color: #121212 !important; color: var(--wp--preset--color--accent-1, #D5FF02) !important; } :root[data-theme="light"] .wp-block-button__link:hover, :root[data-theme="light"] .wp-block-button__link:focus-visible, :root[data-theme="light"] .wp-element-button:hover, :root[data-theme="light"] .wp-element-button:focus-visible, :root[data-theme="light"] .wppc-card__all:hover, :root[data-theme="light"] .wppc-card__all:focus-visible, :root[data-theme="light"] .wpforms-container .wpforms-submit:hover, :root[data-theme="light"] .wpforms-container .wpforms-submit:focus-visible { background-color: var(--wp--preset--color--accent-3, #949494) !important; color: #121212 !important; } /* ---------- 3) Logos: en claro se muestran en NEGRO. ---------- */ /* Monocromo que en oscuro se invierte a blanco -> en claro sin filtro (negro original) */ :root[data-theme="light"] .wp-block-image img.wp-image-472, /* Elsa Tapia */ :root[data-theme="light"] .wp-block-image img.wp-image-73, /* Josep Morán (footer) */ :root[data-theme="light"] .wp-block-image img.wp-image-1018 { /* Josep Morán negro */ filter: none !important; } /* Monocromo blanco del carrusel (WPpodcast, Lawwwing) -> negro en claro */ :root[data-theme="light"] .partners-marquee img.wp-image-1382, :root[data-theme="light"] .partners-marquee img.wp-image-1380 { filter: brightness(0) !important; } /* (Wetopi 1384 y DMS3 1354 son multicolor: se intercambia el ARCHIVO por JS vía data-light-src, no por filtro.) */ /* ---------- 4) Botón flotante del switch (sol / luna) ---------- */ #jm-theme-toggle { position: fixed; right: 20px; bottom: 10px; /* alineado con el botón de Lawwwing (48x48 a 10px del fondo) */ z-index: 99990; width: 48px; height: 48px; padding: 0; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--wp--preset--color--accent-1, #D5FF02); background: var(--wp--preset--color--accent-2, #1E1E1E); color: var(--wp--preset--color--contrast, #F2F2F0); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 6px rgba(213, 255, 2, .25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; line-height: 0; } #jm-theme-toggle:hover { transform: scale(1.08); box-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 0 10px rgba(213, 255, 2, .5); } #jm-theme-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1, #D5FF02); outline-offset: 2px; } #jm-theme-toggle svg { width: 24px; height: 24px; display: block; } @media (prefers-reduced-motion: reduce) { #jm-theme-toggle { transition: none; } #jm-theme-toggle:hover { transform: none; } }