/* v5.14.55 — storefront/admin contrast hardening (WCAG-oriented) */ :root{ --cms-contrast-text:#0f172a; --cms-contrast-muted:#475569; --cms-contrast-subtle:#5b6d76; --cms-contrast-placeholder:#64748b; --cms-contrast-link:#0b5fb3; --cms-contrast-focus:#0b72e7; --cms-contrast-on-action:#fff; } /* Baseline semantics for pages that do not explicitly add theme-light to . */ .text-muted,.form-text,.help-text,.field-hint,.input-help,.empty-note,.meta-muted,.is-muted{ color:var(--cms-contrast-muted)!important; } input::placeholder,textarea::placeholder{color:var(--cms-contrast-placeholder)!important;opacity:1!important} .form-label,label,.field-label{color:inherit} body{color:var(--cms-contrast-text)} body.theme-light,[data-theme="light"] body{color:var(--cms-contrast-text)} body.theme-light .text-muted, body.theme-light .form-text, body.theme-light .help-text, body.theme-light .field-hint, body.theme-light .input-help, body.theme-light .empty-note, body.theme-light .meta-muted, body.theme-light .is-muted, [data-theme="light"] .text-muted, [data-theme="light"] .form-text, [data-theme="light"] .help-text, [data-theme="light"] .field-hint, [data-theme="light"] .input-help, [data-theme="light"] .empty-note, [data-theme="light"] .meta-muted, [data-theme="light"] .is-muted{color:var(--cms-contrast-muted)!important} body.theme-light input::placeholder, body.theme-light textarea::placeholder, [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder{color:var(--cms-contrast-placeholder)!important;opacity:1!important} /* Reusable readable secondary copy on ordinary light cards and forms. */ body:not(.theme-dark) .card .card-subtitle, body:not(.theme-dark) .card .card-meta, body:not(.theme-dark) .product-meta, body:not(.theme-dark) .product-card-meta, body:not(.theme-dark) .section-subtitle, body:not(.theme-dark) .taxonomy-meta, body:not(.theme-dark) .admin-help, body:not(.theme-dark) .settings-help{color:#52657f!important} /* Interactive labels must remain readable on saturated actions. */ .btn-primary,.btn-success,.btn-danger,.btn-info, .admin-primary-btn,.product-card-cta,.add-cart,.stock-notify-card-btn, .checkout-submit,.cart-checkout-btn,.auth-primary-btn, [data-contrast-action="solid"]{color:var(--cms-contrast-on-action)!important} .btn-primary *, .btn-success *, .btn-danger *, .btn-info *, .admin-primary-btn *, .product-card-cta *, .add-cart *, .stock-notify-card-btn *, .checkout-submit *, .cart-checkout-btn *, .auth-primary-btn *, [data-contrast-action="solid"] *{color:inherit!important} /* Keep disabled controls readable without making them look active. */ button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]{opacity:.68} /* High-visibility keyboard focus on both light and dark surfaces. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid #4da3ff!important; outline-offset:2px!important; } /* Error/success/warning foregrounds selected for readable light-surface contrast. */ body.theme-light .text-danger,[data-theme="light"] .text-danger{color:#a61b16!important} body.theme-light .text-success,[data-theme="light"] .text-success{color:#087443!important} body.theme-light .text-warning,[data-theme="light"] .text-warning{color:#7a5200!important} /* Dark mode: secondary text must not collapse into the background. */ body.theme-dark,[data-theme="dark"] body{ --cms-contrast-text:#f8fafc; --cms-contrast-muted:#d7e0e4; --cms-contrast-subtle:#cbd5e1; --cms-contrast-placeholder:#b8c5ce; --cms-contrast-link:#8bc3ff; --cms-contrast-focus:#7cc4ff; } body.theme-dark .text-muted, body.theme-dark .form-text, body.theme-dark .help-text, body.theme-dark .field-hint, body.theme-dark .input-help, body.theme-dark .empty-note, body.theme-dark .meta-muted, body.theme-dark .is-muted, [data-theme="dark"] .text-muted, [data-theme="dark"] .form-text, [data-theme="dark"] .help-text, [data-theme="dark"] .field-hint, [data-theme="dark"] .input-help, [data-theme="dark"] .empty-note, [data-theme="dark"] .meta-muted, [data-theme="dark"] .is-muted{color:var(--cms-contrast-muted)!important} body.theme-dark input::placeholder, body.theme-dark textarea::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{color:var(--cms-contrast-placeholder)!important;opacity:1!important} /* Frequent dark/gradient hero surfaces: force copy to true white, not low-contrast gray. */ .hero-panel .eyebrow,.hero-panel h1,.hero-panel h2,.hero-panel h3,.hero-panel p, .deal-box .eyebrow,.deal-box h2,.deal-box h3, .goal-box .eyebrow,.goal-box h2,.goal-box h3, .blog-hero .eyebrow,.blog-hero h1,.blog-hero h2, [class*="hero-gradient"] h1,[class*="hero-gradient"] h2,[class*="hero-gradient"] p, [data-dark-surface] h1,[data-dark-surface] h2,[data-dark-surface] h3,[data-dark-surface] p{color:#fff!important} .hero-panel p,.deal-box p,.goal-box p,.blog-hero p{color:#f1f5f9!important} /* Links that sit on white cards should never inherit decorative pale colors. */ body.theme-light main a:not(.btn):not([class*="cta"]):not([class*="badge"]):not([class*="chip"]):focus-visible{ text-decoration-thickness:2px; } @media (forced-colors:active){ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid CanvasText!important} } /* ========================================================= v5.14.66 — Global contrast audit & accessibility hardening Loaded LAST on every full document. Targets WCAG AA text contrast while preserving Decathlon Sport visual identity. ========================================================= */ :root{ --cms-contrast-text:#10242b; --cms-contrast-heading:#0a2630; --cms-contrast-muted:#52646d; --cms-contrast-subtle:#5b6d76; --cms-contrast-placeholder:#5f7079; --cms-contrast-link:#075f91; --cms-contrast-border:#d7e2e5; --cms-contrast-action:#0d5367; --cms-contrast-action-hover:#073846; --cms-contrast-success:#087443; --cms-contrast-danger:#a61b16; --cms-contrast-warning:#765000; --cms-contrast-info:#075b8c; --cms-contrast-focus:#0969da; --cms-contrast-on-dark:#f8fafc; --cms-contrast-on-dark-muted:#d7e1e5; } /* Never let a nested span/icon inherit an unrelated pale global text rule. */ :where(button,.btn,[role="button"],.admin-primary-btn,.admin-secondary-btn,.product-card-cta,.add-cart,.stock-notify-card-btn,.checkout-submit,.cart-checkout-btn,.authx-submit,.auth-simple-submit,.filter-apply-button,.compare-pro-view) :where(span,b,strong,small,i,em){color:inherit!important} /* LIGHT THEME — baseline readable copy. */ body.theme-light, html[data-theme="light"] body{ color:var(--cms-contrast-text)!important; } body.theme-light :where(h1,h2,h3,h4,h5,h6), html[data-theme="light"] :where(h1,h2,h3,h4,h5,h6){color:var(--cms-contrast-heading)} body.theme-light :where(.text-muted,.form-text,.help-text,.field-hint,.input-help,.empty-note,.meta-muted,.is-muted,.section-subtitle,.card-subtitle,.card-meta,.product-meta,.product-card-meta,.taxonomy-meta,.admin-help,.settings-help), html[data-theme="light"] :where(.text-muted,.form-text,.help-text,.field-hint,.input-help,.empty-note,.meta-muted,.is-muted,.section-subtitle,.card-subtitle,.card-meta,.product-meta,.product-card-meta,.taxonomy-meta,.admin-help,.settings-help){color:var(--cms-contrast-muted)!important} body.theme-light :where(input,textarea)::placeholder, html[data-theme="light"] :where(input,textarea)::placeholder{color:var(--cms-contrast-placeholder)!important;opacity:1!important} body.theme-light :where(input,select,textarea,.form-control,.form-select), html[data-theme="light"] :where(input,select,textarea,.form-control,.form-select){color:#10242b!important;background-color:#fff} body.theme-light :where(label,.form-label,.field-label), html[data-theme="light"] :where(label,.form-label,.field-label){color:#243941} /* Light cards: prevent decorative pale gray from being used for actual copy. */ body.theme-light :where(.card,.account-card,.account-stat-card,.product-card,.product-mini-card,.customer-pro-card,.admin-content-card,.settings-card,.sidebar-card,.modal-content,.offcanvas,.table,.dropdown-menu) :where(p,small,.meta,.description,.subtitle), html[data-theme="light"] :where(.card,.account-card,.account-stat-card,.product-card,.product-mini-card,.customer-pro-card,.admin-content-card,.settings-card,.sidebar-card,.modal-content,.offcanvas,.table,.dropdown-menu) :where(p,small,.meta,.description,.subtitle){color:var(--cms-contrast-muted)} /* Links on light surfaces. */ body.theme-light main a:not(.btn):not([class*="button"]):not([class*="cta"]), html[data-theme="light"] main a:not(.btn):not([class*="button"]):not([class*="cta"]){text-decoration-color:currentColor} /* Standard state colors on light surfaces. */ body.theme-light .text-danger,html[data-theme="light"] .text-danger{color:var(--cms-contrast-danger)!important} body.theme-light .text-success,html[data-theme="light"] .text-success{color:var(--cms-contrast-success)!important} body.theme-light .text-warning,html[data-theme="light"] .text-warning{color:var(--cms-contrast-warning)!important} body.theme-light .text-info,html[data-theme="light"] .text-info{color:var(--cms-contrast-info)!important} /* Buttons / CTAs. */ :where(.btn-primary,.btn-success,.btn-danger,.btn-info,.admin-primary-btn,.product-card-cta,.stock-notify-card-btn,.checkout-submit,.cart-checkout-btn,.authx-submit,.auth-simple-submit,.filter-apply-button,.compare-pro-view,[data-contrast-action="solid"]){color:#fff!important} :where(.btn-primary,.btn-success,.btn-danger,.btn-info,.admin-primary-btn,.product-card-cta,.stock-notify-card-btn,.checkout-submit,.cart-checkout-btn,.authx-submit,.auth-simple-submit,.filter-apply-button,.compare-pro-view,[data-contrast-action="solid"]) :where(span,b,strong,small,i,em){color:#fff!important} :where(button,.btn,[role="button"]):disabled, :where(button,.btn,[role="button"])[aria-disabled="true"]{opacity:.72!important} body.theme-light :where(button,.btn,[role="button"]):disabled{color:#53616a} /* Keyboard focus must remain visible on every surface. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--cms-contrast-focus)!important;outline-offset:2px!important} /* ADMIN — unify all muted KPI/sidebar/form copy. */ body.admin-panel-body{ --pro-text:#10244a; --pro-muted:#52657f; --pro-border:#d9e3ef; } body.theme-light.admin-panel-body :where(.admin-owner-card span,.admin-pro-userbox span,.admin-nav-group h3,.admin-topbar p,.admin-breadcrumb,.admin-kpi small,.admin-card small,.admin-card p,.settings-help,.admin-help,.table small,.table .text-muted){color:#52657f!important} body.theme-light.admin-panel-body .admin-nav-group h3{color:#5c6f89!important} body.theme-light.admin-panel-body :where(.admin-sidebar-search input,.admin-pro-search input)::placeholder{color:#5f7088!important;opacity:1!important} body.theme-light.admin-panel-body :where(.badge,.chip,[class*="-badge"],[class*="chip-"]) small{color:inherit} body.theme-light.admin-panel-body :where(.admin-primary-btn,.admin-pro-quick){color:#fff!important} body.theme-light.admin-panel-body :where(.admin-secondary-btn,.admin-ghost-btn){color:#24466f} /* CUSTOMER PANEL — light mode was still inheriting several dark-theme grays. */ body.theme-light .account-page-fullscreen, body.theme-light.account-page-fullscreen{ --muted:#52666f; --dc-muted:#52666f; } body.theme-light .account-page-fullscreen :where(.account-user-card span,.account-menu-group h3,.account-stat-card span,.account-stat-card small,.last-order-card p,.info-card p,.section-subtitle,.mini-timeline div,.size-summary-list span,.product-mini-card span,.product-mini-card small,.order-meta,.panel-empty-state,.account-content p){color:#52666f!important} body.theme-light .account-page-fullscreen .account-menu-group button{color:#294a54!important} body.theme-light .account-page-fullscreen .account-menu-group button.active{color:#061006!important} body.theme-light .account-page-fullscreen .account-menu-group button.active :where(span,i,em){color:#061006!important} body.theme-light .account-page-fullscreen :where(.account-content-head h2,.account-card-head h3,.account-card h3,.account-stat-card b,.product-mini-card b){color:#10242b!important} body.theme-light .account-page-fullscreen :where(.account-content-head,.account-card,.account-stat-card,.account-sidebar,.product-mini-card){border-color:#d7e4e3!important} /* Dedicated customer pages. */ body.theme-light :where(.customer-account-pro,.customer-pro-shell) :where(.customer-pro-sidebar-head span,.customer-pro-menu-group small,.customer-pro-head p,.customer-card-head p,.customer-summary-card span,.customer-summary-card small,.customer-order-mini span,.customer-row span,.order-items-pro span,.customer-wallet-box span,.customer-loyalty-mini span,.order-meta,.customer-empty){color:#536861!important} /* Storefront product/archive/blog copy. */ body.theme-light :where(.product-card p,.product-card small,.product-mini-card small,.archive-product-card p,.archive-product-card small,.blog-archive-card p,.blog-archive-card small,.article-card p,.article-card small,.price del,.product-card del){color:#586a73!important} body.theme-light :where(.product-card h3,.archive-product-card h3,.blog-archive-card h3,.article-card h3){color:#102a36!important} body.theme-light :where(.product-status-badge,.badge,.chip,[class*="badge-"]){font-weight:800} /* Header + search + navigation. */ body.theme-light :where(.site-header,.dynamic-site-header) :where(.nav-bar a,.category-trigger,.header-link){color:#294b55} body.theme-light :where(.site-header,.dynamic-site-header) :where(input)::placeholder{color:#5f7079!important} body.theme-light :where(.site-header,.dynamic-site-header) :where(.search-box button,.header-search-submit){color:#fff} /* Footer. */ body.theme-light .site-footer :where(p,li,a,small,.footer-about){color:#3f565f!important} body.theme-light .site-footer :where(h2,h3,h4,strong,b){color:#10242b!important} /* Hero / saturated / image overlay surfaces. */ :where(.hero-panel,.blog-hero,[class*="hero-gradient"],[data-dark-surface],.pb-banner-has-overlay) :where(h1,h2,h3,h4,strong,b){color:#fff!important} :where(.hero-panel,.blog-hero,[class*="hero-gradient"],[data-dark-surface],.pb-banner-has-overlay) :where(p,small,.subtitle,.eyebrow){color:#edf5f7!important} :where(.pb-banner-has-overlay) .pb-banner-content :where(strong,em,.pb-banner-text,.pb-banner-badge){text-shadow:0 2px 12px rgba(0,0,0,.42)} /* Page Builder public/editor — replace pale helper grays on white panels. */ body.theme-light :where(.pb-page,.pb-editor,.pb-inline-widget-preview) :where(.pb-muted,.pb-meta,.pb-help,.pb-field>label span,.pb-inspector small,.pb-toolbar-start small,.pb-layer small,.pb-empty,.pb-card-meta){color:#5a6878!important} body.theme-light .pb-editor :where(input,select,textarea)::placeholder{color:#657386!important} /* Modals and media picker. */ body.theme-light :where(.modal-content,.media-picker-modal,.quick-product-shell) :where(p,small,.text-muted,.help-text){color:#52646d!important} body.theme-light :where(.modal-content,.media-picker-modal,.quick-product-shell) :where(h1,h2,h3,h4,strong,b){color:#10242b} /* Tables. */ body.theme-light :where(table,.table){color:#20343c} body.theme-light :where(table,.table) :where(th){color:#18343e} body.theme-light :where(table,.table) :where(td small,td .text-muted){color:#52646d!important} /* DARK THEME — lift secondary copy so it stays readable. */ body.theme-dark, html[data-theme="dark"] body{ --cms-contrast-text:#f8fafc; --cms-contrast-heading:#ffffff; --cms-contrast-muted:#cbd6dc; --cms-contrast-subtle:#c1cdd3; --cms-contrast-placeholder:#b6c4cb; color:#f8fafc; } body.theme-dark :where(h1,h2,h3,h4,h5,h6,strong,b), html[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,strong,b){color:#f8fafc} body.theme-dark :where(.text-muted,.form-text,.help-text,.field-hint,.input-help,.empty-note,.meta-muted,.is-muted,.section-subtitle,.card-subtitle,.card-meta,.product-meta,.product-card-meta,.taxonomy-meta,.admin-help,.settings-help,p,small), html[data-theme="dark"] :where(.text-muted,.form-text,.help-text,.field-hint,.input-help,.empty-note,.meta-muted,.is-muted,.section-subtitle,.card-subtitle,.card-meta,.product-meta,.product-card-meta,.taxonomy-meta,.admin-help,.settings-help){color:#cbd6dc} body.theme-dark :where(input,textarea)::placeholder, html[data-theme="dark"] :where(input,textarea)::placeholder{color:#b6c4cb!important;opacity:1!important} body.theme-dark :where(input,select,textarea,.form-control,.form-select){color:#f8fafc} body.theme-dark .account-page-fullscreen :where(.account-user-card span,.account-menu-group h3,.account-stat-card span,.account-stat-card small,.last-order-card p,.info-card p,.section-subtitle,.mini-timeline div,.size-summary-list span,.product-mini-card span,.product-mini-card small,.panel-empty-state){color:#c7d3d8!important} body.theme-dark .site-footer :where(p,li,a,small,.footer-about){color:#c7d3d8!important} /* Alert tones with readable foregrounds. */ .alert-success{color:#075c35} .alert-warning{color:#684600} .alert-danger{color:#941b17} .alert-info{color:#075783} body.theme-dark .alert-success{color:#baf2d0} body.theme-dark .alert-warning{color:#ffe2a3} body.theme-dark .alert-danger{color:#ffc0bc} body.theme-dark .alert-info{color:#b9e5ff} /* Forced colors / OS accessibility. */ @media (forced-colors:active){ :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid CanvasText!important} } /* ========================================================= v5.16.3 — Light Mode Contrast Contract Root fix: no global tag recoloring. Text colors are attached to semantic roles and light surfaces, while dark/image surfaces retain their own foregrounds. ========================================================= */ body.theme-light, html[data-theme="light"] body{ --cms-ink-950:#0a2630; --cms-ink-900:#10242b; --cms-ink-800:#243941; --cms-ink-700:#36515b; --cms-ink-600:#52646d; --cms-ink-500:#5f7079; --cms-link:#075f91; --cms-border-readable:#cfdcdf; --cms-light-surface:#ffffff; --cms-light-surface-soft:#f5f9f9; --text:#10242b; --muted:#52646d; --dc-text:#10242b; --dc-muted:#52646d; color:var(--cms-ink-900); } /* Common light surfaces define a readable inherited foreground. Explicit component colors still win, so this does not flatten the design system. */ body.theme-light :where( .card,.product-card,.product-mini-card,.article-card,.blog-archive-card, .archive-product-card,.account-card,.account-stat-card,.customer-pro-card, .admin-content-card,.admin-card,.settings-card,.sidebar-card,.modal-content, .dropdown-menu,.offcanvas,.accordion-item,.filter-panel,.archive-toolbar, .archive-guide-box,.archive-seo-panel,.quick-product-shell,.pb-product-card, .pb-post-card,.pb-taxonomy-card,.pb-review,.pb-icon-box,.pb-card, .pb-premium-magazine-card,.pb-product-card--premium-clean ){ --text:var(--cms-ink-900); --muted:var(--cms-ink-600); color:var(--cms-ink-900); } /* Semantic secondary copy: these are safe to normalize on light surfaces. */ body.theme-light :where( .text-muted,.text-secondary,.form-text,.help-text,.field-hint,.input-help, .empty-note,.meta-muted,.is-muted,.section-subtitle,.section-description, .card-subtitle,.card-meta,.product-meta,.product-card-meta,.taxonomy-meta, .admin-help,.settings-help,.description,.subtitle,.meta,.eyebrow-muted, .product-brand,.product-sku,.review-meta,.order-meta,.footer-meta, .pb-muted,.pb-meta,.pb-help,.pb-card-meta,.pb-section-description, .pb-section-subtitle,.pb-card-description ){color:var(--cms-ink-600)!important} /* Known legacy light-card metadata values that were below AA on white. */ body.theme-light .pb-decathlon-widget :where(.benefit-card span,.why-grid span,.sport-card p,.kit-card p), body.theme-light .archive-category-editorial-subtitle, body.theme-light .quick-rating-row, body.theme-light .quick-price-box del, body.theme-light :where(.home-empty,.cms-empty){color:var(--cms-ink-600)!important} /* Product and commerce copy should remain readable without making decorative badges inherit generic muted colors. */ body.theme-light :where(.product-card,.product-mini-card,.archive-product-card,.pb-product-card,.pb-product-card--premium-clean) :where(.product-title,.pb-card-title,h3,h4,strong,b){color:var(--cms-ink-950)} body.theme-light :where(.product-card,.product-mini-card,.archive-product-card,.pb-product-card,.pb-product-card--premium-clean) :where(.product-meta,.pb-card-meta,.pb-card-subtitle,.sku,.brand,del,small:not(.badge):not([class*="badge"])){ color:var(--cms-ink-600); } /* Form controls and placeholders: placeholder text is intentionally darker than browser defaults because it carries useful UI information here. */ body.theme-light :where(input,select,textarea,.form-control,.form-select){ color:var(--cms-ink-900)!important; border-color:var(--cms-border-readable); } body.theme-light :where(input,textarea)::placeholder{color:var(--cms-ink-500)!important;opacity:1!important} body.theme-light :where(label,.form-label,.field-label){color:var(--cms-ink-800)} /* Links on pale/white surfaces. */ body.theme-light :where(main,.site-footer,.account-page-fullscreen,.admin-panel-body) a:not(.btn):not([class*="button"]):not([class*="cta"]):not([class*="badge"]){ --link-color:var(--cms-link); } /* Semantic buttons: use foreground/background pairs that meet AA for normal text. Branded lime actions intentionally use dark ink; deep actions use white. */ body.theme-light :where(.btn-primary,.admin-primary-btn,.auth-primary-btn,.authx-submit,.auth-simple-submit){ background-color:#0b5fff; color:#fff!important; } body.theme-light :where(.btn-success,.product-card-cta,.stock-notify-card-btn,.checkout-submit,.cart-checkout-btn,.compare-pro-view){ color:#fff!important; } body.theme-light .btn-danger{background-color:#b42318;border-color:#b42318;color:#fff!important} body.theme-light .btn-warning{background-color:#f5a623;border-color:#f5a623;color:#17200a!important} body.theme-light :where(.btn-accent,.add-cart,.coupon-box button){color:#061006!important} body.theme-light :where(.btn-primary,.btn-success,.btn-danger,.btn-info,.admin-primary-btn,.product-card-cta,.stock-notify-card-btn,.checkout-submit,.cart-checkout-btn,.auth-primary-btn,.authx-submit,.auth-simple-submit,.compare-pro-view) :where(span,b,strong,small,i,em){color:inherit!important} /* Disabled controls remain distinguishable but readable. */ body.theme-light :where(button,.btn,[role="button"]):disabled, body.theme-light :where(button,.btn,[role="button"])[aria-disabled="true"]{ opacity:.72!important; filter:saturate(.65); } /* Dark/image/gradient surfaces inside LIGHT mode. This is the critical inverse contract that prevents a light-theme global rule from turning white copy gray. */ body.theme-light :where( [data-dark-surface],.pb-banner,.pb-banner-has-overlay,.hero-panel.is-dark, .hero-dark,.dark-surface,.deal-box,.goal-box,.club-box,.pb-newsletter, .pb-notice-bar,.pb-lightbox,.pb-scheme-dark,.pb-jarvis-layout-hero, .pb-image-carousel-pro__content,.premium-dark,.market-dark,.dark-panel ){ --text:#f8fafc; --muted:#d7e1e5; color:#f8fafc; } body.theme-light :where( [data-dark-surface],.pb-banner,.pb-banner-has-overlay,.hero-panel.is-dark, .hero-dark,.dark-surface,.deal-box,.goal-box,.club-box,.pb-newsletter, .pb-notice-bar,.pb-lightbox,.pb-scheme-dark,.pb-jarvis-layout-hero, .pb-image-carousel-pro__content,.premium-dark,.market-dark,.dark-panel ) :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading){color:#fff!important} body.theme-light :where( [data-dark-surface],.pb-banner,.pb-banner-has-overlay,.hero-panel.is-dark, .hero-dark,.dark-surface,.deal-box,.goal-box,.club-box,.pb-newsletter, .pb-notice-bar,.pb-lightbox,.pb-scheme-dark,.pb-jarvis-layout-hero, .pb-image-carousel-pro__content,.premium-dark,.market-dark,.dark-panel ) :where(p,small,.subtitle,.description,.meta,.eyebrow,.pb-banner-text){color:#e7f0f3!important} /* Premium magazine may be dark while body is in day mode. */ body.theme-light .pb-scheme-dark :where(.pb-premium-tab-title,.pb-premium-magazine-title,.pb-card-title,h1,h2,h3,strong,b){color:#fff!important} body.theme-light .pb-scheme-dark :where(.pb-premium-tab-summary,.pb-premium-magazine-excerpt,.pb-card-meta,p,small){color:#d7e1e5!important} /* Status chips on pale backgrounds: preserve semantic colors with enough contrast instead of inheriting a generic gray. */ body.theme-light :where(.text-success,.status-success,.is-success){color:#087443!important} body.theme-light :where(.text-danger,.status-danger,.is-danger){color:#a61b16!important} body.theme-light :where(.text-warning,.status-warning,.is-warning){color:#765000!important} body.theme-light :where(.text-info,.status-info,.is-info){color:#075b8c!important} /* Editor/admin/customer navigation readability. */ body.theme-light :where(.pb-editor,.admin-panel-body,.account-page-fullscreen,.customer-pro-shell) :where(.nav-label,.menu-label,.panel-label,.control-label,.pb-field>label,.pb-layer,.admin-nav-item,.account-menu-group button){ color:var(--cms-ink-800); } body.theme-light :where(.pb-editor,.admin-panel-body,.account-page-fullscreen,.customer-pro-shell) :where(.nav-meta,.menu-meta,.panel-meta,.control-help,.pb-field>label span,.pb-layer small,.admin-nav-group h3,.account-menu-group h3){ color:var(--cms-ink-600)!important; } /* Footer light surface. */ body.theme-light .site-footer{color:var(--cms-ink-700)} body.theme-light .site-footer :where(p,li,a,small,.footer-about){color:#3f565f!important} body.theme-light .site-footer :where(h2,h3,h4,strong,b){color:var(--cms-ink-950)!important} /* Keep focus visible and independent from palette. */ body.theme-light :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid #0969da!important; outline-offset:2px!important; } /* v5.16.3 — legacy component bridge for light mode. These selectors cover older storefront modules that predate semantic tokens. */ body.theme-light :where( .price-range-box label, .blog-archive-card p,.article-card p,.sidebar-newsletter p, .rating-bars div,.product-tabs .nav-link,.sport-tabs .nav-link, .review-score span,.review-score small, .quick-brand,.floating-card small,.brand small,.blog-card-meta small, .checkout-steps span,.archive-empty-state p,.archive-product-options, .delivery-estimate small,.delivery-estimate p,.spec-table span, .bundle-price del,.archive-subcat-card span,.product-breadcrumb a,.product-meta, .rating-link small,.review-item-head span,.review-item-head small,.service-box small, .active-filter-row span,.comment-list span,.comment-list small,.archive-toolbar span, .comparison-article-list small,.account-menu-group h3,.archive-product-brand, .article-image-block small,.load-more-wrap small,.mini-order-item span,.mini-timeline div, .return-field>small,.price-box del,.filter-check small,.article-card small, .cart-item-price del,.footer-bottom p,.checkout-form-grid .optional-field, .archive-brand-slide small,.price del,.brand-logo-chip small ){color:var(--cms-ink-600)!important} /* Error/destructive copy on light surfaces used to be pastel pink and was nearly unreadable. Keep the semantic red, but use an AA-safe shade. */ body.theme-light :where( .cart-item-options .danger,.checkout-form-grid small.field-error,.field-error, .compare-items button,.fit-card.negative h3,.logout-button,.notify-me,.pending, .remove-item,.return-feedback.is-error,.return-field .field-error,.return-block-error, .return-file-list button,.return-history-list em.rejected,.size-options small, .stock-alert.danger,.stock-status.off,.summary-row.danger b, .transaction-list strong.minus,.form-error,.return-field em ){color:#a61b16!important} /* Positive and warning states on white/pale cards. */ body.theme-light :where(.status-pill.success,.stock-chip.ok,.admin-kpi-card small.up,.variant-matrix button){color:#087443!important} body.theme-light :where(.status-pill.warning,.stock-chip.low,.admin-alert-stack .warning i,.admin-kpi-card small.warn){color:#765000!important} /* Sale badges / destructive CTAs require a darker red surface when their text is white. */ body.theme-light :where(.product-card-reference .status-sale,.product-card-reference__cta.is-sale){ background:#b42318!important; border-color:#b42318!important; color:#fff!important; } /* Page-builder cards still contain a few pre-token muted colors. */ body.theme-light .pb-decathlon-widget :where(.product-card p,.brand-chip small,.testimonial-card small,.price del){color:#52646d!important} body.theme-light .pb-widget-skin-market-pro .pb-price del, body.theme-light .pb-product-card--premium-clean :where(.pb-price del,.pb-rating){color:#52646d!important} body.theme-light .pb-decathlon-widget :where(.rating,.testimonial-head span), body.theme-light :where(.pb-rating i,.pb-stars i){color:#a65c00!important} body.theme-light .pb-decathlon-widget :where(.benefit-card i,.why-grid i){color:#3a7d0b!important} /* Admin light surfaces: normalize old dashboard modules that used decorative pastel foregrounds as body text. This does not touch dark-theme overrides. */ body.theme-light.admin-panel-body :where( .analytics-kpi-card small,.analytics-kpi-card p,.analytics-highlights-grid small, .analytics-events-list span,.analytics-events-list small,.chat-kpi-card small, .chat-kpi-card p,.loyalty-pro-kpi span,.loyalty-pro-kpi small,.loyalty-donut span, .loyalty-level-list small,.wallet-quick-list button span,.wallet-tx-type small, .wallet-tx-customer small,.wallet-chart-labels span,.wallet-line-legend span ){color:#52657f!important} body.theme-light.admin-panel-body :where(.analytics-highlights-grid .up,.analytics-growth.up,.wallet-amount.positive,.wallet-tx-type .plus,.wallet-line-legend .balance){color:#087443!important} body.theme-light.admin-panel-body :where(.analytics-highlights-grid .down,.analytics-growth.down,.wallet-amount.negative,.wallet-tx-type .minus){color:#a61b16!important} /* ========================================================= v5.17.28 — Global Light Mode Contrast + Top Flash Contract Late-loaded, semantic overrides for every major storefront surface. Dark/image surfaces keep their inverse foreground contract. ========================================================= */ body.theme-light, html[data-theme="light"] body{ --cms-ink-950:#081b24; --cms-ink-900:#0f172a; --cms-ink-800:#1f2937; --cms-ink-700:#334155; --cms-ink-600:#475569; --cms-ink-500:#56667a; --cms-contrast-text:#0f172a; --cms-contrast-heading:#081b24; --cms-contrast-muted:#475569; --cms-contrast-subtle:#526174; --cms-contrast-placeholder:#59697c; --text:#0f172a; --muted:#475569; --dc-text:#0f172a; --dc-muted:#475569; } /* Ordinary white/pale commerce/editorial/account surfaces. */ body.theme-light :where( .checkout-form-panel,.order-summary-card,.review-panel,.cart-items-panel,.cart-item, .blog-article,.sidebar-card,.quick-summary-box,.mobile-toc-box,.blog-comments-section, .bottom-products-panel,.archive-seo-panel,.featured-blog-card,.blog-archive-card, .product-detail-panel,.product-info-panel,.product-card,.product-mini-card,.archive-product-card, .account-card,.account-stat-card,.account-content-head,.account-sidebar,.customer-pro-card, .modal-content,.offcanvas,.accordion-item,.table,.filter-panel,.settings-card ){color:#0f172a!important} body.theme-light :where( .checkout-form-panel,.order-summary-card,.review-panel,.cart-items-panel, .blog-article,.sidebar-card,.quick-summary-box,.blog-comments-section,.bottom-products-panel, .archive-seo-panel,.featured-blog-card,.blog-archive-card,.product-detail-panel,.product-info-panel, .product-card,.product-mini-card,.archive-product-card,.account-card,.account-stat-card, .account-content-head,.customer-pro-card ) :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.heading,.field-label){color:#0f172a!important} body.theme-light :where( .checkout-form-panel,.order-summary-card,.review-panel,.cart-items-panel, .blog-article,.sidebar-card,.quick-summary-box,.blog-comments-section,.bottom-products-panel, .archive-seo-panel,.featured-blog-card,.blog-archive-card,.product-detail-panel,.product-info-panel, .product-card,.product-mini-card,.archive-product-card,.account-card,.account-stat-card, .account-content-head,.customer-pro-card ) :where(p,small,.description,.subtitle,.meta,.help-text,.form-text){color:#475569!important} /* Checkout: the old dark-theme component colors must never survive on white. */ body.theme-light .checkout-section-head p{color:#475569!important} body.theme-light .checkout-section-head h2, body.theme-light .order-summary-card h2, body.theme-light .cart-panel-head h2{color:#0f172a!important} body.theme-light .method-grid button{ color:#0f172a!important; background:#fff!important; border-color:#cbd8dd!important; opacity:1!important; } body.theme-light .method-grid button :where(b,strong){color:#0f172a!important} body.theme-light .method-grid button small{color:#475569!important} body.theme-light .method-grid button i{color:#0d5367!important} body.theme-light .method-grid button.active{ background:#f7fbe9!important; border-color:#78a80d!important; box-shadow:0 0 0 3px rgba(120,168,13,.14)!important; } body.theme-light .method-grid button.active :where(b,strong){color:#0b2514!important} body.theme-light .summary-row{color:#475569!important;border-color:#d7e2e5!important} body.theme-light .summary-row b{color:#0f172a!important} body.theme-light .summary-row.danger b{color:#a61b16!important} body.theme-light .summary-row.total :where(span,b){color:#527c05!important} body.theme-light .checkout-form-grid .optional-field, body.theme-light .checkout-form-grid label>small:not(.field-error){color:#526174!important} body.theme-light .checkout-view-notice-wrap .alert-info{color:#123d5a!important;background:#edf7ff!important;border-color:#b8dcf4!important} body.theme-light .checkout-view-notice-wrap .alert-danger{color:#8f1712!important;background:#fff1f1!important;border-color:#f2b8b5!important} /* Breadcrumbs and metadata on white editorial/product pages. */ body.theme-light :where(.product-breadcrumb,.breadcrumb){color:#334155!important} body.theme-light :where(.product-breadcrumb,.breadcrumb) a{color:#075f91!important} body.theme-light :where(.product-breadcrumb,.breadcrumb) .active{color:#334155!important} body.theme-light :where(.blog-card-meta,.blog-post-meta,.article-meta,.post-meta,.review-meta,.product-meta,.product-sku,.archive-product-brand) :where(span,small,time){color:#475569!important} /* Single article: white title on a white first paint is forbidden. The hero owns a stable dark surface whenever its inverse white typography is used. */ body.theme-light.blog-article-page .blog-hero{ color:#fff!important; background: radial-gradient(circle at 8% 0,rgba(143,181,26,.24),transparent 25rem), radial-gradient(circle at 100% 100%,rgba(37,172,190,.18),transparent 25rem), linear-gradient(135deg,#062f3c 0%,#075267 52%,#0b6878 100%)!important; } body.theme-light.blog-article-page .blog-hero :where(h1,h2,h3,strong,b){color:#fff!important} body.theme-light.blog-article-page .blog-hero :where(p,small,.blog-meta span,.eyebrow){color:#edf5f7!important} body.theme-light.blog-article-page :where(.blog-article,.quick-summary-box,.sidebar-card,.blog-comments-section) :where(p,li){color:#334155!important} body.theme-light.blog-article-page :where(.blog-article,.quick-summary-box,.sidebar-card,.blog-comments-section) :where(h1,h2,h3,h4,strong,b){color:#0f172a!important} /* Product/archive legacy dark grays normalized on light surfaces. */ body.theme-light :where(.spec-table span,.qa-list p,.pros-cons li,.care-list li,.authenticity-box, .archive-list-features,.load-more-wrap small,.archive-seo-panel p,.archive-related-brands a, .delivery-estimate p,.delivery-estimate small,.review-item-head span,.review-item-head small, .cart-item-title-row p,.cart-item-options span,.cart-item-price del,.order-main-info span, .order-status-row small,.account-menu-group h3,.panel-empty-state p){color:#475569!important} /* Admin light-theme helper copy and topbar remain readable too. */ body.theme-light.admin-panel-body :where(.admin-topbar p,.admin-breadcrumb,.admin-nav-group h3,.admin-card p,.admin-card small,.settings-help,.admin-help){color:#475569!important} body.theme-light.admin-panel-body :where(.admin-topbar h1,.admin-card h2,.admin-card h3,.settings-card h2,.settings-card h3){color:#0f172a!important} /* Global flash messages: always visible at the viewport top, not buried below page content. Used by both storefront and admin layouts. */ .cms-global-flash-stack{ position:fixed; z-index:2147483000; top:max(14px,env(safe-area-inset-top)); left:50%; width:min(720px,calc(100vw - 28px)); transform:translateX(-50%); display:grid; gap:10px; pointer-events:none; } .cms-global-flash{ display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:13px 14px; border:1px solid #bbd6c6; border-radius:18px; background:#fff; color:#0f172a; box-shadow:0 20px 65px rgba(15,23,42,.22); pointer-events:auto; transition:opacity .2s ease,transform .2s ease; } .cms-global-flash>i{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center; font-size:21px;background:#e8f7ee;color:#087443; } .cms-global-flash__copy{min-width:0;display:grid;gap:2px} .cms-global-flash__copy strong{color:#0f172a!important;font-size:14px;font-weight:950} .cms-global-flash__copy span{color:#334155!important;font-size:13px;font-weight:750;line-height:1.75} .cms-global-flash__action{border:1px solid #b9d8c5;border-radius:11px;padding:7px 11px;color:#075f45!important;background:#f3fbf6;font-weight:900;font-size:12px} .cms-global-flash__close{width:34px;height:34px;border:0;border-radius:10px;background:#f1f5f9;color:#334155;display:grid;place-items:center} .cms-global-flash--warning{border-color:#ead39a} .cms-global-flash--warning>i{background:#fff7df;color:#765000} .cms-global-flash--error{border-color:#efb6b3} .cms-global-flash--error>i{background:#fff0ef;color:#a61b16} .cms-global-flash.is-hiding{opacity:0;transform:translateY(-10px)} @media(max-width:640px){ .cms-global-flash{grid-template-columns:38px minmax(0,1fr) 32px;padding:11px;gap:9px;border-radius:15px} .cms-global-flash>i{width:38px;height:38px} .cms-global-flash__action{grid-column:2/4;justify-self:start} .cms-global-flash__close{grid-column:3;grid-row:1} }