/* ============================================================ smile_v2 (storefront PrestaShop) · a11y-contrast.css · v2 "Hardening" de CONTRASTE (WCAG 2.1 AA) para la tienda pública. Encólalo DESPUÉS del theme.css del child theme. Estrategia v2: en vez de depender de medir cada gris, REEMPLAZA el foreground de cada ROL de texto por un tono de marca que YA pasa AA. Como usa !important sobre tinta accesible, limpia la mayoría de flags de Lighthouse sin conocer el valor actual. ⚠️ Revisa los selectores contra el DOM real de smile_v2 (Classic-based): algunos themes renombran clases. Los marcados /* verificar */ son los más propensos a variar. ============================================================ */ :root{ --a11y-ink:#241F1D; /* texto principal (~15:1) */ --a11y-ink-2:#5E564F; /* secundario (~7:1) */ --a11y-ink-3:#6E665E; /* meta/terciario (~4.8:1) ← mínimo para texto chico */ --a11y-burgundy:#6B2C2C; /* acción/links (~8.9:1) */ --a11y-burgundy-deep:#501F1F; --a11y-champagne:#B8924F; /* SOLO acento/fondo — nunca texto sobre claro */ --a11y-focus:#9A6B2F; --a11y-wa:#1EA052; /* verde WhatsApp accesible con texto blanco */ } /* ============================================================ 1 · TINTA GENÉRICA — sube cualquier gris claro a AA Bootstrap/PrestaShop suelen usar #6c757d, #999, #777, #888… ============================================================ */ .text-muted, .text-secondary, small.text-muted, .text-gray, .text-light-gray, .muted, .subtitle, .sub, .caption, .product-subtitle, .card .subtitle, .block-title small, figcaption, .blockreassurance p, .reassurance-text{ color:var(--a11y-ink-3) !important; } /* texto base por si el theme aclara el body */ body, p, li, dd, .page-content, .rte{ color:var(--a11y-ink); } /* ============================================================ 2 · PRECIOS ============================================================ */ .product-price, .price, .current-price .price, .product-price-and-shipping .price{ color:var(--a11y-ink) !important; /* o --a11y-burgundy si es destacado */ } .regular-price, .product-price .regular-price, .old-price, .product-discount .regular-price{ /* precio anterior tachado */ color:var(--a11y-ink-3) !important; /* verificar — era gris fantasma */ text-decoration-thickness:1px; } .discount, .discount-percentage, .product-flag.discount, .has-discount .price{ color:#fff !important; background:var(--a11y-burgundy) !important; /* NO champaña con texto blanco */ } /* ============================================================ 3 · BADGES / FLAGS (Nuevo, -40%, Ofertas, Agotado) ============================================================ */ .product-flag, .product-flag.new, .product-flag.on-sale, .product-flag.pack, .label, .badge{ background:var(--a11y-burgundy) !important; color:#fff !important; } .product-flag.out_of_stock, .product-flag.discount-percentage{ background:var(--a11y-burgundy-deep) !important; color:#fff !important; } /* ============================================================ 4 · HEADER · barra promo · top-links · buscador ============================================================ */ .header-top, #header .header-top{ } /* verificar fondo */ .header-banner, #header .announcement, .promo-bar, .header-nav .top{ color:#fff !important; /* si el fondo es borgoña */ } #_desktop_top_menu .top-menu a, .header-top a, .header .links a{ color:var(--a11y-ink) !important; } #search_widget input, .search-widget input{ color:var(--a11y-ink) !important; } .form-control::placeholder, input::placeholder, textarea::placeholder, #search_widget input::placeholder{ color:var(--a11y-ink-3) !important; opacity:1; /* Firefox baja opacidad */ } /* ============================================================ 5 · NAV / BREADCRUMB / PAGINACIÓN / DROPDOWN ============================================================ */ .breadcrumb li a, .breadcrumb a{ color:var(--a11y-ink-3) !important; } .breadcrumb li.active, .breadcrumb li:last-child span{ color:var(--a11y-ink) !important; } .page-list .page-link, .pagination a{ color:var(--a11y-burgundy) !important; } .dropdown-item{ color:var(--a11y-ink) !important; } .category-sub-menu a, .top-menu .category a{ color:var(--a11y-ink) !important; } /* ============================================================ 6 · BOTONES ============================================================ */ .btn-primary{ background:var(--a11y-burgundy) !important; border-color:var(--a11y-burgundy) !important; color:#fff !important; } .btn-primary:hover{ background:var(--a11y-burgundy-deep) !important; } .btn-secondary, .btn-outline-secondary{ color:var(--a11y-ink) !important; border-color:var(--a11y-ink-3) !important; } .btn-link, a.btn-link{ color:var(--a11y-burgundy) !important; } /* CTA WhatsApp: blanco sobre verde puro falla (~1.4:1) */ .btn-whatsapp, .wa-cta, a[href*="wa.me"].btn, a[href*="whatsapp"].btn{ background:var(--a11y-wa) !important; color:#fff !important; } /* ============================================================ 7 · FOOTER ============================================================ */ .footer-container, .page-footer{ } /* verificar fondo */ .footer a, .page-footer a, .footer .links a{ color:var(--a11y-burgundy) !important; } .footer .text-muted, .footer small, .footer p{ color:var(--a11y-ink-3) !important; } /* si el footer tiene fondo OSCURO, descomenta y ajusta: */ /* .footer-container{ } .footer a{ color:#F4EEE6 !important; } .footer p{ color:#D9CDBE !important; } */ /* ============================================================ 8 · ESTRELLAS / RATING (oro decorativo — el número debe existir como texto) ============================================================ */ .star-rating .star.filled, .grade-stars .star.on, .comments-nb{ color:var(--a11y-champagne); } .comments-nb, .reviews-count{ color:var(--a11y-ink-2) !important; } /* el conteo como texto AA */ /* ============================================================ 9 · FORMULARIOS / LABELS / CHECKBOX ============================================================ */ label, .form-control-label, .custom-control-label, .checkbox label{ color:var(--a11y-ink) !important; } .form-text, .help-block, .text-help{ color:var(--a11y-ink-3) !important; } .form-control{ color:var(--a11y-ink) !important; } /* ============================================================ 10 · FOCO VISIBLE — no eliminar ============================================================ */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{ outline:2px solid var(--a11y-focus) !important; outline-offset:2px !important; box-shadow:0 0 0 3px rgba(154,107,47,.18) !important; } /* ============================================================ 11 · REGLA UNIVERSAL: champaña jamás como TEXTO sobre claro (déjalo como acento/borde/fondo). El wordmark es logotipo → exento. ============================================================ */ /* 12 · Reduce motion + más contraste opcional --------------------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } @media (prefers-contrast: more){ :root{ --a11y-ink-2:#4A433D; --a11y-ink-3:#574F49; } } /* ============================================================ v2.1 · Lighthouse remediation (smile_v2 specific selectors) ============================================================ */ /* Hero CTA (.hero .actions .btn / .hero a.btn-primary) — force burgundy bg. */ .hero .btn, .hero .btn-primary, .hero .actions a.btn, section.hero a.btn-primary { background: var(--a11y-burgundy) !important; border-color: var(--a11y-burgundy) !important; color: #fff !important; } /* WhatsApp CTA en footer (sfft-wa) — verde #1FA855 con blanco = 3.09:1 (falla). Bajamos al verde de hover (#178D45 = 4.04:1) o más oscuro. */ .sfft-wa { background: #0E7A38 !important; /* 5.95:1 sobre blanco/cream */ color: #fff !important; } .sfft-wa:hover { background: #0A5C2A !important; } /* sfft-copy en footer oscuro (#1E1A18) — ink-3 (#6E665E) no funciona en dark bg. Subir a tono claro (B8AC9D = 6.5:1 sobre #1E1A18). */ .sfft .sfft-copy, footer.sfft .sfft-bottom .sfft-copy { color: #B8AC9D !important; } /* v2.2 · Ultra-specific override for hero CTA in case earlier selectors lose cascade. */ html body section.hero.hero--editorial div.col-text div.actions a.btn, html body section.hero.hero--editorial div.col-text div.actions a.btn-primary { background: #6B2C2C !important; border-color: #6B2C2C !important; color: #ffffff !important; }