/* * Base: reinicio y elementos de documento. * * Ni un color, ni una familia tipográfica, ni un radio escritos en duro. * Todo sale de los tokens que inc/enqueue.php imprime en , que es lo * que permite que la misma hoja sirva a las 8 paletas y las 6 tipografías. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--body); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--lh-body); -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--ink); font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; } h1 { font-size: calc(var(--body-size) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); } h2 { font-size: calc(var(--body-size) * var(--scale-ratio) * var(--scale-ratio)); } h3 { font-size: calc(var(--body-size) * var(--scale-ratio)); } h4 { font-size: var(--body-size); } a { color: var(--accent); } a:focus-visible, :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* width y height van siempre en el HTML; esto conserva la proporción al escalar y es la otra mitad de mantener el CLS a cero. */ img, video { max-width: 100%; height: auto; } hr { border: 0; border-top: var(--border-width) solid var(--line); } .cr-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* WordPress emite .screen-reader-text por su cuenta —en the_posts_pagination(), comment_form() y get_search_form(), entre otros— y da por hecho que el theme la oculta. Sin esta regla esos textos SE VEN: un "Navegación de entradas" suelto encima de la paginación. La definición es la del núcleo de WordPress. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Al recibir el foco sí se muestra: si no, quien navega con teclado no vería nunca los enlaces de salto. */ .screen-reader-text:focus { clip-path: none; display: block; z-index: 100000; top: 5px; left: 5px; width: auto; height: auto; padding: 0.9rem 1.4rem; background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--accent); font-size: 0.875rem; font-weight: 700; line-height: normal; text-decoration: none; } .cr-skip { position: absolute; left: -9999px; } .cr-skip:focus { left: var(--gutter); top: var(--gutter); z-index: 100; padding: 0.75rem 1rem; background: var(--accent); color: var(--accent-ink); }