/* ============================================================================ * U11 — Accessibility overrides (R14). [WS-A] lafka-child * Loaded LAST (depends on child-style) and every rule is scoped `html body …` * with !important so it outranks the theme's dynamic in- colour CSS * regardless of source order. * * WHY these values: * Brand orange #ff6d00 / #f48733 / vc buttons #f5821f give only ~2.6–2.9:1 with * white — below WCAG AA (4.5:1). We shift the *text-bearing* orange elements to an * accessible burnt-orange #c2510a (≈4.7:1 vs white, both as text-on-white and * white-text-on-fill) so the brand stays orange while every text node passes AA. * Light-grey body/detail text #999 (~2.9:1) → #6a6a6a (≈5.4:1). * Footer text (#aeaeae/#f5f5f5 on #2a2a2a) already passes — left untouched. * ========================================================================== */ /* ---- Accessible orange on FILLS that carry white text (buttons/CTAs) ---- */ html body .button, html body a.button, html body input.button, html body button.button, html body .add_to_cart_button, html body a.add_to_cart_button, html body .single_add_to_cart_button, html body div.prod_hold .links a.button.add_to_cart_button, html body div.prod_hold .links a.button.add_to_cart_button.ajax_add_to_cart, html body .foodmenu_top .project-data .project-details a.button, html body .vc_btn3[style*="f5821f"], html body .vc_btn3[style*="F5821F"], html body .vc_btn3-style-custom[style*="5821f"], html body #main-menu .lafka-highlight-menu-item > a, html body ul.menu > li.lafka-highlight-menu-item > a, html body .owl-nav .owl-prev, html body .owl-nav .owl-next { background-color: #c2510a !important; color: #ffffff !important; } /* ---- Accessible orange on TEXT that sits on white/light backgrounds ---- * No-flash fallback for the WPBakery inline-coloured headings/paragraphs that fail AA * (#ff6d00 / #f48733 / #f5821f / #ffac33). All confirmed on white/cream backgrounds, so * darkening to #c2510a is safe. `!important` beats the inline (non-important) color. * (assets/a11y.js does the authoritative, background-AWARE pass — this is belt-and-braces.) */ html body h1[style*="#ff6d00"], html body h2[style*="#ff6d00"], html body h3[style*="#ff6d00"], html body h4[style*="#ff6d00"], html body h5[style*="#ff6d00"], html body h6[style*="#ff6d00"], html body h1[style*="#f48733"], html body h2[style*="#f48733"], html body h3[style*="#f48733"], html body h4[style*="#f48733"], html body h5[style*="#f48733"], html body h6[style*="#f48733"], html body h1[style*="#F48733"], html body h2[style*="#F48733"], html body h3[style*="#F48733"], html body h4[style*="#F48733"], html body h1[style*="#f5821f"], html body h2[style*="#f5821f"], html body h3[style*="#f5821f"], html body h4[style*="#f5821f"], html body h5[style*="#f5821f"], html body h6[style*="#f5821f"], html body h1[style*="#ffac33"], html body h2[style*="#ffac33"], html body h3[style*="#ffac33"], html body h4[style*="#ffac33"], html body h5[style*="#ffac33"], html body h6[style*="#ffac33"], html body p[style*="#f5821f"], html body p[style*="#ffac33"], html body p[style*="#ff6d00"], html body p[style*="#f48733"], html body .vc_custom_heading[style*="#ff6d00"], html body .vc_custom_heading[style*="#f48733"], html body .vc_custom_heading[style*="#F48733"], html body .vc_custom_heading[style*="#f5821f"], html body .vc_custom_heading[style*="#ffac33"], html body .price_hold, html body .price_hold .amount, html body .price_hold ins, html body .price_hold .woocommerce-Price-amount, html body .lafka-top-bar-phone, html body .lafka-top-bar-phone a { color: #c2510a !important; } /* ---- Light-grey detail text → readable grey (product blurbs, sub-titles) ---- */ html body .woocommerce-product-details__short-description, html body .woocommerce-product-details__short-description p, html body div.prod_hold .woocommerce-product-details__short-description p, html body .lafka_title_holder h6 { color: #6a6a6a !important; } /* ============================================================================ * Touch targets (R14) — icon-only controls and closely-packed links get a * >=44px hit area so tap targets pass without distorting the layout. * ========================================================================== */ /* Always-visible header + footer icon controls. NB: the mobile-only toggles * (.mob-menu-toggle/.mob-close-toggle) are intentionally EXCLUDED here — forcing a * display value on them would out-specify the theme's responsive display:none and * leak the hamburger onto desktop. They are sized inside the mobile media query below. */ html body .lafka-search-trigger > a, html body #cart-module a.cart-contents, html body #lafka-account-holder > a, html body .lafka-wishlist-counter > a, html body .lafka-social ul li a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Mobile-only menu toggles — sized to a >=44px hit area only where the theme shows * them, so desktop keeps the theme's display:none. */ @media (max-width: 991px) { html body a.mob-menu-toggle, html body a.mob-close-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } } /* Pagination (menu/shop archives) */ html body .pagination .links a, html body .page-numbers, html body a.page-numbers, html body .woocommerce-pagination a.page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Footer navigation links — give stacked links vertical breathing room */ html body #footer > .inner ul li a, html body #lafka_footer_menu > li a { display: inline-block; padding-top: 7px; padding-bottom: 7px; line-height: 1.4; } /* Carousel dots — modest tap area, visible dot unchanged */ html body .owl-dots .owl-dot { min-width: 24px; min-height: 24px; } /* ============================================================================ * Skip-to-content link (R14) — visually hidden until keyboard-focused. * Injected as the first child by a11y.js. * ========================================================================== */ .bp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 22px; background: #1b1e23; color: #ffffff !important; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; } .bp-skip-link:focus { left: 0; outline: 3px solid #ff6d00; outline-offset: 0; } #content:focus, #main:focus { outline: none; } /* Keep a visible keyboard focus indicator site-wide (a11y best practice) */ html body a:focus-visible, html body button:focus-visible, html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible { outline: 2px solid #c2510a; outline-offset: 1px; }