/* ========================================================================= accessibility-fixes.css — nạp SAU main.css Các giá trị màu đã được tính bằng code để đạt WCAG 2.1 AA. Trang Sức Luxe · 29/06/2026 ========================================================================= */ /* ---- 1. Tương phản chữ nhỏ (1.4.3) ---------------------------------------- Gold cho eyebrow/link nhỏ: #927040 fail trên cream (3.98) & sand (4.29). #7e6033 đạt: trắng 5.82 · sand 5.49 · cream 5.09. Token dùng chung nên sửa 1 chỗ là toàn bộ eyebrow/border/hover gold đổi theo. */ :root { --c-gold-deep: #7e6033; } /* Giữ eyebrow SÁNG trên nền tối (testimonials) để không bị tối ngược */ .section--dark .section-head__eyebrow { color: #d9bd86; } /* ---- 2. Viền ô input (1.4.11 non-text >= 3:1) ----------------------------- #ece7de/trắng = 1.23 (gần như vô hình). #9f8f72/trắng = 3.16. */ .newsletter__form input[type="email"], .header-search .search-field, .header-search input[type="search"], .header-search input[type="text"], .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-ordering select, .orderby, .single-product div.product form.cart .quantity input.qty, .woocommerce-cart .quantity input.qty { border-color: #9f8f72; } /* ---- 3. Footer © + thanh toán (1.4.3) ------------------------------------- cream@50% = 4.36 (fail). 0.62 = 6.09. */ .site-footer__bottom { color: rgba(233, 225, 211, 0.62); } /* ---- 4. Focus hiển thị rõ (2.4.7) ----------------------------------------- Thay việc 'outline:none' bằng ring vàng 2px cho mọi phần tử tương tác. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; border-radius: 2px; } .header-search .search-field:focus, .newsletter__form input[type="email"]:focus { outline: 2px solid var(--c-gold-deep); outline-offset: 2px; border-color: var(--c-gold-deep); } /* ---- 5. Resilience: hiện nội dung khi tắt JS hoàn toàn --------------------- có class 'no-js'; main.js sẽ đổi sang 'js' khi chạy. */ .no-js [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---- 6. Tôn trọng prefers-reduced-motion (2.3.3 / best practice) ----------*/ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---- 7. Touch target icon header dễ bấm hơn trên mobile -------------------*/ @media (max-width: 860px) { .header-search-toggle, .header-account, .header-cart, .nav-toggle { padding: 10px; } }