/* * Helena Sunday · tonos.css * * Revisión 3 (docs/DIRECCION-VISUAL.md, «Secciones a pantalla y fondo que * cambia»): cada sección de primer nivel mide una pantalla menos la * cabecera, no tiene fondo propio y declara un tono, claro u oscuro. Hay un * solo fondo, el de la página, y cambia con un fundido cuando una sección de * otro tono llega al centro de la pantalla. * * Cómo funciona: * * - Todo lo que va sobre el fondo lee un juego de propiedades propias * (--helenasunday-tono-*), definidas a partir de los roles del tema. En * claro son los roles de surface; en oscuro, los de inverse-surface. En el * esquema oscuro del sistema los roles ya vienen derivados, así que el * mismo juego da el ritmo invertido sin escribir nada más. * - Con JS (tonos.js pone .helenasunday-tonos en ), el tono es global: * lo fija el atributo data-helenasunday-tono del . Las secciones son * transparentes y la que asoma usa el tono de la página, no el suyo. * - Sin JS, cada sección oscura redefine el juego en sí misma y pinta su * propio fondo. Se ve igual, solo que el cambio es un corte. * - Las tarjetas, pegatinas, subrayadores y demás piezas con fondo propio * vuelven al juego claro: sus colores no dependen del tono de la página. * * El fundido: el fondo se funde (propiedad registrada con @property, así que * se interpola como color). El texto no se funde, cambia de golpe en el * instante en que el fondo pasa por el punto de igual contraste con las dos * tintas. Si texto y fondo se fundieran a la vez, a mitad de camino serían * los dos del mismo gris. Ver --helenasunday-tono-cambio. * * Misma disciplina que el resto: ni un hex ni un tamaño de fuente en rem. * Los initial-value de @property son palabras clave (transparent), no * colores: @property no admite var() ahí. */ /* ------------------------------------------------------------------------- * 1. Propiedades registradas * ---------------------------------------------------------------------- */ @property --helenasunday-tono-fondo { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-texto { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-texto-suave { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-borde { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-borde-suave { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-velo { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-acento { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-sobre-acento { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-tinta { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-magenta { syntax: ""; inherits: true; initial-value: transparent; } @property --helenasunday-tono-naranja { syntax: ""; inherits: true; initial-value: transparent; } /* ------------------------------------------------------------------------- * 2. Los dos juegos * * Claro: los roles de surface. Oscuro: los de inverse-surface, y para lo que * el tema no trae en inverso (texto secundario, bordes, velo) una mezcla de * la tinta inversa sobre el fondo inverso. El acento oscuro es el rosa flúor * (primary-container, 7,4:1 sobre inverse-surface): el magenta profundo se * queda en 2,9:1. Los dibujos magenta y naranja pasan a sus flúor por lo * mismo: el trazo necesita 3:1 como gráfico. * ---------------------------------------------------------------------- */ :root, .helenasunday-seccion .has-background, .helenasunday-seccion .helenasunday-video-card, .helenasunday-seccion .helenasunday-kit-form, .helenasunday-seccion .helenasunday-pill, .helenasunday-seccion .helenasunday-sticker, html.helenasunday-menu-open .wp-site-blocks > header, .wp-site-blocks > header .wp-block-navigation__submenu-container { --helenasunday-tono-fondo: var(--wp--preset--color--surface); --helenasunday-tono-texto: var(--wp--preset--color--on-surface); --helenasunday-tono-texto-suave: var(--wp--preset--color--on-surface-variant); --helenasunday-tono-borde: var(--wp--preset--color--outline); --helenasunday-tono-borde-suave: var(--wp--preset--color--outline-variant); --helenasunday-tono-velo: color-mix(in srgb, var(--wp--preset--color--on-surface) 4.5%, transparent); --helenasunday-tono-acento: var(--wp--preset--color--primary); --helenasunday-tono-sobre-acento: var(--wp--preset--color--on-primary); --helenasunday-tono-tinta: var(--wp--preset--color--on-surface); --helenasunday-tono-magenta: var(--wp--preset--color--primary); --helenasunday-tono-naranja: var(--wp--preset--color--tertiary); } :root[data-helenasunday-tono="oscuro"].helenasunday-tonos, html:not(.helenasunday-tonos) .helenasunday-seccion--oscura { --helenasunday-tono-fondo: var(--wp--preset--color--inverse-surface); --helenasunday-tono-texto: var(--wp--preset--color--on-inverse-surface); --helenasunday-tono-texto-suave: color-mix(in srgb, var(--wp--preset--color--on-inverse-surface) 80%, var(--wp--preset--color--inverse-surface)); --helenasunday-tono-borde: color-mix(in srgb, var(--wp--preset--color--on-inverse-surface) 62%, var(--wp--preset--color--inverse-surface)); --helenasunday-tono-borde-suave: color-mix(in srgb, var(--wp--preset--color--on-inverse-surface) 24%, var(--wp--preset--color--inverse-surface)); --helenasunday-tono-velo: color-mix(in srgb, var(--wp--preset--color--on-inverse-surface) 7%, transparent); --helenasunday-tono-acento: var(--wp--preset--color--primary-container); --helenasunday-tono-sobre-acento: var(--wp--preset--color--on-primary-container); --helenasunday-tono-tinta: var(--wp--preset--color--on-inverse-surface); --helenasunday-tono-magenta: var(--wp--preset--color--primary-container); --helenasunday-tono-naranja: var(--wp--preset--color--tertiary-container); } /* La pieza con fondo propio y sin color de texto propio vuelve a la tinta clara. Hace falta decirlo: el color que hereda del body ya está resuelto con el tono de la página, no con el juego que acaba de redefinir. */ .helenasunday-seccion .has-background:not(.has-text-color), .helenasunday-seccion .helenasunday-kit-form, html.helenasunday-menu-open .wp-site-blocks > header { color: var(--helenasunday-tono-texto); } /* ------------------------------------------------------------------------- * 3. El fondo único y el texto * * html body y no body: la regla de estilos globales del tema también va a * body y hay que ganarle sin depender del orden de impresión. * ---------------------------------------------------------------------- */ html body { background-color: var(--helenasunday-tono-fondo); color: var(--helenasunday-tono-texto); } /* Sin JS la sección oscura pinta su propio fondo, a sangre. */ html:not(.helenasunday-tonos) .helenasunday-seccion--oscura { background-color: var(--helenasunday-tono-fondo); color: var(--helenasunday-tono-texto); } /* Las clases de color del editor que van directamente sobre el fondo pasan al tono. !important porque las del core lo llevan; la especificidad (0,2,0) les gana. Dentro de una tarjeta el juego vuelve al claro (arriba), así que ahí dan el mismo color que antes. */ .helenasunday-seccion .has-on-surface-color { color: var(--helenasunday-tono-texto) !important; } .helenasunday-seccion .has-on-surface-variant-color { color: var(--helenasunday-tono-texto-suave) !important; } .helenasunday-seccion .has-primary-color { color: var(--helenasunday-tono-acento) !important; } /* Enlaces de texto: el color de enlace del tema es primary fijo. */ .helenasunday-seccion a:where(:not(.wp-element-button):not(.helenasunday-pill)) { color: var(--helenasunday-tono-acento); } /* Botones sobre el fondo. El principal pasa a rosa flúor con tinta en oscuro (el magenta se funde con el fondo, 2,9:1); el de contorno sigue la tinta del tono. Dentro de la llamada final (tarjeta flúor) el juego es el claro y no cambian. */ .helenasunday-seccion .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background-color: var(--helenasunday-tono-acento); color: var(--helenasunday-tono-sobre-acento); } .helenasunday-seccion .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--helenasunday-tono-texto); border-color: var(--helenasunday-tono-texto); } /* ------------------------------------------------------------------------- * 4. Cabecera y pie * * La cabecera pegada lee --helenasunday-header-bg (extras.css del tema). Se * redefine aquí con el fondo del tono, conservando el esmerilado: mismo 78 % * y mismas vueltas al sólido que el tema (sin backdrop-filter o con * transparencia reducida). Especificidad (0,1,2), por encima de las (0,1,0) * del tema, sin tocar sus reglas de pegado. * ---------------------------------------------------------------------- */ html body { --helenasunday-header-bg: var(--helenasunday-tono-fondo); } html body.helenasunday-header-frosted { --helenasunday-header-bg: color-mix(in srgb, var(--helenasunday-tono-fondo) 78%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html body.helenasunday-header-frosted { --helenasunday-header-bg: var(--helenasunday-tono-fondo); } } @media (prefers-reduced-transparency: reduce) { html body.helenasunday-header-frosted { --helenasunday-header-bg: var(--helenasunday-tono-fondo); } } .wp-site-blocks > header, .wp-site-blocks > footer { color: var(--helenasunday-tono-texto); } .wp-site-blocks > header a:where(:not(.wp-element-button)), .wp-site-blocks > footer a:where(:not(.wp-element-button)) { color: var(--helenasunday-tono-texto); } /* Los enlaces del pie: el tema los fija en on-surface con .helenasunday-footer-brand a:not(.wp-element-button) y compañía (0,2,1), que gana a la regla de arriba (0,1,2). Sin esto, al acabar la página en una sección oscura el logotipo y los enlaces del pie quedaban en tinta sobre el fondo oscuro. Aquí (0,3,2). */ .wp-site-blocks > footer :is(.helenasunday-footer-list, .helenasunday-footer-brand, .helenasunday-footer-bar) a:not(.wp-element-button) { color: var(--helenasunday-tono-texto); } /* El botón de la barra: el tema le fija on-primary con (0,3,0). */ .wp-site-blocks > header .wp-block-navigation .is-style-cta > .wp-element-button { background-color: var(--helenasunday-tono-acento); color: var(--helenasunday-tono-sobre-acento); } /* La línea bajo la barra. El :not() respeta la regla del tema que la quita con el menú abierto. */ html:not(.helenasunday-menu-open) body:not(.helenasunday-header-flat) .helenasunday-header-bar { border-bottom-color: var(--helenasunday-tono-borde-suave); } .helenasunday-menu-toggle { color: var(--helenasunday-tono-texto); } /* El pie deja su surface-container fijo: un velo del tono sobre el fondo de la página, así sigue separándose del contenido y cambia con él. */ .wp-site-blocks > footer > .has-background { background-color: var(--helenasunday-tono-velo) !important; border-top-color: var(--helenasunday-tono-borde-suave) !important; } .wp-site-blocks > footer .helenasunday-footer-bar { border-top-color: var(--helenasunday-tono-borde-suave) !important; } /* ------------------------------------------------------------------------- * 5. Secciones a pantalla * * Mínimo una pantalla menos la cabecera pegada. El alto real lo publica * tonos.js en --helenasunday-cabecera-alto; el respaldo, sin JS, es el de * la cabecera del tema: dos rellenos de 30 y una línea de título. * ---------------------------------------------------------------------- */ :root { --helenasunday-cabecera-alto: calc(var(--wp--preset--spacing--30) * 2 + var(--wp--preset--spacing--50)); scroll-padding-top: calc(var(--helenasunday-cabecera-alto) + var(--wp--preset--spacing--20)); } .helenasunday-seccion { box-sizing: border-box; min-height: calc(100svh - var(--helenasunday-cabecera-alto)); display: flex; flex-direction: column; justify-content: center; } /* En columna flex, los márgenes automáticos del diseño restringido encogerían cada hijo a su contenido. Con el ancho al 100 % el max-width y el centrado del tema siguen mandando. */ .helenasunday-seccion > :not(.alignfull) { width: 100%; box-sizing: border-box; } /* Hero con la marquesina abajo: las columnas ocupan el hueco y se centran, la banda de marcas queda al pie de la pantalla. */ .helenasunday-hero.helenasunday-seccion { justify-content: space-between; } .helenasunday-hero > .helenasunday-hero__cols { flex: 1 0 auto; align-content: center; margin-block: 0; } /* La pila de vídeos llena la primera pantalla (feedback del 26 sep). --helenasunday-hero-alto es el hueco de la primera pantalla: la pantalla menos la cabecera y el relleno vertical del hero. La pila se dimensiona por ancho (sus tarjetas son 9:16 sobre el 50 % de su ancho) y su alto visual es 1,08 veces ese ancho, así que el ancho que da un alto del 95 % es 0,95 × hueco / 1,08, sin pasarse nunca del ancho de su columna. Nada de puntos de corte: vale igual para un portátil bajo que para una pantalla grande. La marquesina queda justo debajo, a un gesto de scroll. */ .helenasunday-hero { --helenasunday-hero-alto: calc(100svh - var(--helenasunday-cabecera-alto) - var(--wp--preset--spacing--20) * 2); } .helenasunday-hero .helenasunday-hero-stack { max-width: none; /* 1,02 y no 1,08: medido, el alto visual de la pila (con los giros y la tarjeta lateral más baja) es algo menor que su caja; con 1,02 llega al 95 % del hueco. */ width: min(100%, calc(var(--helenasunday-hero-alto) * 0.95 / 1.02)); } /* En escritorio la columna de la pila se queda corta antes que la pantalla. El texto se queda en la caja de contenido, alineado con el logotipo y el resto de secciones (feedback 26 sep); solo la pila la rebasa, por la derecha, sobre el margen de la página: como mucho la mitad de lo que sobra entre la caja y la ventana, menos el margen lateral, para que nunca toque el borde. Si la ventana es más estrecha que la caja, no rebasa nada. */ @media (min-width: 1024px) { .helenasunday-hero .helenasunday-hero-stack { --helenasunday-hero-rebase: max(0px, calc((100vw - var(--wp--style--global--content-size)) / 2 - var(--wp--preset--spacing--50))); width: min(calc(100% + var(--helenasunday-hero-rebase)), calc(var(--helenasunday-hero-alto) * 0.95 / 1.02)); margin-inline: 0; } } @media (min-width: 1024px) { .helenasunday-hero > .helenasunday-hero__cols { min-height: var(--helenasunday-hero-alto); } } /* Por debajo de 1024 px (tablets en vertical) dos columnas dejan la pila en un tercio de la pantalla: texto arriba y pila debajo, a todo el ancho. El !important es para ganar al flex-basis en línea de cada columna y al nowrap del core. */ @media (min-width: 782px) and (max-width: 1023px) { .helenasunday-hero > .helenasunday-hero__cols { flex-wrap: wrap !important; } .helenasunday-hero > .helenasunday-hero__cols > .wp-block-column { flex-basis: 100% !important; } /* En una columna el texto va encima: la pila baja al 50 % del hueco para que texto y pila quepan juntos en la primera pantalla. */ .helenasunday-hero .helenasunday-hero-stack { width: min(100%, calc(var(--helenasunday-hero-alto) * 0.5 / 1.02)); } } .helenasunday-hero__marcas { margin-block-start: var(--wp--preset--spacing--40) !important; } /* ------------------------------------------------------------------------- * 6. El fundido * * Solo con JS, con movimiento permitido y con el panel animando. El fondo * (y con él la cabecera y el pie, que lo leen) se funde; el texto, los * bordes y el acento cambian de golpe a mitad de camino. * * Por qué así, medido y no razonado (scratchpad r3/fundido.js): entre la * crema y el oscuro hay una franja de grises medios sobre la que NINGUNA de * las dos tintas llega a 4,5:1, y el texto secundario y el magenta la tienen * aún más ancha. Fundir texto y fondo con la misma curva los cruza en ese * gris: a mitad de fundido quedaban a 1:1. Con --helenasunday-ease-effect * el fondo se paseaba por esa franja unos 150 ms (texto a 3,7:1, texto * secundario a 1,9:1, acento a 1,2:1). * * Así que la curva del fondo tiene colas suaves y un salto en medio: el * primer 10 % del recorrido se funde despacio (0 a 240 ms), del 10 % al * 90 % cruza en 60 ms y el último 10 % se asienta hasta los 600 ms. En las * colas el fondo aún está a menos de un 10 % de su color, y ahí todo el * texto, el secundario y el acento de ese tono siguen por encima de 4,5:1. * El texto cambia en el centro del salto (45 %). Lo que queda por debajo de * AA son esos 60 ms, unos cuatro fotogramas. Vale en los dos sentidos y en * los dos esquemas del sistema, porque el salto es simétrico. * ---------------------------------------------------------------------- */ :root { --helenasunday-tono-duracion: 0.6s; --helenasunday-tono-curva: linear(0, 0.03 20%, 0.1 40%, 0.9 50%, 0.97 62%, 1); --helenasunday-tono-cambio: calc(var(--helenasunday-tono-duracion) * 0.45); } @media (prefers-reduced-motion: no-preference) { :root.helenasunday-tonos:not(.helenasunday-tonos--quieto) { transition: --helenasunday-tono-fondo var(--helenasunday-tono-duracion) var(--helenasunday-tono-curva), --helenasunday-tono-velo var(--helenasunday-tono-duracion) var(--helenasunday-tono-curva), --helenasunday-tono-texto 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-texto-suave 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-borde 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-borde-suave 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-acento 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-sobre-acento 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-tinta 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-magenta 0s linear var(--helenasunday-tono-cambio), --helenasunday-tono-naranja 0s linear var(--helenasunday-tono-cambio); } } /* Portfolio y media kit: la entradilla de la página comparte sección con el primer bloque de contenido. Aire entre las dos piezas. */ .helenasunday-page-intro + * { margin-block-start: var(--wp--preset--spacing--60) !important; }