/* Theme Name: LPA Promoción Theme URI: https://lpapromocion.com Author: Inventia Description: Block theme (FSE) de la web institucional de Promoción Las Palmas de Gran Canaria. Accesible WCAG 2.2 AA (ADR-0003). Tokens compilados desde docs/diseno/ — fuente única de verdad, no tocar a ojo (M-004). Version: 0.1.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: lpapromocion Tags: full-site-editing, block-patterns, accessibility-ready */ /* ========================================================================== C01 · Tokens y base de accesibilidad Compilado desde docs/diseno/tokens.css (congelado por /diseno, M-004). FUENTE ÚNICA: los valores viven en theme.json, que WordPress expone como --wp--preset--*. Aquí NO se repiten: se les da un alias con los nombres del diseño. Así un color se cambia en UN solo sitio y no puede haber deriva entre theme.json y el CSS. ========================================================================== */ :root { /* --- Marca ------------------------------------------------------------- */ --color-primary: var(--wp--preset--color--primary); /* #CB007B · 5.49:1 sobre blanco ✔ */ --color-primary-strong: var(--wp--preset--color--primary-strong); /* hover/active · 7.96:1 ✔ */ --color-primary-darker: var(--wp--preset--color--primary-darker); --color-primary-contrast: var(--wp--preset--color--primary-contrast); /* texto sobre magenta · 5.49:1 ✔ */ --color-primary-tint: var(--wp--preset--color--primary-tint); --color-secondary: var(--wp--preset--color--secondary); /* 3.97:1 → solo UI/texto grande ⚠ */ /* --- Texto ------------------------------------------------------------- */ --color-ink: var(--wp--preset--color--ink); /* cuerpo · 16.43:1 ✔ */ --color-muted: var(--wp--preset--color--muted); /* secundario · 6.63:1 ✔ */ /* --- Superficies ------------------------------------------------------- */ --color-surface: var(--wp--preset--color--surface); --color-surface-soft: var(--wp--preset--color--surface-soft); --color-surface-tint: var(--wp--preset--color--surface-tint); /* --- Bordes ------------------------------------------------------------ WCAG 2.2 · 1.4.11 (contraste no textual): los bordes decorativos dan 1.44:1 y NO valen como límite de un control. Para eso está el token -interactive (3.97:1). Se fuerza más abajo; no es opcional. */ --color-border: var(--wp--preset--color--border); /* decorativo · 1.44:1 */ --color-border-strong: var(--wp--preset--color--border-strong); /* decorativo */ --color-border-interactive: var(--wp--preset--color--border-interactive); /* controles · 3.97:1 ✔ */ /* --- Estados ----------------------------------------------------------- */ --color-success: var(--wp--preset--color--success); /* 5.35:1 ✔ */ --color-warning: var(--wp--preset--color--warning); /* 3.82:1 → solo UI/texto grande ⚠ */ --color-error: var(--wp--preset--color--error); /* 7.33:1 ✔ */ /* --- Foco (2.4.7 / 2.4.13) --------------------------------------------- */ --focus-ring: var(--wp--custom--focus--ring); --focus-outline: var(--wp--custom--focus--outline); --focus-offset: var(--wp--custom--focus--offset); /* --- Radios y sombras --------------------------------------------------- */ --radius-sm: var(--wp--custom--radius--sm); --radius: var(--wp--custom--radius--base); --radius-lg: var(--wp--custom--radius--lg); --radius-pill: var(--wp--custom--radius--pill); /* 999px · pastillas */ --shadow-sm: var(--wp--custom--shadow--sm); --shadow-md: var(--wp--custom--shadow--md); /* --- Tamaño mínimo de objetivo (2.5.8) ---------------------------------- */ --target-min: var(--wp--custom--target--min); /* 24px */ } /* ========================================================================== Base mínima de accesibilidad. WordPress NO da esto por defecto: hay que forzarlo. Es el DoD del ADR-0003. Va con :where() (especificidad 0) para que cualquier bloque pueda sobrescribirlo sin recurrir a !important. ========================================================================== */ /* Desplazamiento suave al saltar a un ancla (#programas, #institucional…), como el diseño (prototipo l.70). El bloque prefers-reduced-motion de más abajo lo devuelve a `auto` para quien pide menos movimiento (2.3.3). */ html { scroll-behavior: smooth; } /* Foco visible (2.4.7). El outline no se quita jamás sin sustituto. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); box-shadow: var(--focus-ring); } /* Los controles heredan la tipografía del cuerpo. Sin esto el navegador les pone su propia fuente (Arial en los input, monospace en el textarea), que rompe la coherencia. El prototipo lo hace con font-family:inherit global. */ :where(input, textarea, button, select) { font-family: inherit; } /* Bordes de control (1.4.11): nunca el borde decorativo, que no llega a 3:1. */ :where(input, select, textarea) { border: 1px solid var(--color-border-interactive); border-radius: var(--radius-sm); } /* Objetivo mínimo 24x24 (2.5.8). No se aplica a en línea: un enlace dentro de un párrafo es texto, no un objetivo, y forzarle altura rompe el interlineado. */ :where(button, input[type='checkbox'], input[type='radio'], input[type='submit']) { min-block-size: var(--target-min); min-inline-size: var(--target-min); } /* Los enlaces del contenido no se distinguen solo por el color (1.4.1). */ :where(main a:not([class])) { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } /* Salto al contenido: invisible hasta que se tabula (2.4.1). */ .skip-link { position: absolute; inset-inline-start: -9999px; } .skip-link:focus, .skip-link:focus-visible { position: fixed; inset-block-start: var(--wp--preset--spacing--4); inset-inline-start: var(--wp--preset--spacing--4); z-index: 999999; padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5); background: var(--color-surface); color: var(--color-primary-strong); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); font-weight: 700; } /* Respeta a quien pide menos movimiento (2.3.3). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== C02 · Cabecera, navegación y pie ========================================================================== */ /* El contenido (main) y el pie van PEGADOS, como el diseño (la sección de contacto en surface-soft toca el pie oscuro). WordPress mete un hueco de block-gap (24px) entre las áreas de nivel superior; se anula sobre el pie. */ .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; } /* Cabecera pegajosa con línea inferior sutil. */ .site-header { border-block-end: 1px solid var(--color-border); z-index: 100; } /* El grupo `site-header` no se quedaba pegado: su contenedor es el `
` que genera el template part, que mide LO MISMO que la cabecera → el sticky no tiene recorrido y se va con la página (el contenedor alto de verdad, `.wp-site-blocks`, es el abuelo, no el padre). Con `display:contents` el `
` no genera caja: el grupo pasa a ser hijo directo de `.wp-site-blocks` (alto = toda la página) y su `position:sticky` —la que pone el control nativo "Fija" (clase `is-position-sticky`)— funciona. El toggle del editor (Posición: Fija ↔ Ninguna) sigue mandando. Solo afecta a la cabecera: el pie usa `