/*
* Helena Sunday - extras.css
*
* SOLO lo que theme.json no puede expresar.
*
* Prohibido aqui: valores de color, tamanos de fuente y valores de espaciado.
* Todo eso vive en theme.json; el oscuro se deriva de ahi. Si necesitas
* un color, usa var(--wp--preset--color--*); si necesitas espaciado, usa
* var(--wp--preset--spacing--*).
*/
/* -------------------------------------------------------------------------
* 1. Estado inicial de las animaciones
*
* Se oculta unicamente si JS esta activo (.helenasunday-js la pone un script inline
* en el head) y si el visitante no ha pedido reducir el movimiento. Sin JS o
* con prefers-reduced-motion, el contenido nunca llega a ocultarse.
* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.helenasunday-js [data-anim]:not(.helenasunday-anim-ready) {
opacity: 0;
}
}
/* -------------------------------------------------------------------------
* 2. Foco visible
*
* TODO el foco vive aqui, y a proposito.
*
* theme.json solo admite :hover, :focus, :active y :visited. No admite
* :focus-visible, que es el que distingue el foco por teclado del foco por
* raton. Si el anillo se declara ahi, aparece tambien al hacer clic, que es
* justo lo que no se quiere.
*
* El COLOR sigue saliendo de theme.json a traves de la variable de preset: lo
* que vive aqui es el criterio de cuando mostrarlo, no el valor.
* ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
/* Sobre relleno primario el anillo necesita contraste contra el propio boton. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
outline-color: var(--wp--preset--color--on-surface);
}
/* El anillo nunca queda recortado por el recorte de la onda. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
overflow: visible;
}
/* -------------------------------------------------------------------------
* 3. Switch de esquema de color
*
* El markup lo construye assets/js/color-scheme.js. Aqui su aspecto y el
* indicador que viaja entre opciones.
*
* El indicador NO salta: se estira hasta cubrir origen y destino, y luego se
* recoge sobre el destino. Ese estiramiento es lo que da la sensacion de
* gusano. Las dos fases las coordina el JS; aqui solo estan las curvas.
*
* Cada boton lleva su icono Tabler y solo el activo despliega su etiqueta de
* texto; en los otros dos la etiqueta sigue en el DOM (el nombre accesible no
* depende de que se vea) pero colapsada a max-width:0, nunca con display:none.
* Al desplegarse o recogerse cambia el ancho del propio boton, y el indicador
* lo sigue: eso lo corrige el JS con ResizeObserver y el transitionend de la
* etiqueta, no esta hoja.
* ---------------------------------------------------------------------- */
.helenasunday-scheme-switch:empty {
display: none;
}
.helenasunday-scheme-switch__group {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: var(--helenasunday-shape-full);
background-color: var(--wp--preset--color--surface-container-high);
}
/* El indicador va detras de las etiquetas. */
.helenasunday-scheme-switch__thumb {
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 0;
border-radius: var(--helenasunday-shape-full);
background-color: var(--wp--preset--color--primary);
pointer-events: none;
z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
.helenasunday-scheme-switch__thumb {
transition:
left 0.4s var(--helenasunday-spring),
width 0.4s var(--helenasunday-spring);
}
/* Fase de estiramiento: mas corta y sin rebote, para que el rebote se note
solo al recogerse sobre el destino. */
.helenasunday-scheme-switch__thumb.is-stretching {
transition:
left 0.16s var(--helenasunday-ease-effect),
width 0.16s var(--helenasunday-ease-effect);
}
}
.helenasunday-scheme-switch__button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: 0.4em;
padding-inline: 1em;
border: 0;
border-radius: var(--helenasunday-shape-full);
background: transparent;
color: var(--wp--preset--color--on-surface-variant);
font-family: inherit;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 500;
line-height: 1.2;
cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
.helenasunday-scheme-switch__button {
transition:
color 0.22s var(--helenasunday-ease-effect),
/* Mas corta que el asentado del indicador (160ms + 0.4s) a proposito:
el JS lee el ancho final del boton a los 160ms de iniciar el viaje
del gusano, y si el padding siguiera cambiando en ese instante el
indicador se quedaria corto. Ver la nota en color-scheme.js. */
padding-inline 0.14s var(--helenasunday-ease-effect);
}
}
.helenasunday-scheme-switch__button:hover {
color: var(--wp--preset--color--on-surface);
}
.helenasunday-scheme-switch__button[aria-pressed="true"] {
color: var(--wp--preset--color--on-primary);
}
.helenasunday-scheme-switch__button[aria-pressed="true"]:hover {
color: var(--wp--preset--color--on-primary);
}
/* Con icono, el boton parte mas angosto (el icono solo no necesita el mismo
aire que el icono con etiqueta) y respira mas cuando esta seleccionado. Sin
icono (respaldo de texto solo) mantiene el padding de siempre, fijo. */
.helenasunday-scheme-switch__button--has-icon {
padding-inline: 0.6em;
}
.helenasunday-scheme-switch__button--has-icon[aria-pressed="true"] {
padding-inline: 1em;
}
.helenasunday-scheme-switch__icon {
display: inline-flex;
flex-shrink: 0;
}
/* La etiqueta lleva su propio margen hacia el icono en vez de un gap del
flex: un gap no se puede colapsar a la vez que el ancho de la etiqueta sin
dejar un hueco fantasma cuando el boton se queda solo con el icono. */
.helenasunday-scheme-switch__button--has-icon .helenasunday-scheme-switch__label {
display: inline-block;
overflow: hidden;
max-width: 0;
margin-inline-start: 0;
opacity: 0;
white-space: nowrap;
vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
.helenasunday-scheme-switch__button--has-icon .helenasunday-scheme-switch__label {
/* Misma duracion que el padding-inline del boton, y por el mismo
motivo: tiene que haber terminado antes de que el JS mida el ancho
final del boton activo, a los 160ms de iniciar el viaje del
indicador. */
transition:
max-width 0.14s var(--helenasunday-ease-effect),
margin-inline-start 0.14s var(--helenasunday-ease-effect),
opacity 0.14s var(--helenasunday-ease-effect);
}
}
.helenasunday-scheme-switch__button--has-icon[aria-pressed="true"] .helenasunday-scheme-switch__label {
/* Mayor que cualquier etiqueta traducida: el ancho visible lo da el propio
texto, esto solo evita que la transicion lo recorte. */
max-width: 10em;
margin-inline-start: 0.4em;
opacity: 1;
}
/* -------------------------------------------------------------------------
* 4. Iconos
*
* El tamano se deriva de font-size, que es preset de theme.json, para no
* duplicar aqui una escala. Un icono dentro de un bloque con la clase
* has-x-large-font-size mide 1em de ese tamano y punto.
* ---------------------------------------------------------------------- */
.helenasunday-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
}
/* -------------------------------------------------------------------------
* 5. Utilidades de composicion
*
* Piezas que se repiten en muchos patterns y que los bloques del core no
* resuelven por si solos. Todas se dimensionan en em o en presets, para no
* introducir aqui ninguna escala paralela a la de theme.json.
* ---------------------------------------------------------------------- */
/* Icono destacado: cuadrado redondeado con el icono centrado dentro.
El tamano sale del font-size del propio elemento. */
.helenasunday-featured-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 0.45em;
margin: 0;
/* El core aplica padding a cualquier parrafo con fondo
(p.has-background). Sin esto, la caja se estira y deja de ser cuadrada. */
padding: 0;
}
/* Tarjeta que ocupa toda la altura de su columna, para que una fila de
tarjetas quede alineada aunque tengan distinta cantidad de texto. */
.helenasunday-card {
height: 100%;
box-sizing: border-box;
}
/* Tira de logotipos: neutraliza el color para que no compitan entre si
ni con la marca del sitio. */
.helenasunday-logos img {
filter: grayscale(1);
opacity: 0.55;
transition: opacity 0.2s ease, filter 0.2s ease;
}
.helenasunday-logos img:hover {
filter: grayscale(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.helenasunday-logos img {
transition: none;
}
}
/* Numero de paso: circulo con la cifra centrada. */
.helenasunday-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
margin: 0;
padding: 0;
font-variant-numeric: tabular-nums;
}
/* Lista sin vinetas para checklists con icono propio. */
.helenasunday-checklist {
list-style: none;
padding-left: 0;
}
.helenasunday-checklist li {
display: flex;
align-items: flex-start;
gap: 0.6em;
}
/* -------------------------------------------------------------------------
* 6. Lenguaje expresivo (M3)
*
* Escala de formas de Material 3: 0, 4, 8, 12, 16, 20, 28, 32, 48 y full.
* No se inventan valores intermedios.
*
* Radios CONCENTRICOS: cuando una forma redondeada va dentro de otra, el radio
* interior es el exterior menos el hueco que las separa. Si no, los arcos no
* son paralelos y la esquina se ve mal aunque no sepas por que.
*
* radio interior = radio exterior - padding
*
* Aqui hay geometria y movimiento. Ningun color, ningun tamano de fuente y
* ningun valor de espaciado propio: eso sale de theme.json.
* ---------------------------------------------------------------------- */
:root {
--helenasunday-shape-xs: 4px;
--helenasunday-shape-s: 8px;
--helenasunday-shape-m: 12px;
--helenasunday-shape-l: 16px;
--helenasunday-shape-xl: 28px;
--helenasunday-shape-2xl: 32px;
--helenasunday-shape-3xl: 48px;
--helenasunday-shape-full: 999px;
/* Muelles derivados de la fisica, no dibujados a mano. La respuesta de un
sistema de segundo orden ante un escalon, muestreada en 34 puntos.
El sobrepaso depende solo del amortiguamiento: Mp = e^(-pi*z/raiz(1-z^2)).
Con z=0.9 sale un 0,2%, que no se ve y se siente como un ease-out. Por eso
el muelle expresivo va a z=0.6, que es el token "expressive spatial" de M3.
Muelle expresivo. z=0.6, k=800.
Duracion natural 407ms, sobrepaso 9.4%, pico al 34% del recorrido. */
--helenasunday-spring: linear(0.0000, 0.0527 3.0%, 0.1806 6.1%, 0.3454 9.1%, 0.5183 12.1%, 0.6795 15.2%, 0.8171 18.2%, 0.9256 21.2%, 1.0043 24.2%, 1.0557 27.3%, 1.0840 30.3%, 1.0944 33.3%, 1.0919 36.4%, 1.0812 39.4%, 1.0662 42.4%, 1.0498 45.5%, 1.0341 48.5%, 1.0204 51.5%, 1.0094 54.5%, 1.0012 57.6%, 0.9957 60.6%, 0.9925 63.6%, 0.9912 66.7%, 0.9911 69.7%, 0.9920 72.7%, 0.9933 75.8%, 0.9949 78.8%, 0.9964 81.8%, 0.9978 84.8%, 0.9989 87.9%, 0.9997 90.9%, 1.0003 93.9%, 1.0006 97.0%, 1.0000);
/* Curva de efecto: para color y opacidad. Sin rebote, por definicion. */
--helenasunday-ease-effect: cubic-bezier(0.2, 0, 0, 1);
/* Elevacion. Dos sombras por nivel, como M3: una corta y marcada que ancla
el objeto, y otra larga y difusa que da la altura.
EL COLOR DE LA SOMBRA NO ES NEGRO PURO. Lleva un 40% del tono del propio
elemento y un 60% de negro. Una sombra negra bajo una tarjeta azul se ve
sucia, porque en la realidad la luz que rodea al objeto tine su sombra.
Con el tinte, la sombra pertenece a la pieza.
El tono lo aporta --helenasunday-tint, que cada elemento fija segun su clase de
fondo (ver el mapa mas abajo). Si no hay ninguna, se asume la superficie.
El alfa se aplica con color-mix contra transparent, para no tener que
escribir el color dos veces. */
--helenasunday-tint: var(--wp--preset--color--surface);
--helenasunday-shadow-a: 7%;
--helenasunday-shadow-b: 5%;
/* En reposo NO hay sombra. Este token existe solo para que la transicion
pueda interpolar: misma geometria que el nivel de hover, alfa cero.
Pasar de "none" a una sombra da un salto seco en varios navegadores. */
--helenasunday-elev-0:
0 2px 4px transparent,
0 6px 14px 2px transparent;
/* El nivel de hover NO se declara aqui como token. Una propiedad
personalizada sustituye sus var() en el elemento donde se declara, no
donde se hereda: si viviera en :root, --helenasunday-tint valdria siempre el de
:root y el tinte por elemento no serviria de nada. Por eso la expresion
va escrita en las dos reglas que la usan. */
}
/* Sobre fondo oscuro la sombra necesita mucho mas cuerpo para leerse: la
diferencia entre el negro y una superficie oscura es minima. El tinte se
mantiene, solo sube el alfa. */
:root[data-theme="dark"] {
--helenasunday-shadow-a: 55%;
--helenasunday-shadow-b: 40%;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--helenasunday-shadow-a: 55%;
--helenasunday-shadow-b: 40%;
}
}
/* Mapa de tinte: cada clase de fondo del core declara su propio tono, para que
la sombra que proyecte lleve ese color dentro. Se genera desde la paleta, asi
que anadir un color a theme.json obliga a anadirlo aqui tambien. */
.has-primary-background-color { --helenasunday-tint: var(--wp--preset--color--primary); }
.has-on-primary-background-color { --helenasunday-tint: var(--wp--preset--color--on-primary); }
.has-primary-container-background-color { --helenasunday-tint: var(--wp--preset--color--primary-container); }
.has-on-primary-container-background-color { --helenasunday-tint: var(--wp--preset--color--on-primary-container); }
.has-secondary-container-background-color { --helenasunday-tint: var(--wp--preset--color--secondary-container); }
.has-on-secondary-container-background-color { --helenasunday-tint: var(--wp--preset--color--on-secondary-container); }
.has-tertiary-background-color { --helenasunday-tint: var(--wp--preset--color--tertiary); }
.has-tertiary-container-background-color { --helenasunday-tint: var(--wp--preset--color--tertiary-container); }
.has-on-tertiary-container-background-color { --helenasunday-tint: var(--wp--preset--color--on-tertiary-container); }
.has-surface-background-color { --helenasunday-tint: var(--wp--preset--color--surface); }
.has-surface-container-background-color { --helenasunday-tint: var(--wp--preset--color--surface-container); }
.has-surface-container-high-background-color { --helenasunday-tint: var(--wp--preset--color--surface-container-high); }
.has-on-surface-background-color { --helenasunday-tint: var(--wp--preset--color--on-surface); }
.has-on-surface-variant-background-color { --helenasunday-tint: var(--wp--preset--color--on-surface-variant); }
.has-outline-variant-background-color { --helenasunday-tint: var(--wp--preset--color--outline-variant); }
.has-inverse-surface-background-color { --helenasunday-tint: var(--wp--preset--color--inverse-surface); }
.has-on-inverse-surface-background-color { --helenasunday-tint: var(--wp--preset--color--on-inverse-surface); }
.has-surface-container-low-background-color { --helenasunday-tint: var(--wp--preset--color--surface-container-low); }
.has-outline-background-color { --helenasunday-tint: var(--wp--preset--color--outline); }
/* Los botones toman su fondo de theme.json, sin clase de preset, asi que su
tono por defecto se declara aparte. Va antes del mapa para que una clase de
fondo explicita en el boton siga ganando. */
:where(.wp-element-button, .wp-block-button__link) {
--helenasunday-tint: var(--wp--preset--color--primary);
}
/* --- Superficie tonal -------------------------------------------------- */
.helenasunday-surface {
--helenasunday-surface-radius: var(--helenasunday-shape-xl);
--helenasunday-surface-pad: var(--wp--preset--spacing--40);
border: 0;
border-radius: var(--helenasunday-surface-radius);
height: 100%;
box-sizing: border-box;
}
.helenasunday-surface--lg {
--helenasunday-surface-radius: var(--helenasunday-shape-2xl);
}
.helenasunday-surface--xl {
--helenasunday-surface-radius: var(--helenasunday-shape-3xl);
}
/* Recorta lo que asome por las esquinas, para tarjetas con imagen a sangre.
Va en clase y no en linea: un estilo suelto que el bloque no declare hace
que el editor marque el bloque como invalido. */
.helenasunday-surface--clip {
overflow: hidden;
}
/* Hijo anidado en la esquina de una superficie: radio concentrico.
La resta puede quedar en negativo si el padding supera al radio; en ese caso
max() lo deja en 0, que es lo correcto: la curva ya se ha consumido. */
.helenasunday-surface > .helenasunday-inset {
border-radius: max(0px, calc(var(--helenasunday-surface-radius) - var(--helenasunday-surface-pad)));
overflow: hidden;
}
/* --- Movimiento -------------------------------------------------------- */
/* Plana en reposo. La separacion respecto al fondo la da el tono, no la
sombra: es lo que hace M3 con las tarjetas rellenas. */
.helenasunday-surface {
box-shadow: var(--helenasunday-elev-0);
}
@media (prefers-reduced-motion: no-preference) {
/* La entrada usa el muelle; la salida, una curva plana y algo mas larga,
para que al retirar el cursor no rebote. */
.helenasunday-surface {
transition:
transform 0.35s var(--helenasunday-ease-effect),
box-shadow 0.35s var(--helenasunday-ease-effect);
}
.helenasunday-surface:hover {
transform: translateY(-3px);
box-shadow:
0 2px 4px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-a), transparent),
0 6px 14px 2px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-b), transparent);
transition:
transform 0.4s var(--helenasunday-spring),
box-shadow 0.25s var(--helenasunday-ease-effect);
}
}
/* --- Plato del icono ----------------------------------------------------
El contenedor sobre el que se posa el glifo. Cuatro formas.
Las dos primeras son un radio de borde y ya. Las otras dos no se pueden
dibujar con border-radius, asi que van con mascara: un SVG en linea en
coordenadas de 0 a 100 estirado al tamano del plato. Mascara y no clip-path
porque clip-path: path() no escala con el elemento.
Los trazados no estan dibujados a mano, salen de su formula:
Superelipse r(a) = (|cos a|^4 + |sin a|^4)^(-1/4)
Petalos r(a) = 1 + 0,16 cos(8a)
convertidas a beziers cubicas con la tangente analitica en cada muestra, que
es lo que evita que se vean facetas. El metodo esta en la documentacion del
proyecto, fuera del tema.
Las URI se declaran una sola vez aqui porque repetirlas en cada regla
multiplicaba por cuatro el peso de la hoja. */
:root {
--helenasunday-plate-squircle: url("data:image/svg+xml,");
--helenasunday-plate-burst: url("data:image/svg+xml,");
}
/* Proporcion M3: el glifo ocupa algo menos de la mitad del contenedor. El
tamano sale del font-size, que es preset de theme.json. */
.helenasunday-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4em;
height: 2.4em;
margin: 0;
padding: 0;
border-radius: var(--helenasunday-shape-s);
}
.helenasunday-plate-squircle .helenasunday-icon-box,
.helenasunday-plate-burst .helenasunday-icon-box,
.helenasunday-icon-box.helenasunday-icon-box--squircle,
.helenasunday-icon-box.helenasunday-icon-box--burst {
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Forma por defecto: la elegida en el panel, que llega como clase del body.
OJO: estas reglas y las de instancia empatan en especificidad a proposito,
asi que las de instancia van DESPUES para poder ganar por orden. */
.helenasunday-plate-soft .helenasunday-icon-box {
border-radius: var(--helenasunday-shape-s);
}
.helenasunday-plate-circle .helenasunday-icon-box {
border-radius: var(--helenasunday-shape-full);
}
.helenasunday-plate-squircle .helenasunday-icon-box {
border-radius: 0;
-webkit-mask-image: var(--helenasunday-plate-squircle);
mask-image: var(--helenasunday-plate-squircle);
}
.helenasunday-plate-burst .helenasunday-icon-box {
border-radius: 0;
-webkit-mask-image: var(--helenasunday-plate-burst);
mask-image: var(--helenasunday-plate-burst);
}
/* Forma suelta para un bloque concreto, por encima de la del panel. */
.helenasunday-icon-box.helenasunday-icon-box--soft {
border-radius: var(--helenasunday-shape-s);
}
.helenasunday-icon-box.helenasunday-icon-box--circle {
border-radius: var(--helenasunday-shape-full);
}
.helenasunday-icon-box.helenasunday-icon-box--squircle {
border-radius: 0;
-webkit-mask-image: var(--helenasunday-plate-squircle);
mask-image: var(--helenasunday-plate-squircle);
}
.helenasunday-icon-box.helenasunday-icon-box--burst {
border-radius: 0;
-webkit-mask-image: var(--helenasunday-plate-burst);
mask-image: var(--helenasunday-plate-burst);
}
.helenasunday-icon-box--center {
display: flex;
margin-inline: auto;
}
/* --- Botones: elevacion y onda ------------------------------------------ */
.wp-element-button,
.wp-block-button__link {
position: relative;
overflow: hidden;
/* Plano en reposo: el CTA ya destaca por color, no necesita sombra. */
box-shadow: var(--helenasunday-elev-0);
/* La onda se dibuja dentro, asi que hay que recortar por la forma real. */
isolation: isolate;
}
@media (prefers-reduced-motion: no-preference) {
.wp-element-button,
.wp-block-button__link {
transition:
box-shadow 0.3s var(--helenasunday-ease-effect),
transform 0.3s var(--helenasunday-ease-effect),
background-color 0.25s var(--helenasunday-ease-effect);
}
.wp-element-button:hover,
.wp-block-button__link:hover {
box-shadow:
0 2px 4px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-a), transparent),
0 6px 14px 2px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-b), transparent);
transform: translateY(-2px);
transition:
box-shadow 0.25s var(--helenasunday-ease-effect),
transform 0.4s var(--helenasunday-spring),
background-color 0.25s var(--helenasunday-ease-effect);
}
/* Al mantener pulsado baja y pierde altura: el objeto se acerca al fondo. */
.wp-element-button:active,
.wp-block-button__link:active {
transform: translateY(0);
box-shadow: var(--helenasunday-elev-0);
transition-duration: 0.08s;
}
}
/* Onda. El punto de origen lo fija el JS en --helenasunday-ripple-x / -y.
El color es currentColor, es decir el color de texto del propio boton, a muy
baja opacidad: aclara el CTA con su propio tono en vez de meter un color
ajeno. */
.helenasunday-ripple {
position: absolute;
top: var(--helenasunday-ripple-y, 50%);
left: var(--helenasunday-ripple-x, 50%);
width: var(--helenasunday-ripple-size, 100px);
height: var(--helenasunday-ripple-size, 100px);
margin-top: calc(var(--helenasunday-ripple-size, 100px) / -2);
margin-left: calc(var(--helenasunday-ripple-size, 100px) / -2);
border-radius: 50%;
background-color: currentColor;
opacity: 0;
transform: scale(0);
pointer-events: none;
z-index: -1;
animation: helenasunday-ripple 550ms var(--helenasunday-ease-effect) forwards;
}
@keyframes helenasunday-ripple {
0% {
transform: scale(0);
opacity: 0.22;
}
60% {
opacity: 0.14;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.helenasunday-ripple {
display: none;
}
}
/* --- Imagenes ------------------------------------------------------------ */
/* El radio por defecto lo fija theme.json apuntando a --helenasunday-shape-s, asi que
core/image y la imagen destacada ya lo llevan y se puede ajustar bloque a
bloque desde el editor.
La imagen de un media-text no es un core/image, asi que theme.json no la
alcanza. Se iguala aqui, con el mismo token: un solo sitio donde cambiarlo. */
.wp-block-media-text__media img {
border-radius: var(--helenasunday-shape-s);
}
/* --- Marcador de imagen -------------------------------------------------- */
/* El SVG es transparente: el fondo lo pone el tema, no el fichero. Asi el
hueco sigue al esquema de color sin necesidad de dos ficheros.
El selector deja de aplicar en cuanto se asigna una imagen real.
Ojo con el operador: tiene que ser *= y no $=, porque el src lleva la
version detras (?v=...) y con $= dejaria de casar. Y casa por la ruta sin
el nombre completo porque el fichero se numera cada vez que cambia el
dibujo (ver helenasunday_placeholder_src()): placeholder-2.svg hoy, -3 manana. */
img[src*="assets/images/placeholder"] {
background-color: var(--wp--preset--color--surface-container-high);
}
/* --- Preguntas frecuentes ---------------------------------------------- */
.helenasunday-faq-item {
border-radius: var(--helenasunday-shape-l);
overflow: hidden;
}
.helenasunday-faq-item > summary {
position: relative;
/* Hueco para el signo. El signo se ancla al borde del summary, que ya
esta metido por el padding de la ficha: asi su distancia al borde de la
tarjeta es exactamente la misma que arriba y abajo. Ese era el
desajuste: antes llevaba un inset propio que se sumaba al padding. */
padding-inline-end: 2.25em;
list-style: none;
cursor: pointer;
}
.helenasunday-faq-item > summary::-webkit-details-marker {
display: none;
}
/* El signo son dos barras: una fija en horizontal y otra que empieza vertical.
Juntas dibujan un mas; al abrir, la segunda gira hasta la horizontal y las
dos se superponen en un menos. */
.helenasunday-faq-item > summary::before,
.helenasunday-faq-item > summary::after {
content: "";
position: absolute;
inset-inline-end: 0;
top: 50%;
width: 0.85em;
height: 2px;
border-radius: 2px;
background-color: currentColor;
transform: translateY(-50%);
}
.helenasunday-faq-item > summary::after {
transform: translateY(-50%) rotate(90deg);
}
.helenasunday-faq-item[open] > summary::after {
transform: translateY(-50%) rotate(0deg);
}
/* El summary reacciona al puntero y al teclado como cualquier control. */
.helenasunday-faq-item > summary:hover {
color: var(--wp--preset--color--primary);
}
.helenasunday-faq-item > summary:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: -2px;
border-radius: var(--helenasunday-shape-l);
}
@media (prefers-reduced-motion: no-preference) {
.helenasunday-faq-item > summary::after {
transition: transform 0.4s var(--helenasunday-spring);
}
.helenasunday-faq-item > summary {
transition: color 0.2s var(--helenasunday-ease-effect);
}
/* El despliegue lo anima interactions.js midiendo la altura real. El alto
se fija en linea durante la animacion, por eso aqui no hay transition:
la curva la aplica la Web Animations API con este mismo muelle. */
.helenasunday-faq-item.is-animating {
overflow: hidden;
}
}
/* --- Etiqueta en capsula ----------------------------------------------- */
.helenasunday-chip {
display: inline-block;
border-radius: var(--helenasunday-shape-full);
padding: 0.35em 0.9em;
margin: 0;
}
/* --- Banda de seccion --------------------------------------------------- */
.helenasunday-band {
border-radius: var(--helenasunday-shape-3xl);
overflow: hidden;
}
/* --- Tipografia --------------------------------------------------------- */
/* Equilibra el reparto de palabras en titulares cortos, para que no quede una
linea huerfana de dos palabras. */
.helenasunday-balance {
text-wrap: balance;
}
/* Numero grande, con cifras de ancho fijo. */
.helenasunday-figure {
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
/* -------------------------------------------------------------------------
* 7. Microinteracciones del resto de componentes
*
* Un principio para todas: el movimiento espacial (posicion, tamano, forma)
* usa el muelle y admite rebote; los efectos (color, opacidad) usan curva
* plana. Es la separacion que hace M3 y evita que un cambio de color parezca
* que tiembla.
*
* Todo lo de aqui se apaga con prefers-reduced-motion.
* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* --- Enlaces de navegacion ------------------------------------------
Subrayado que crece desde el centro. No se usa text-decoration porque
no se puede animar; una barra propia si, y ademas se controla su grosor
y su distancia a la linea base.
El enlace destacado (wp-element-button, ver seccion 8) queda fuera: es
un boton, con sus propias transiciones y sin subrayado. */
.wp-block-navigation-item__content:not(.wp-element-button) {
position: relative;
transition: color 0.2s var(--helenasunday-ease-effect);
}
.wp-block-navigation-item__content:not(.wp-element-button)::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: -0.28em;
height: 2px;
border-radius: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.4s var(--helenasunday-spring);
}
.wp-block-navigation-item__content:not(.wp-element-button):hover::after,
.wp-block-navigation-item__content:not(.wp-element-button):focus-visible::after {
transform: scaleX(1);
}
/* La pagina en la que estas ya lleva el subrayado puesto. */
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content:not(.wp-element-button)::after {
transform: scaleX(1);
}
/* El chevron de un submenu gira con el mismo muelle. El giro lo pone el
core al abrir (aria-expanded); aqui solo se le da transicion. */
.wp-block-navigation__submenu-icon svg {
transition: transform 0.4s var(--helenasunday-spring);
}
/* --- Enlaces de contenido -------------------------------------------
El subrayado se acerca al texto y engorda al pasar por encima. */
.wp-block-post-content a:not(.wp-element-button),
.wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
transition:
color 0.2s var(--helenasunday-ease-effect),
text-underline-offset 0.2s var(--helenasunday-ease-effect),
text-decoration-thickness 0.2s var(--helenasunday-ease-effect);
}
.wp-block-post-content a:not(.wp-element-button):hover,
.wp-block-group a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover {
text-underline-offset: 0.26em;
text-decoration-thickness: 2px;
}
/* --- Titulo del sitio ------------------------------------------------ */
.wp-block-site-title a {
transition: color 0.2s var(--helenasunday-ease-effect);
}
.wp-block-site-title a:hover {
color: var(--wp--preset--color--primary);
}
/* --- Buscador --------------------------------------------------------
El campo gana borde y anillo al enfocarse, sin saltar de tamano. */
.wp-block-search__input {
transition:
border-color 0.2s var(--helenasunday-ease-effect),
box-shadow 0.2s var(--helenasunday-ease-effect);
}
.wp-block-search__input:focus {
outline: none;
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
/* --- Imagen dentro de una tarjeta ------------------------------------
Acompana al levantamiento de la tarjeta con un acercamiento muy leve.
Se mueve la imagen, no la tarjeta, asi que el radio no se deforma. */
.helenasunday-surface img {
transition: transform 0.55s var(--helenasunday-ease-effect);
}
.helenasunday-surface:hover img {
transform: scale(1.03);
}
/* --- Caja de icono ---------------------------------------------------
Al levantar la tarjeta, el icono crece un punto. Ata las dos piezas:
se leen como un mismo objeto y no como dos capas sueltas. */
.helenasunday-icon-box {
transition: transform 0.4s var(--helenasunday-spring);
}
.helenasunday-surface:hover .helenasunday-icon-box {
transform: scale(1.06);
}
/* --- Tira de logotipos ------------------------------------------------ */
.helenasunday-logos img {
transition:
opacity 0.25s var(--helenasunday-ease-effect),
filter 0.25s var(--helenasunday-ease-effect),
transform 0.4s var(--helenasunday-spring);
}
.helenasunday-logos img:hover {
transform: scale(1.04);
}
/* --- Selector de idioma ----------------------------------------------
Mismo tratamiento que un enlace de contenido: el idioma activo ya viene
marcado por el plugin con aria-current. */
.wp-block-polylang-language-switcher a {
text-underline-offset: 0.18em;
transition:
color 0.2s var(--helenasunday-ease-effect),
text-underline-offset 0.2s var(--helenasunday-ease-effect);
}
.wp-block-polylang-language-switcher a:hover {
text-underline-offset: 0.26em;
}
}
/* El idioma activo se distingue sin depender del movimiento. */
.wp-block-polylang-language-switcher [aria-current] {
font-weight: 500;
text-decoration: none;
color: var(--wp--preset--color--on-surface);
}
/* Los chips no son interactivos: son etiquetas. No llevan estado de puntero
a proposito, para no sugerir que se pueden pulsar. */
/* -------------------------------------------------------------------------
* 8. Cabecera y menu movil
*
* El menu movil es un modulo propio: inc/mobile-menu.php imprime el panel al
* final del body y assets/js/mobile-menu.js lo abre. El bloque de navegacion
* del core se renderiza con overlayMenu "never", asi que no trae ni boton ni
* desplegable ni una sola regla que haya que contrarrestar aqui.
*
* ESTRUCTURA
*
* header
* div.helenasunday-header-bar
* site-title
* nav.wp-block-navigation <- escritorio
* button.helenasunday-menu-toggle <- movil
* div.helenasunday-menu <- hermano del header, al final del body
* div.helenasunday-menu__backdrop
* div.helenasunday-menu__sheet
*
* Con el menu abierto la cabecera se queda sin fondo ni linea y se coloca por
* ENCIMA del panel, de modo que el fondo del panel pasa por detras y lo unico
* que flota son el logotipo y el aspa. Se lee como una sola superficie.
*
* El punto de corte NO esta aqui: es configurable, y una consulta de medios no
* acepta una propiedad personalizada. Esas reglas las imprime PHP. Ver
* helenasunday_print_menu_css().
*
* Los submenus tienen dos formas: desplegable del core en escritorio (solo
* se le da aspecto) y acordeon del tema dentro del panel. Cada una tiene su
* apartado mas abajo.
* ---------------------------------------------------------------------- */
/* --- Barra de la cabecera ------------------------------------------------ */
body:not(.helenasunday-header-flat) .helenasunday-header-bar {
border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
/* Fondo de la cabecera al fijarse. Dos propiedades que leen todas las reglas
de "pegada", esten aqui (always) o en helenasunday_print_menu_css() (mobile y
desktop, que dependen del punto de corte). Asi el aspecto se decide en un
solo sitio y las reglas solo deciden cuando se pega.
Se declaran en el body y no en :root a proposito: --wp--preset--color--surface
cambia en :root con el esquema, y una propiedad declarada en :root la
resolveria una sola vez; en el body se recalcula con el esquema activo. */
body {
--helenasunday-header-bg: var(--wp--preset--color--surface);
--helenasunday-header-filter: none;
}
/* Traslucida: deja ver la pagina a traves, desenfocada. La saturacion
compensa el lavado del desenfoque sobre colores vivos. */
.helenasunday-header-frosted {
--helenasunday-header-bg: color-mix(in srgb, var(--wp--preset--color--surface) 78%, transparent);
--helenasunday-header-filter: blur(16px) saturate(150%);
}
/* Sin desenfoque no hay cristal: un fondo al 78% sobre texto que pasa por
debajo se lee mal. Se vuelve al solido. Lo mismo si el visitante pide
menos transparencia. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.helenasunday-header-frosted {
--helenasunday-header-bg: var(--wp--preset--color--surface);
--helenasunday-header-filter: none;
}
}
@media (prefers-reduced-transparency: reduce) {
.helenasunday-header-frosted {
--helenasunday-header-bg: var(--wp--preset--color--surface);
--helenasunday-header-filter: none;
}
}
.helenasunday-header-sticky-always .wp-site-blocks > header {
position: sticky;
top: 0;
z-index: 60;
background-color: var(--helenasunday-header-bg);
-webkit-backdrop-filter: var(--helenasunday-header-filter);
backdrop-filter: var(--helenasunday-header-filter);
}
/* Elevacion al hacer scroll. Coherente con el resto del tema: en reposo no hay
sombra, aparece cuando algo pasa. Aqui lo que pasa es que la pagina se ha
movido y la cabecera ha dejado de estar en su sitio. */
.helenasunday-header-elevates .wp-site-blocks > header {
box-shadow: var(--helenasunday-elev-0);
}
@media (prefers-reduced-motion: no-preference) {
.helenasunday-header-elevates .wp-site-blocks > header {
transition: box-shadow 0.3s var(--helenasunday-ease-effect);
}
}
.helenasunday-scrolled:not(.helenasunday-menu-open) .helenasunday-header-elevates.helenasunday-header-sticky-always .wp-site-blocks > header {
box-shadow:
0 2px 4px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-a), transparent),
0 6px 14px 2px color-mix(in srgb, color-mix(in srgb, var(--helenasunday-tint) 40%, #000 60%) var(--helenasunday-shadow-b), transparent);
}
/* Con el menu abierto la cabecera desaparece como superficie, pero se queda
por encima del panel para que el logotipo y el aspa sigan a la vista.
Tampoco desenfoca: con el cajon lateral estaria emborronando la pagina
oscurecida solo en la franja de la cabecera. */
.helenasunday-menu-open .wp-site-blocks > header {
position: sticky;
top: 0;
z-index: 100001;
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* La linea la pone body:not(.helenasunday-header-flat), que suma un elemento mas.
Sin el html de aqui esta regla empata por debajo y la linea se queda. */
html.helenasunday-menu-open .helenasunday-header-bar {
border-bottom-color: transparent;
}
/* Con el panel abierto la pagina de detras no se mueve. */
.helenasunday-menu-open {
overflow: hidden;
}
/* --- Enlace destacado en la barra ----------------------------------------
El estilo de bloque "Boton" (is-style-cta, en el