/* * Accesibilidad — Restaurante La Raspa * Conformidad WCAG 2.1 nivel AA (Orden ETD/1498/2021, Anexo IV). * * Archivo independiente: no modifica ninguna hoja de estilos original del tema * ni de los plugins. Cada bloque cita el criterio de conformidad que corrige, * de modo que cualquier regla pueda revisarse o revertirse por separado. */ /* -------------------------------------------------------------------------- * Paleta accesible * * El naranja corporativo #EF9E00 sólo alcanza 2,20:1 sobre blanco y 4,14:1 * sobre el azul del pie (#044E6B). Se definen aquí las variantes que sí * cumplen, para que cualquier uso futuro tenga ya un valor válido al que * apuntar y el cambio quede trazado en un único sitio. * -------------------------------------------------------------------------- */ :root { /* Bordes, iconos y separadores sobre fondo claro — 4,18:1 sobre blanco (SC 1.4.11 exige 3:1). */ --laraspa-naranja: #B36B00; /* Texto sobre fondo claro — 4,81:1 sobre blanco (SC 1.4.3 exige 4,5:1). */ --laraspa-naranja-oscuro: #A66200; /* Texto naranja sobre el azul del pie #044E6B — 5,10:1. */ --laraspa-naranja-sobre-azul: #F7B731; /* Azul corporativo oscurecido para texto sobre fondo claro — 4,90:1 sobre #F6F3EF. */ --laraspa-azul-texto: #1F6FA5; /* Mismo azul de cabecera sin canal alfa — 6,11:1 con texto blanco. */ --laraspa-azul-solido: #006992; /* Indicador de foco de doble tono (SC 2.4.7). */ --laraspa-foco-claro: #FFFFFF; --laraspa-foco-oscuro: #012634; } /* -------------------------------------------------------------------------- * SC 1.4.3 — Enlaces del pie en estado :hover * * .site-info a:hover usaba #EF9E00 sobre el azul #044E6B: 4,14:1, por debajo * del 4,5:1 exigido para texto normal. Se sustituye por el amarillo que ya * emplea el propio pie en el menú legal (5,10:1). Los iconos sociales * conservan el naranja original: como elemento no textual les basta 3:1. * -------------------------------------------------------------------------- */ .site-info a:hover { color: var(--laraspa-naranja-sobre-azul); } /* -------------------------------------------------------------------------- * SC 1.4.3 — Botón de menú sobre el vídeo / la foto de cabecera * * El botón y su etiqueta "Menu" flotan sobre el vídeo de portada con un fondo * al 85 % de opacidad. El texto blanco cumple en cualquier composición * (5,37:1 en el peor caso), pero al ser translúcido sobre un elemento de * vídeo ninguna herramienta puede determinar la relación de contraste. * Se fija el mismo tono sin transparencia: 6,11:1 con el texto blanco. * -------------------------------------------------------------------------- */ .main-navigation .menu-toggle, .main-navigation .menu-toggle .AAmenu { background-color: var(--laraspa-azul-solido); } button.menu-toggle:active, button.menu-toggle:focus, button.menu-toggle:hover { background-color: var(--laraspa-azul-solido) !important; } /* Con el panel abierto en pantallas estrechas aparece el logotipo del sitio * (z-index 101) justo encima de la etiqueta "Menu" (z-index 5) y la deja * ilegible. Se oculta a la vista sólo en ese caso; el botón conserva * "Menu" como nombre accesible, que es lo que anuncian los lectores de * pantalla, y la X ya indica por sí sola que el panel se cierra. */ @media (max-width: 768px) { .mobile-menu-open .main-navigation .menu-toggle .AAmenu, .main-navigation.toggled .menu-toggle .AAmenu { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } } /* -------------------------------------------------------------------------- * SC 1.4.3 — Bloque del menú japonés (fila #sol-naciente) * * La fila lleva una imagen decorativa de fondo (el sushi de la esquina * superior derecha, 21 % de ancho). No llega a solaparse con el texto, que * descansa sobre el color plano #F6F3EF de la fila, pero su sola presencia * en un ancestro impide determinar el contraste. * * Se declara ese mismo color como fondo opaco de los propios párrafos y del * encabezado: el resultado visual es idéntico y el contraste pasa a ser * calculable. Se excluye el primer

(el logotipo "Menú Japonés"), que sí * comparte franja con la imagen decorativa. * -------------------------------------------------------------------------- */ #sol-naciente .siteorigin-widget-tinymce > h3, #sol-naciente .siteorigin-widget-tinymce > h3 ~ p { background-color: #F6F3EF; } /* El

lleva interlineado 1 con cuerpo de 20 px: su caja mide 20 px pero * los trazos del texto ocupan 25, de modo que asoman por encima y por debajo * de su propio fondo y el contraste sigue sin poder calcularse. Se le dan * 4 px de relleno vertical y se restan de los márgenes, así la caja envuelve * al texto sin mover ni una sola línea de la maqueta. */ #sol-naciente .siteorigin-widget-tinymce > h3 { padding-top: 4px; padding-bottom: 4px; margin-top: -4px; margin-bottom: 16px; } /* El azul #3397D4 de este encabezado da 2,91:1 sobre #F6F3EF con 20 px de * cuerpo (no es texto grande: se le exige 4,5:1). Se oscurece a 4,90:1. */ div#sol-naciente.fila_home h3 { color: var(--laraspa-azul-texto); } /* -------------------------------------------------------------------------- * SC 1.4.3 — Solapamiento sobre el pie * * La foto de la fila del menú japonés se escala al 130 % de su celda para el * efecto parallax (.fila_home .panel-grid-cell .widget_media_image img). Su * celda la recorta con overflow:hidden, así que a la vista no pasa nada, pero * su caja se prolonga 186 px por debajo de la fila y, al estar posicionada en * absoluto, se pinta por encima del pie. Por eso el contraste de cuatro * textos del pie salía como indeterminado. * * No es el banner de cookies: se comprobó midiendo con el banner aceptado y * el resultado era el mismo. * * Se sube el pie a su propio contexto de apilamiento. Ningún cambio visual: * la imagen ya estaba recortada. * -------------------------------------------------------------------------- */ .site-footer, .footer_kit, .footer_kit2 { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- * SC 1.4.3 — Rótulos de las cartas (/carta/) * * Cada rótulo se apoya en un fondo blanco al 91 % sobre la foto de la carta. * El contraste real es holgado en cualquier caso (>16:1), pero al ser * translúcido sobre una imagen no es determinable. Opaco, mismo aspecto. * -------------------------------------------------------------------------- */ .li_nom_carta a span { background: #FFFFFF; } /* -------------------------------------------------------------------------- * SC 2.2.2 — Control de pausa del vídeo de cabecera * * El vídeo arranca solo, dura 44 s y se presenta junto al resto del * contenido: necesita un mecanismo para detenerlo. El botón lo inserta * assets/a11y.js si no viene ya en el marcado del widget. * -------------------------------------------------------------------------- */ .a11y-video-toggle { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 2px solid var(--laraspa-foco-claro); border-radius: 50%; background-color: var(--laraspa-foco-oscuro); color: var(--laraspa-foco-claro); line-height: 0; cursor: pointer; transition: background-color 0.2s ease; } .a11y-video-toggle:hover, .a11y-video-toggle:focus { background-color: #044E6B; } .a11y-video-toggle svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; } @media (max-width: 768px) { .a11y-video-toggle { right: 12px; bottom: 12px; } } /* Movimiento reducido: además de la pausa que aplica el script, se congela * cualquier transición del propio vídeo. */ @media (prefers-reduced-motion: reduce) { #video_bd2 { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- * SC 2.5.8 — Área táctil de los enlaces del pie * * Pertenece a WCAG 2.2 y no es exigible en el nivel 2.1 AA que acredita el * Kit Digital, pero se corrige por robustez. Sólo crece la caja interactiva: * ni el cuerpo de letra ni el interlineado del texto cambian. * -------------------------------------------------------------------------- */ .site-info #social-menu a, .site-info .footer-column.contact-info p a, .footer-bottom #legal-menu ul a { display: inline-block; padding-top: 4px; padding-bottom: 4px; } /* -------------------------------------------------------------------------- * SC 2.4.7 — Indicador de foco visible * * Indicador propio de doble tono: un aro blanco rodeado de otro azul muy * oscuro. Sobre los fondos claros del sitio destaca el aro oscuro y sobre el * pie azul, el vídeo o las fotos destaca el blanco, de modo que siempre hay * al menos 3:1 con lo que haya detrás. * * Se usa :focus-visible, así que no altera el aspecto al hacer clic con el * ratón ni interfiere con la clase .using-mouse del tema. * -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--laraspa-foco-claro); outline-offset: 2px; box-shadow: 0 0 0 6px var(--laraspa-foco-oscuro); border-radius: 2px; } /* -------------------------------------------------------------------------- * SC 2.4.1 — Enlace de salto al contenido * * Ya se hacía visible al recibir el foco, pero sin fondo propio: aparecía en * azul #009DDB sobre el vídeo de cabecera, con contraste indeterminable. * Se le da fondo blanco opaco y un azul de 7,14:1. * -------------------------------------------------------------------------- */ a.screen-reader-text.skip-link:focus { background-color: #FFFFFF; color: #005E85; font-weight: 700; text-decoration: underline; } /* -------------------------------------------------------------------------- * SC 2.4.3 — Panel de navegación abierto * * Mientras el panel está abierto, assets/a11y.js marca con [inert] el resto * del documento. Se atenúa levemente para que quede claro que no es * accionable, sin alterar el aspecto del panel. * -------------------------------------------------------------------------- */ [inert] { cursor: default; } /* Texto sólo para lectores de pantalla dentro de los controles añadidos. */ .a11y-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- * SC 1.4.3 — Banner de cookies (CookieYes) * * NO se toca ni la configuración ni el marcado del plugin: esto es sólo una * anulación de color desde nuestra propia hoja. * * El banner pinta sus textos y bordes de botón con #009DDB sobre blanco: * 3,06:1, por debajo del 4,5:1 exigido. Es la única violación (no * "incompleto") que devuelve axe en todo el sitio, y procede íntegramente * del plugin. Se oscurece el mismo azul hasta 5,01:1. * * Lo ideal es fijar este valor en CookieYes → Apariencia; hecho eso, este * bloque puede borrarse sin más. * -------------------------------------------------------------------------- */ .cky-consent-container .cky-policy, .cky-consent-container .cky-btn, .cky-modal .cky-policy, .cky-modal .cky-btn { color: #0077A6 !important; } .cky-consent-container .cky-btn, .cky-modal .cky-btn { border-color: #0077A6 !important; } /* -------------------------------------------------------------------------- * SC 1.4.3 — Titular sobre la foto de cabecera de las páginas interiores * * El

es blanco de 65 px (texto grande: se le exige 3:1) sobre una de las * cuatro fotos que rotan en el banner, con un velo de rgba(1,38,52,.40). * Midiendo los píxeles realmente pintados debajo del texto, el peor punto de * cada foto daba 3,42 / 2,93 / 3,10 / 3,25:1 — la segunda incumple y la * tercera va justa. * * Subiendo el velo al 50 % los peores puntos pasan a 4,34 / 3,80 / 3,99 / * 4,19:1. Es el valor más bajo que deja margen sobre el mínimo, para oscurecer * la foto lo menos posible. * * axe seguirá dando este nodo como "incompleto": ninguna herramienta puede * calcular el contraste de un texto sobre una fotografía. La medición sobre * los píxeles reales es la justificación documental. * -------------------------------------------------------------------------- */ .fondobanner { background-color: rgba(1, 38, 52, 0.5); } /* SC 2.5.8 — bloque de contacto duplicado en el cuerpo de /reservas-y-contacto/ * Marcado distinto al del pie: el