/* * Audit UX/UI — P1 critical fixes * Items: 5 (contrast), 8 (touch targets), 9 (focus state), * 10 (green color system), 11 (Lato single font) * Created: 2026-05-20 */ /* ============================================================ * P1.10 — Unified design tokens (color + spacing + radius) * ============================================================ */ :root { --nr-green-primary: #023A15; --nr-green-primary-hv: #0A5C24; --nr-green-accent: #7BAF40; --nr-red-brand: #B33A3A; --nr-orange-accent: #E07A1F; --nr-text-dark: #1A1A1A; --nr-text-body: #333333; --nr-text-muted: #6B6B6B; --nr-bg-page: #FFFFFF; --nr-bg-section: #F5F7F4; --nr-border: #E5E5E5; --nr-radius-s: 8px; --nr-radius-pill: 999px; --nr-focus-ring: 0 0 0 3px rgba(2, 58, 21, 0.35); } /* ============================================================ * P1.11 — Eliminate Times New Roman fallback on . * Font family itself is controlled by Avada Options → Global * Typography (typography1..5). Don't hardcode the family here * — that would override the Avada Global Typography choice. * Only the Fira Sans @import was removed from style.css. * ============================================================ */ html { /* Inherit body's font-family (set by Avada). Removes the Times New Roman fallback that used to fall back to. */ font-family: inherit; } /* ============================================================ * P1.5 — Contrast: button text on dark green must be white * Was #008000 on #023A15 (2.4:1 — FAIL WCAG AA) * Now #FFFFFF on #023A15 (14:1 — PASS AAA) * ============================================================ */ .add-to-cart-text, .product .button.add_to_cart_button, .single_add_to_cart_button, .fusion-button.button-default, .fusion-button.button-custom, .fusion-button-default .fusion-button-text { color: #FFFFFF !important; } .fusion-button.button-default:hover, .fusion-button.button-custom:hover, .product .button.add_to_cart_button:hover, .single_add_to_cart_button:hover { color: #FFFFFF !important; } /* Small text on cards: increase contrast for muted gray */ .product-category-name, .product-brand, .calculated-price, .woocommerce-loop-product__title small { color: var(--nr-text-muted) !important; } /* Mini-cart count and prices on dark backgrounds — always white */ .cart-items-count .items-quantity, .cart-total, .announcement-banner .fusion-alert-content { color: #FFFFFF !important; } /* ============================================================ * FIX WP 7.0 BUG — border 3px solid #333 pe TOATE elementele Avada * * WP 7.0 a introdus în wp-block-library reguli cu `:where()`: * html :where([style*=border-color]) { border-style: solid } * html :where([style*=border-width]) { border-style: solid } * html :where(.has-border-color) { border-style: solid } * * Selectorul `[style*=border-color]` e SUBSTRING match — prinde orice * inline style care conține textul "border-color". Avada folosește * CSS custom properties ca `--awb-border-color:#f4f4f4` care conțin * acest substring → WP aplică `border-style: solid`, browser-ul * folosește default `border-width: medium` (3px) și `currentColor` (#333). * * Fix: reset border-style pe elementele Fusion/Avada (acolo unde nu e * setat intenționat din Builder). Specificitatea unei reguli normale * bate `:where()` (care are specificitate 0). * ============================================================ */ [class*="fusion-"]:not([style*="border-style"]), [class*="awb-"]:not([style*="border-style"]) { border-style: none; } /* Excepții: lasă border-ul nativ acolo unde Avada îl setează explicit */ .fusion-button, .fusion-search-element input, .fusion-search-element button { border-style: revert; } /* ============================================================ * P1.9 — Visible focus state for keyboard navigation * WCAG 2.4.7 (Level AA) requires visible focus. * NOTE (2026-05-21): restrâns de la *:focus-visible la elemente * reale focusabile (a, button, input, etc.) ca să nu apară outline * pe form-uri / wrappere când WP 7.0 marchează elemente ca focusabile. * ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--nr-green-primary) !important; outline-offset: 2px !important; border-radius: 4px; } /* For elements on the dark top bar / header — use white focus ring */ .announcement-banner a:focus-visible, .announcement-banner button:focus-visible, .fusion-tb-header.dark-bg a:focus-visible, .fusion-tb-header.dark-bg button:focus-visible { outline-color: #FFFFFF !important; } /* Remove the Avada "fusion-disable-outline" body class effect */ body.fusion-disable-outline a:focus-visible, body.fusion-disable-outline button:focus-visible, body.fusion-disable-outline input:focus-visible, body.fusion-disable-outline select:focus-visible, body.fusion-disable-outline textarea:focus-visible, body.fusion-disable-outline [tabindex]:focus-visible { outline: 3px solid var(--nr-green-primary) !important; outline-offset: 2px !important; } /* ============================================================ * P1.8 — Touch targets min 44x44px on mobile * WCAG 2.5.5 (Level AAA) and Apple HIG / Google Material * ============================================================ */ @media (max-width: 768px) { /* Wishlist heart on product cards */ .yith-wcwl-add-to-wishlist a, .yith-wcwl-wishlistaddedbrowse a, .yith-wcwl-wishlistexistsbrowse a, .product-wishlist-button, a.wishlist-button { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } /* Filter checkboxes & sliders (sidebar + facets) */ .widget_layered_nav li a, .widget_layered_nav li, .prdctfltr-filter-area li, .prdctfltr-filter-area label, .prdctfltr-checkbox, .prdctfltr-radio { min-height: 44px !important; display: flex; align-items: center; } /* Sort dropdown & sort arrows */ .woocommerce-ordering select, .orderby { min-height: 44px !important; padding: 10px 12px !important; } /* Slider arrows (flexslider) */ .flex-direction-nav a, .swiper-button-next, .swiper-button-prev { width: 44px !important; height: 44px !important; } /* Quantity +/- buttons */ .quantity .qty, .quantity .plus, .quantity .minus, button.plus, button.minus { min-width: 44px !important; min-height: 44px !important; } /* Top-right header icons (account, cart) */ .cart-toggle, .cart-close, .fusion-secondary-menu-icon, .fusion-mobile-nav-item, .awb-menu__main-toggle { min-width: 44px !important; min-height: 44px !important; } /* Mobile menu category links */ .mm-menu li > a, .mm-menu li > span { min-height: 44px !important; padding-top: 12px !important; padding-bottom: 12px !important; } /* Footer payment / social icons */ .fusion-footer-widget-area a, .fusion-footer a.fusion-social-network-icon { min-height: 44px; display: inline-flex; align-items: center; } } /* ============================================================ * Apply unified green to primary buttons (P1.10 follow-through) * ============================================================ */ .fusion-button.button-default, .fusion-button.button-custom, .product .button.add_to_cart_button, .single_add_to_cart_button, .minicart .checkout.wc-forward { background-color: var(--nr-green-primary) !important; border-color: var(--nr-green-primary) !important; } .fusion-button.button-default:hover, .fusion-button.button-custom:hover, .product .button.add_to_cart_button:hover, .single_add_to_cart_button:hover { background-color: var(--nr-green-primary-hv) !important; border-color: var(--nr-green-primary-hv) !important; } /* Top bar promo — single official green, white text */ .awb-announcement-bar, .announcement-banner-wrap, .announcement-banner.fusion-alert { background-color: var(--nr-green-primary) !important; } .announcement-banner.fusion-alert .fusion-alert-content, .announcement-banner.fusion-alert .fusion-alert-content a { color: #FFFFFF !important; } /* ============================================================ * P1.10 (cont.) — Card radius unified + small spacing fix * ============================================================ */ .product-card, .fusion-woocommerce-product-card, .woocommerce ul.products li.product, .fusion-search-input { border-radius: var(--nr-radius-s); }