/** * Helena Sunday · Efectos de rotulador (revisión 2). * * Subrayador fluorescente y dibujos a rotulador. Ver * docs/DIRECCION-VISUAL.md, «Subrayador» y «Dibujos a rotulador». * * Reglas de la casa: el color sale siempre de los tokens del tema, los * tiempos y curvas de --helenasunday-ease-effect, y no hay ni un tamaño de * fuente ni un espaciado propios. Los únicos colores escritos a mano son el * negro de las máscaras, que no se ve: solo dice por dónde pasa la tinta. * * Sin JS o con movimiento reducido, todo aparece ya pintado y dibujado: el * estado «sin pintar» vive solo bajo .helenasunday-js y no-preference. */ /* ------------------------------------------------------------------------- * 1. Formas * * Una sola vez, en :root. La del subrayador es una banda algo inclinada, con * los bordes irregulares y las puntas redondeadas de un rotulador de punta * biselada, que ocupa algo más de la mitad inferior de la línea. * ---------------------------------------------------------------------- */ :root { --helenasunday-marker-forma: url("data:image/svg+xml,"); } /* ------------------------------------------------------------------------- * 2. Subrayador * * El color es un background-color con el token. La forma se recorta con * máscara, y la máscara tiene tres capas: * * 1. un negro recortado al propio texto (-webkit-mask-clip: text), para * que las letras no pierdan su parte de arriba; * 2. un negro que crece de 0 a 100 % de ancho: el «pintado»; * 3. la forma del rotulador. * * Se componen como (forma ∩ pintado) ∪ texto. Con box-decoration-break: * clone cada trozo de línea recibe su propia forma y su propio pintado. * Donde no hay mask-clip: text (Firefox), sección 3: una banda con degradado. * * El texto va en el on-*-container de su color: tinta en claro y el tono que * derive el tema en oscuro, siempre con contraste medido. * ---------------------------------------------------------------------- */ mark.helenasunday-marker { --helenasunday-marker-color: var(--wp--preset--color--secondary-container); background-color: var(--helenasunday-marker-color); color: var(--wp--preset--color--on-secondary-container); padding: 0 0.12em; margin: 0 -0.06em; border-radius: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; } mark.helenasunday-marker--rosa { --helenasunday-marker-color: var(--wp--preset--color--primary-container); color: var(--wp--preset--color--on-primary-container); } @supports (-webkit-mask-clip: text) { mark.helenasunday-marker { -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black), var(--helenasunday-marker-forma); mask-image: linear-gradient(black, black), linear-gradient(black, black), var(--helenasunday-marker-forma); -webkit-mask-clip: text, border-box, border-box; -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%, 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-composite: add, intersect; } @media (prefers-reduced-motion: no-preference) { mark.helenasunday-marker { transition: -webkit-mask-size 0.55s var(--helenasunday-ease-effect) 0.25s, mask-size 0.55s var(--helenasunday-ease-effect) 0.25s; } .helenasunday-js mark.helenasunday-marker:not(.helenasunday-efecto-hecho) { -webkit-mask-size: 100% 100%, 0% 100%, 100% 100%; mask-size: 100% 100%, 0% 100%, 100% 100%; } } } /* ------------------------------------------------------------------------- * 3. Subrayador sin mask-clip: text * * Una banda de degradado con las esquinas desiguales. Menos rotulador, pero * el mismo color, el mismo alto y el mismo pintado. * ---------------------------------------------------------------------- */ @supports not (-webkit-mask-clip: text) { mark.helenasunday-marker { background-color: transparent; background-image: linear-gradient(var(--helenasunday-marker-color), var(--helenasunday-marker-color)); background-size: 100% 62%; background-position: 0 88%; background-repeat: no-repeat; border-radius: 0.35em 0.15em 0.4em 0.2em; } @media (prefers-reduced-motion: no-preference) { mark.helenasunday-marker { transition: background-size 0.55s var(--helenasunday-ease-effect) 0.25s; } .helenasunday-js mark.helenasunday-marker:not(.helenasunday-efecto-hecho) { background-size: 0% 62%; } } } /* ------------------------------------------------------------------------- * 3b. Subrayador sobre el tono oscuro (revisión 3) * * En claro el trazo cubre la parte baja de la letra y lo que asoma por * arriba es tinta sobre crema. En el tono oscuro esa misma tinta queda sobre * inverse-surface y la parte alta de las letras desaparece. Aquí la forma se * estira hacia arriba hasta cubrir la letra entera, anclada abajo para que * el borde irregular siga siendo el de la base. La capa del pintado (la * segunda) se repite en los dos estados para no pisar la animación. * ---------------------------------------------------------------------- */ @supports (-webkit-mask-clip: text) { :root[data-helenasunday-tono="oscuro"].helenasunday-tonos mark.helenasunday-marker, html:not(.helenasunday-tonos) .helenasunday-seccion--oscura mark.helenasunday-marker { -webkit-mask-size: 100% 100%, 100% 100%, 100% 140%; mask-size: 100% 100%, 100% 100%, 100% 140%; -webkit-mask-position: 0 0, 0 0, 0 100%; mask-position: 0 0, 0 0, 0 100%; } @media (prefers-reduced-motion: no-preference) { :root[data-helenasunday-tono="oscuro"].helenasunday-tonos.helenasunday-js mark.helenasunday-marker:not(.helenasunday-efecto-hecho) { -webkit-mask-size: 100% 100%, 0% 100%, 100% 140%; mask-size: 100% 100%, 0% 100%, 100% 140%; } } } @supports not (-webkit-mask-clip: text) { :root[data-helenasunday-tono="oscuro"].helenasunday-tonos mark.helenasunday-marker, html:not(.helenasunday-tonos) .helenasunday-seccion--oscura mark.helenasunday-marker { background-size: 100% 100%; background-position: 0 0; } @media (prefers-reduced-motion: no-preference) { :root[data-helenasunday-tono="oscuro"].helenasunday-tonos.helenasunday-js mark.helenasunday-marker:not(.helenasunday-efecto-hecho) { background-size: 0% 100%; } } } /* ------------------------------------------------------------------------- * 4. Dibujos a rotulador * * El SVG lo inyecta helenasunday-efectos.php como primer hijo del elemento * con la clase. Siempre absoluto sobre su anfitrión, decorativo y sin * eventos. Tinta por defecto; magenta y naranja con helenasunday-tinta--*. * Nunca flúor: sobre crema no se vería. * * Cada trazo lleva pathLength="1": el guion mide la ruta entera y basta con * desplazarlo para «dibujarlo». El hueco del guion es algo mayor que la ruta * para que la punta redondeada no asome antes de empezar. * ---------------------------------------------------------------------- */ :where(.helenasunday-dibujo) { position: relative; } .helenasunday-dibujo__svg { position: absolute; display: block; overflow: visible; pointer-events: none; color: var(--helenasunday-tono-tinta, var(--wp--preset--color--on-surface)); z-index: 1; } /* Revisión 3: el trazo sigue el tono de la página (tonos.css). Sobre el oscuro, magenta y naranja pasan a sus flúor, que son los que dan 3:1 como gráfico; dentro de una tarjeta el juego vuelve al claro. El segundo valor es el respaldo si tonos.css no se carga. */ .helenasunday-tinta--magenta > .helenasunday-dibujo__svg { color: var(--helenasunday-tono-magenta, var(--wp--preset--color--primary)); } .helenasunday-tinta--naranja > .helenasunday-dibujo__svg { color: var(--helenasunday-tono-naranja, var(--wp--preset--color--tertiary)); } .helenasunday-dibujo__svg path { vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.1; stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .helenasunday-dibujo__svg path { transition: stroke-dashoffset 0.6s var(--helenasunday-ease-effect) 0.3s; } /* La punta de flecha, o el segundo trazo: rápido y justo detrás. */ .helenasunday-dibujo__svg path:nth-child(2) { transition-duration: 0.22s; transition-delay: 0.85s; } .helenasunday-dibujo__svg path:nth-child(3) { transition-duration: 0.22s; transition-delay: 1s; } .helenasunday-js .helenasunday-dibujo:not(.helenasunday-efecto-hecho) > .helenasunday-dibujo__svg path { stroke-dashoffset: 1.05; } } /* Cada forma en su proporción: el alto sale del viewBox. El círculo y la onda se estiran (preserveAspectRatio="none") y el trazo no engorda porque es non-scaling-stroke: su caja la fija cada sitio. */ .helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg { aspect-ratio: 160 / 110; } .helenasunday-dibujo--flecha-bucle > .helenasunday-dibujo__svg { aspect-ratio: 180 / 100; } .helenasunday-dibujo--chispas > .helenasunday-dibujo__svg { aspect-ratio: 60 / 44; } .helenasunday-dibujo--estrella > .helenasunday-dibujo__svg { aspect-ratio: 60 / 58; } .helenasunday-dibujo--corazon > .helenasunday-dibujo__svg { aspect-ratio: 60 / 56; } /* ------------------------------------------------------------------------- * 5. Dónde va cada uno * * Medidas en em del anfitrión o en % de su caja, para que acompañen al * texto. En móvil se reubican o se ocultan los que estorban. * ---------------------------------------------------------------------- */ /* Subrayado ondulado bajo una palabra en línea. */ .helenasunday-dibujo--onda > .helenasunday-dibujo__svg { left: 0; width: 100%; height: 0.3em; top: 100%; margin-top: -0.12em; } /* Círculo alrededor de una palabra o cifra en línea. */ :is(em, span).helenasunday-dibujo--circulo { margin-inline: 0.2em; } :is(em, span).helenasunday-dibujo--circulo > .helenasunday-dibujo__svg { left: -0.42em; right: -0.36em; top: 0.02em; bottom: -0.62em; rotate: -3deg; } /* Hero de inicio: flecha con bucle que sale de debajo de «Ver portfolio» y vuelve hacia «Pide mi media kit». */ .wp-block-buttons.helenasunday-dibujo--flecha-bucle > .helenasunday-dibujo__svg { left: 10em; top: 100%; width: 8em; margin-top: -0.2em; transform: scaleX(-1) rotate(-20deg); } /* Hueco para la flecha entre los botones y la nota de debajo. */ @media (min-width: 782px) { .wp-block-buttons.helenasunday-dibujo--flecha-bucle + * { margin-block-start: var(--wp--preset--spacing--60); } } /* Chispas junto a las pegatinas del hero. */ .helenasunday-stickers.helenasunday-dibujo--chispas > .helenasunday-dibujo__svg { right: -8%; top: 27%; width: 3.6em; rotate: 18deg; } /* Cifra rodeada en la rejilla de cifras. */ /* Cifra rodeada en la rejilla de cifras. El SVG toma el mismo tamaño de fuente que la cifra (misma fórmula que .helenasunday-count en secciones.css) para que el círculo la abrace a cualquier ancho. No puede colgar de la cifra misma: el contador reescribe su contenido. */ .helenasunday-stat.helenasunday-dibujo--circulo > .helenasunday-dibujo__svg { font-size: clamp( var(--wp--preset--font-size--xx-large), 5vw, calc(var(--wp--preset--font-size--xxx-large) * 1.15) ); left: calc(var(--wp--preset--spacing--30) - 0.58em); top: calc(var(--wp--preset--spacing--40) - 0.5em); width: 4.75em; height: 2em; rotate: -3deg; } /* Flecha curva de la cabecera de sección hacia la muestra de vídeos. */ /* El párrafo se ciñe a su texto para que la flecha salga justo de su final. */ .helenasunday-section-head > p.helenasunday-dibujo--flecha-curva { width: fit-content; } .helenasunday-section-head > p.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg { left: 100%; top: 0.2em; width: 5.5em; margin-left: 0.4em; } /* Estrella, corazón: en la esquina de la banda de llamada a la acción. */ .helenasunday-cta-band:is(.helenasunday-dibujo--estrella, .helenasunday-dibujo--corazon) > .helenasunday-dibujo__svg { right: 8%; top: 14%; width: 3.4em; rotate: 12deg; } /* Media kit: flecha desde las razones hacia el formulario. */ .helenasunday-reasons.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg { left: 62%; top: 100%; width: 7em; margin-top: var(--wp--preset--spacing--20); rotate: -18deg; } /* Retrato de «Sobre mí»: chispas junto a la pegatina de arriba. */ .helenasunday-portrait-wrap .helenasunday-stickers.helenasunday-dibujo--chispas > .helenasunday-dibujo__svg { right: auto; left: -11%; top: -1%; rotate: -20deg; } @media (max-width: 781px) { .helenasunday-section-head > p.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg, .helenasunday-reasons.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg { display: none; } .helenasunday-cta-band:is(.helenasunday-dibujo--estrella, .helenasunday-dibujo--corazon) > .helenasunday-dibujo__svg { right: 5%; top: 4%; width: 2.6em; } .helenasunday-portrait-wrap .helenasunday-stickers.helenasunday-dibujo--chispas > .helenasunday-dibujo__svg { left: -1%; top: -5%; } /* En la rejilla de dos columnas la tarjeta es estrecha y la etiqueta va pegada a la cifra: el círculo la taparía. */ .wp-block-buttons.helenasunday-dibujo--flecha-bucle > .helenasunday-dibujo__svg, .helenasunday-stat.helenasunday-dibujo--circulo > .helenasunday-dibujo__svg { display: none; } } /* ------------------------------------------------------------------------- * Los dibujos nunca crean scroll horizontal. * * Van en absoluto y a propósito se salen de su anfitrión. En anchos * intermedios (782-900 px) la flecha curva de «Trabajo reciente» se salía * 80 px de la pantalla. En lugar de reajustar dibujo a dibujo, cada sección * recorta lo que se salga por los lados. clip y no hidden: no convierte la * sección en contenedor de scroll ni afecta al eje vertical. * ---------------------------------------------------------------------- */ .helenasunday-seccion { overflow-x: clip; }