/* Theme Name: NUTA Espazioa Theme URI: https://nuta.eus Description: Tema hijo de Twenty Twenty-Five con la identidad de NUTA Espazioa: tinta casi negra, blanco de galería y el acento lima. Cabecera y pie propios; el resto lo hereda del padre. Author: NUTA Espazioa Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.7 Requires PHP: 8.0 Text Domain: nuta-espazioa */ /* ========================================================================== Identidad. Los mismos tonos que el panel y los emails: una sola marca. ========================================================================== */ :root { --nuta-ink: #304254; --nuta-lima: #FF6D4D; --nuta-papel: #FAEFE0; --nuta-linea: #EEE4DB; --nuta-suave: #6E6E6A; } /* La página siempre llena la pantalla: en las cortas, el contenido crece y el pie queda abajo del todo en vez de flotar a media altura. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .wp-site-blocks > main { flex: 1 0 auto; } /* ========================================================================== FONDO VIVO · dos velos del color de la casa que se mueven muy despacio. Se pintan con el mismo --nuta-lima que todo lo demás, así que siguen al color que se elija en La web › Estilo sin tocar nada aquí. Por qué así y no de otra manera: · Son elementos FIJOS que se mueven con transform. Eso lo hace la tarjeta gráfica sola, sin repintar la página. Animar background-position obliga a repintar el fondo entero en cada fotograma y en un móvil se nota. · Nada de background-attachment: fixed, que en iOS va a tirones o se queda quieto del todo. Con position: fixed se ve igual en todas partes. · Van en la capa -1: por debajo de TODO el contenido sin tener que subir la página a una capa propia. Es importante que no la suba, porque eso encerraría los modales y la burbuja de chat, que vive fuera, se les pondría delante. El precio es que el color del papel tiene que pasar de a la raíz: si se quedara en el body, taparía el degradado. · Solo opacidad y transform: no ocupan sitio, no mueven nada de su lugar y no cambian el CLS. Y como van debajo, no hay contrastes que revisar. ========================================================================== */ :root { background-color: #FFFBF5; } html body { background-color: transparent; } body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 80vmax; height: 80vmax; /* closest-side: el color se apaga justo en el borde, sin canto de círculo. */ background: radial-gradient(circle closest-side, var(--nuta-lima), transparent); } body::before { top: -26vmax; left: -22vmax; /* La opacidad la afina el plugin según el color elegido en La web › Estilo: uno pálido tiñe menos y necesita más velo para notarse igual que el coral de fábrica (nuta_paleta(), en helpers.php). */ opacity: var(--nuta-velo-1, .17); animation: nuta-fondo-a 34s ease-in-out infinite alternate; } body::after { bottom: -30vmax; right: -24vmax; opacity: var(--nuta-velo-2, .12); animation: nuta-fondo-b 46s ease-in-out infinite alternate; } @keyframes nuta-fondo-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(13vmax, 9vmax, 0) scale(1.18); } } @keyframes nuta-fondo-b { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(-11vmax, -8vmax, 0) scale(.92); } } /* --- Portada: el vídeo obliga a hacerlo de otra manera --------------------- La página del vídeo pinta una BANDA blanca opaca desde donde acaba el héroe hasta el pie (modulos.css): es lo que impide que el vídeo, que se queda pegado detrás, se asome por los huecos entre secciones. Esa banda tapaba el fondo vivo y la portada se quedaba plana. Aquí el degradado se pinta por ENCIMA de la banda y por DEBAJO del contenido: main::after va después de la banda en el orden del documento, y las secciones que siguen al vídeo ya viajan en una capa superior. Es una sola capa con los dos velos dentro (no hay un segundo sitio donde pintar después de la banda), y las de body sobran aquí: no se verían. */ body:has( .nuta-vid-modulo )::before, body:has( .nuta-vid-modulo )::after { content: none; } /* El pie sí necesita subir: no está posicionado, y sin esto el degradado de la capa 0 le pasaría por encima y le lavaría la tinta. */ body:has( .nuta-vid-modulo ) footer.wp-block-template-part { position: relative; z-index: 1; } /* Esa capa cae también sobre el vídeo, que va por debajo de la banda. Por eso arranca APAGADA y solo se enciende cuando ya has pasado el héroe (lo hace nuta.js poniendo la clase de abajo): así el vídeo de portada se ve con sus colores, sin un velo encima. */ body:has( .nuta-vid-modulo ) main::after { content: ""; position: fixed; inset: -12vmax; /* de sobra, para que al moverse no deje bordes */ z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(38vmax 38vmax at 20% 26%, var(--nuta-lima), transparent), radial-gradient(32vmax 32vmax at 84% 82%, var(--nuta-lima), transparent); animation: nuta-fondo-c 40s ease-in-out infinite alternate; } html.nuta-fondo-tras-video body:has( .nuta-vid-modulo ) main::after { opacity: var(--nuta-velo-3, .15); } @keyframes nuta-fondo-c { from { transform: translate3d(-3vmax, -2vmax, 0) scale(1); } to { transform: translate3d(5vmax, 4vmax, 0) scale(1.14); } } /* A quien pide menos movimiento se le deja el degradado, pero quieto. */ @media (prefers-reduced-motion: reduce) { body::before, body::after, body:has( .nuta-vid-modulo ) main::after { animation: none; transition: none; } } /* En el panel y en el área de alumnas, no: son pantallas de trabajo con tablas, y ahí el fondo tiene que estar callado. */ body.nuta-bo-page::before, body.nuta-bo-page::after { content: none; } /* ========================================================================== Cabecera: blanca, filete de tinta y la raya lima — la firma de los emails. ========================================================================== */ .nuta-cab { background: #FFFBF5; border-bottom: 2px solid var(--nuta-ink); /* La raya lima va como sombra para no sumar un elemento más */ box-shadow: 0 6px 0 0 var(--nuta-lima); margin-bottom: 6px; } /* Fija SIEMPRE arriba al hacer scroll. El sticky vive en el ENVOLTORIO del template part: en .nuta-cab a solas solo podía pegarse dentro de su propio alto (su padre mide lo mismo que ella), o sea, nunca. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 120; } /* Con la barra de admin de WordPress visible, la cabecera se pega debajo de ella */ .admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); } .nuta-cab-in { display: flex; align-items: center; gap: 1.6rem; max-width: 1200px; margin: 0 auto; padding: .9rem 1.5rem; } .nuta-cab-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--nuta-ink); flex: none; } .nuta-cab-brand svg { width: 40px; height: 40px; fill: currentColor; display: block; } .nuta-cab-brand span { font-weight: 800; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .nuta-cab-brand:hover { color: var(--nuta-ink); } /* La navegación (el bloque de navegación, gestionado desde el panel). Ojo: el bloque repite la clase en la