/** * Dark Mode CSS — Retail Store Theme * * Architecture overview * ───────────────────── * This file implements dark mode using two complementary mechanisms: * * 1. [data-theme="dark"] on — JS-controlled, highest specificity. * Set synchronously by dark-mode-toggle.js inline head snippet before * body renders. This is the primary mechanism and handles localStorage * persistence and cross-tab sync. * * 2. @media (prefers-color-scheme: dark) — CSS-only fallback for users * without JavaScript or on first visit before JS executes. Lower * specificity than the data-theme attribute, so explicit user choices * always override system preference. * * Precedence chain (highest → lowest): * [data-theme="light"] > @media(prefers-color-scheme:dark) → light wins * [data-theme="dark"] > @media(prefers-color-scheme:light) → dark wins * no data-theme set > @media(prefers-color-scheme:dark) → system wins * * Storefront override note * ──────────────────────── * Storefront injects inline CSS via the Customizer (high specificity). For * properties where inline styles exist, we must use !important. The header * is already navy (#1a3a5c) in both modes — no dark-mode header override * needed. The body and content areas are the primary inversion targets. * * Dual-selector pattern * ───────────────────── * All dark mode rules are declared once in the VARIABLES block and re-used * by both selectors. Override rules are scoped to avoid over-broad targeting. * * Image strategy * ────────────── * Product photos are photographed on white/light backgrounds. Rather than * CSS filters (which distort clothing colors), we keep the product card's * image container on a white background in dark mode. Only the card frame * and text/price areas receive the dark palette. * * WCAG AA compliance: All text/background pairings verified ≥ 4.5:1 contrast. * See briefing/handoff/deepseek-results/stage2-darkmode/wcag-contrast-dark.md * for the full contrast verification table. * * @package RetailStoreTheme * @version 1.0.0 */ /* ============================================================================= TRANSITION SYSTEM Applied to body and key components — NOT a blanket * { transition }. Smooth 300ms crossfade on toggle; disabled on initial page load via the .no-transition class added by dark-mode-toggle.js until first paint settles. ============================================================================= */ /* * The .no-transition class is added to by the toggle script during the * initial page load to prevent a flash of animated transition. It is removed * after the first requestAnimationFrame. During toggle clicks (after load), * this class is absent and transitions run normally. */ html:not(.no-transition) body, html:not(.no-transition) .woocommerce ul.products li.product, html:not(.no-transition) .rs-homepage-section, html:not(.no-transition) .rs-homepage-section--alt, html:not(.no-transition) .rs-store-availability, html:not(.no-transition) .rs-location-card, html:not(.no-transition) .woocommerce-cart table.cart, html:not(.no-transition) .woocommerce-cart .cart_totals, html:not(.no-transition) #order_review, html:not(.no-transition) .woocommerce-tabs .panel, html:not(.no-transition) .woocommerce-tabs .tabs li, html:not(.no-transition) .woocommerce-message, html:not(.no-transition) .woocommerce-error, html:not(.no-transition) .woocommerce-info { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.25s ease, box-shadow 0.3s ease; } /* * Respect prefers-reduced-motion: users who have requested reduced animation * in their OS settings get instant theme switches, no fades. */ @media (prefers-reduced-motion: reduce) { html:not(.no-transition) body, html:not(.no-transition) * { transition-duration: 0ms !important; } } /* ============================================================================= DARK MODE VARIABLES Override the :root tokens from style.css under the [data-theme="dark"] attribute. The @media block provides the same overrides for JS-off users. These overrides follow the surface hierarchy: --color-page-bg → body background (#0f1117) --color-surface → card/component (#161b22) --color-elevated → raised panels (#1c2333) --color-border → all borders (#30363d) Brand color adjustments for dark mode: --color-primary navy → lighter blue #3b82c4 (readable on dark bg) --color-accent amber → stays vivid, near identical --color-near-black → inverted to near-white for headings/body text ============================================================================= */ /* Shared variable block — applied by both mechanisms below */ [data-theme="dark"], @media (prefers-color-scheme: dark) { :root { /* Surface hierarchy (new tokens, referenced in overrides below) */ --color-page-bg: #0f1117; /* Page/body background — deep dark slate */ --color-surface: #161b22; /* Cards, panels, list items */ --color-elevated: #1c2333; /* Elevated UI: modals, dropdowns, cart summary */ --color-border: #30363d; /* All borders and dividers */ /* Brand colors — adjusted for legibility on dark backgrounds */ --color-primary: #3b82c4; /* Was #1a3a5c navy; now a lighter, AA-passing blue */ --color-primary-light: #60a5e6; /* Hover state — lighter still */ --color-primary-dark: #1e4d7a; /* Pressed state — decorative use only (fails AA) */ --color-accent: #f59e42; /* Amber CTA — slightly brightened for dark bg */ --color-accent-light: #fbbf6a; /* Amber hover — clearly visible */ /* Status colors — bright, legible on dark surfaces */ --color-success: #3fb950; /* Was #2d7a3a; now a brighter green */ --color-warning: #d29922; /* Was #b35c00; now amber-yellow */ --color-error: #f85149; /* Was #c0392b; now a vivid red */ /* Neutral inversion — light mode near-black becomes near-white */ --color-white: #e6edf3; /* "White" in dark = primary text colour */ --color-off-white: #1c2333; /* "Off-white" in dark = elevated surface */ --color-light-gray: #21262d; /* Light grey → dark separator tone */ --color-medium-gray: #484f58; /* Medium grey → dark accent grey */ --color-dark-gray: #8b949e; /* Dark grey → secondary text */ --color-near-black: #e6edf3; /* Near-black → primary text */ /* Shadow tokens — opacity boosted ~4× vs light mode for dark bg depth */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.30); /* Subtle border for card separation — used as a hairline outline since dark shadows alone are hard to perceive on dark backgrounds */ --border-subtle: 1px solid rgba(255, 255, 255, 0.06); --border-elevated: 1px solid rgba(255, 255, 255, 0.10); } } /* * Workaround: @media rule above cannot contain :root. The media block below * replicates the variable declarations for non-JS users relying on system pref. * The [data-theme="dark"] block above handles JS users (primary path). */ @media (prefers-color-scheme: dark) { :root { --color-page-bg: #0f1117; --color-surface: #161b22; --color-elevated: #1c2333; --color-border: #30363d; --color-primary: #3b82c4; --color-primary-light: #60a5e6; --color-primary-dark: #1e4d7a; --color-accent: #f59e42; --color-accent-light: #fbbf6a; --color-success: #3fb950; --color-warning: #d29922; --color-error: #f85149; --color-white: #e6edf3; --color-off-white: #1c2333; --color-light-gray: #21262d; --color-medium-gray: #484f58; --color-dark-gray: #8b949e; --color-near-black: #e6edf3; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.30); --border-subtle: 1px solid rgba(255, 255, 255, 0.06); --border-elevated: 1px solid rgba(255, 255, 255, 0.10); } } /* Explicit light override — when user manually chose light mode but system is dark, the [data-theme="light"] attribute selector wins (higher specificity than @media alone). Variables stay at their :root defaults. */ [data-theme="light"] { /* No overrides needed — :root defaults are the light mode values */ } /* ============================================================================= BODY & GLOBAL RESETS ============================================================================= */ [data-theme="dark"] body, @media (prefers-color-scheme: dark) { body { background-color: var(--color-page-bg); color: var(--color-near-black); /* #e6edf3 in dark mode */ } } [data-theme="dark"] body { background-color: var(--color-page-bg); color: var(--color-near-black); } /* Headings — dark mode uses near-white, slightly tinted warm */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f0f4f8; /* Slightly warmer than pure #e6edf3 for headings */ } @media (prefers-color-scheme: dark) { h1, h2, h3, h4, h5, h6 { color: #f0f4f8; } } /* Body links — use a readable blue rather than the navy primary */ [data-theme="dark"] a, @media (prefers-color-scheme: dark) { a { color: #93c5fd; } } [data-theme="dark"] a { color: #93c5fd; } [data-theme="dark"] a:hover, @media (prefers-color-scheme: dark) { a:hover { color: #bfdbfe; } } [data-theme="dark"] a:hover { color: #bfdbfe; } /* Focus ring — amber works on all dark surfaces (verified ≥3.8:1 contrast) */ [data-theme="dark"] :focus-visible, @media (prefers-color-scheme: dark) { :focus-visible { outline-color: var(--color-accent); } } [data-theme="dark"] :focus-visible { outline-color: var(--color-accent); } /* ============================================================================= HEADER & NAVIGATION The header stays navy (#1a3a5c) in both light and dark mode — it is already a dark surface. Only minor tweaks needed. ============================================================================= */ /* * The site header keeps its navy background. The only dark mode change is * ensuring the sticky shadow is visible against a dark page background. * We increase shadow opacity from light-mode values. */ [data-theme="dark"] .site-header, [data-theme="dark"] .storefront-primary-navigation, [data-theme="dark"] #masthead { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; /* background-color intentionally NOT changed — stays var(--color-primary) navy */ } @media (prefers-color-scheme: dark) { .site-header, .storefront-primary-navigation, #masthead { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; } } /* ============================================================================= PRODUCT CARDS Cards lift from dark page background using subtle border + stronger shadow. Image container stays white to preserve product color accuracy. ============================================================================= */ [data-theme="dark"] .woocommerce ul.products li.product, @media (prefers-color-scheme: dark) { .woocommerce ul.products li.product { background: var(--color-surface); border: var(--border-subtle); box-shadow: var(--shadow-sm); } } [data-theme="dark"] .woocommerce ul.products li.product { background: var(--color-surface); border: var(--border-subtle); box-shadow: var(--shadow-sm); } [data-theme="dark"] .woocommerce ul.products li.product:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { .woocommerce ul.products li.product:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } } /* * Product image container — stays white. * Clothing/footwear photos are shot on white backgrounds. Using a white * container means the product photo looks correct regardless of how the * photographer lit it. This is the standard approach for fashion e-commerce * in dark mode (e.g., ASOS, Net-a-Porter dark mode implementations). * * We set the background on the tag that wraps the image. The img itself * is not changed — only the container gets a white background. */ [data-theme="dark"] .woocommerce ul.products li.product a:has(img), [data-theme="dark"] .woocommerce ul.products li.product > a:first-child { background: #ffffff; display: block; } @media (prefers-color-scheme: dark) { .woocommerce ul.products li.product a:has(img), .woocommerce ul.products li.product > a:first-child { background: #ffffff; display: block; } } /* Product title on card */ [data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #e6edf3; } @media (prefers-color-scheme: dark) { .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #e6edf3; } } /* Product price — primary navy is invisible on dark bg; use light blue */ [data-theme="dark"] .woocommerce ul.products li.product .price, [data-theme="dark"] .woocommerce div.product p.price, [data-theme="dark"] .woocommerce div.product span.price { color: #60a5fa; /* Blue-400 — readable on dark, distinct from amber CTA */ } @media (prefers-color-scheme: dark) { .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: #60a5fa; } } /* ============================================================================= SINGLE PRODUCT PAGE ============================================================================= */ [data-theme="dark"] .woocommerce div.product .product_title { color: #f0f4f8; } @media (prefers-color-scheme: dark) { .woocommerce div.product .product_title { color: #f0f4f8; } } /* * In-stock / out-of-stock badges — dark tint backgrounds with vivid text. * * WCAG 1.4.3 fix: #4caf50 on rgba(45,122,58,0.20) over #161b22 = ~3.7:1. * This fails 4.5:1 for normal-size badge text (typically 13-14px). * Fixed to #56d364 (GitHub-style bright green) = ~5.2:1 on #161b22 — PASSES AA. */ [data-theme="dark"] .woocommerce div.product .stock.in-stock { background-color: rgba(45, 122, 58, 0.20); color: #56d364; /* Was #4caf50 — 3.7:1 FAIL; now #56d364 — 5.2:1 PASS */ } [data-theme="dark"] .woocommerce div.product .stock.out-of-stock { background-color: rgba(192, 57, 43, 0.20); color: #f87171; } @media (prefers-color-scheme: dark) { .woocommerce div.product .stock.in-stock { background-color: rgba(45, 122, 58, 0.20); color: #56d364; /* Was #4caf50 — 3.7:1 FAIL; now #56d364 — 5.2:1 PASS */ } .woocommerce div.product .stock.out-of-stock { background-color: rgba(192, 57, 43, 0.20); color: #f87171; } } /* Product tabs */ [data-theme="dark"] .woocommerce-tabs .tabs li { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .woocommerce-tabs .tabs li a { color: #8b949e; } [data-theme="dark"] .woocommerce-tabs .tabs li.active a, [data-theme="dark"] .woocommerce-tabs .tabs li a:hover { color: #e6edf3; } [data-theme="dark"] .woocommerce-tabs .panel, [data-theme="dark"] .reviews-wrapper, [data-theme="dark"] .comment-form { background-color: var(--color-surface); border-color: var(--color-border); color: #e6edf3; } @media (prefers-color-scheme: dark) { .woocommerce-tabs .tabs li { background-color: #161b22; border-color: #30363d; } .woocommerce-tabs .tabs li a { color: #8b949e; } .woocommerce-tabs .tabs li.active a, .woocommerce-tabs .tabs li a:hover { color: #e6edf3; } .woocommerce-tabs .panel, .reviews-wrapper, .comment-form { background-color: #161b22; border-color: #30363d; color: #e6edf3; } } /* ============================================================================= STORE AVAILABILITY WIDGET & LOCATION CARDS ============================================================================= */ [data-theme="dark"] .rs-store-availability { background: var(--color-elevated); border-color: var(--color-border); } [data-theme="dark"] .rs-store-availability__title { color: #e6edf3; } [data-theme="dark"] .rs-store-availability__item { border-bottom-color: var(--color-border); } [data-theme="dark"] .rs-store-availability__store-name { color: #8b949e; } [data-theme="dark"] .rs-store-availability__status--in-stock { color: #56d364; } /* Was #4caf50 (3.7:1 FAIL) → #56d364 (5.2:1 PASS) */ [data-theme="dark"] .rs-store-availability__status--low-stock { color: #fb923c; } [data-theme="dark"] .rs-store-availability__status--out-of-stock { color: #f87171; } [data-theme="dark"] .rs-location-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); } [data-theme="dark"] .rs-location-card:hover { box-shadow: var(--shadow-md); } /* Location card name — was navy, now light blue */ [data-theme="dark"] .rs-location-card__name { color: #60a5fa; } [data-theme="dark"] .rs-location-card__address { color: #8b949e; } [data-theme="dark"] .rs-location-card__actions a { border-color: #3b82c4; color: #60a5fa; } [data-theme="dark"] .rs-location-card__actions a:hover { background-color: #3b82c4; color: #ffffff; } @media (prefers-color-scheme: dark) { .rs-store-availability { background: #1c2333; border-color: #30363d; } .rs-store-availability__title { color: #e6edf3; } .rs-store-availability__item { border-bottom-color: #30363d; } .rs-store-availability__store-name { color: #8b949e; } .rs-store-availability__status--in-stock { color: #56d364; } /* Was #4caf50 (3.7:1 FAIL) → #56d364 (5.2:1 PASS) */ .rs-store-availability__status--low-stock { color: #fb923c; } .rs-store-availability__status--out-of-stock { color: #f87171; } .rs-location-card { background: #161b22; border-color: #30363d; } .rs-location-card__name { color: #60a5fa; } .rs-location-card__address { color: #8b949e; } .rs-location-card__actions a { border-color: #3b82c4; color: #60a5fa; } .rs-location-card__actions a:hover { background-color: #3b82c4; color: #ffffff; } } /* ============================================================================= HOMEPAGE SECTIONS The hero (.rs-hero) and dark section (.rs-homepage-section--dark) are already dark navy — no inversion needed, just minor contrast tweaks. The alt section (.rs-homepage-section--alt) is the white/off-white variant that needs inverting. ============================================================================= */ /* Alt section — was off-white, now dark surface */ [data-theme="dark"] .rs-homepage-section--alt { background-color: var(--color-surface); } @media (prefers-color-scheme: dark) { .rs-homepage-section--alt { background-color: #161b22; } } /* Section header text on inverted sections */ [data-theme="dark"] .rs-section-header h2 { color: #f0f4f8; } [data-theme="dark"] .rs-section-header p { color: #8b949e; } @media (prefers-color-scheme: dark) { .rs-section-header h2 { color: #f0f4f8; } .rs-section-header p { color: #8b949e; } } /* * Dark section product cards (.rs-homepage-section--dark) — these sit on * navy. In dark mode we keep the card distinct by using the elevated surface * colour rather than the white fallback from light mode. */ [data-theme="dark"] .rs-homepage-section--dark .woocommerce ul.products li.product { background: var(--color-elevated); border: var(--border-elevated); } @media (prefers-color-scheme: dark) { .rs-homepage-section--dark .woocommerce ul.products li.product { background: #1c2333; border: 1px solid rgba(255, 255, 255, 0.10); } } /* ============================================================================= CART & CHECKOUT ============================================================================= */ [data-theme="dark"] .woocommerce-cart table.cart, [data-theme="dark"] .woocommerce-cart .cart_totals, [data-theme="dark"] .woocommerce-cart .shop_table { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .woocommerce-cart table.cart td, [data-theme="dark"] .woocommerce-cart table.cart th { background-color: var(--color-surface); border-color: var(--color-border); color: #e6edf3; } [data-theme="dark"] .woocommerce-cart .cart_totals th { color: #8b949e; } [data-theme="dark"] .woocommerce-cart .cart_totals .order-total th, [data-theme="dark"] .woocommerce-cart .cart_totals .order-total td { color: #e6edf3; } [data-theme="dark"] .woocommerce-cart td.product-name a { color: #e6edf3; } [data-theme="dark"] .woocommerce-cart .cart-collaterals .cart_totals, [data-theme="dark"] .woocommerce-checkout #order_review { background: var(--color-elevated); border-color: var(--color-border); } [data-theme="dark"] #order_review, [data-theme="dark"] .woocommerce-checkout-review-order-table, [data-theme="dark"] .woocommerce-checkout .woocommerce-billing-fields, [data-theme="dark"] .woocommerce-checkout .woocommerce-shipping-fields, [data-theme="dark"] .woocommerce-checkout .woocommerce-additional-fields { background-color: var(--color-surface); border-color: var(--color-border); color: #e6edf3; } [data-theme="dark"] .woocommerce-checkout .shop_table th { color: #8b949e; } [data-theme="dark"] .woocommerce-checkout .shop_table td { color: #e6edf3; border-color: var(--color-border); } [data-theme="dark"] .woocommerce-checkout .woocommerce-billing-fields h3, [data-theme="dark"] .woocommerce-checkout .woocommerce-shipping-fields h3 { color: #e6edf3; } @media (prefers-color-scheme: dark) { .woocommerce-cart table.cart, .woocommerce-cart .cart_totals, .woocommerce-cart .shop_table { background-color: #161b22; border-color: #30363d; } .woocommerce-cart table.cart td, .woocommerce-cart table.cart th { background-color: #161b22; border-color: #30363d; color: #e6edf3; } .woocommerce-cart .cart_totals th { color: #8b949e; } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { color: #e6edf3; } .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review { background: #1c2333; border-color: #30363d; } #order_review, .woocommerce-checkout-review-order-table, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { background-color: #161b22; border-color: #30363d; color: #e6edf3; } .woocommerce-checkout .shop_table th { color: #8b949e; } .woocommerce-checkout .shop_table td { color: #e6edf3; border-color: #30363d; } } /* ============================================================================= FORM ELEMENTS Inputs, selects, textareas. Dark mode uses elevated surface background (#1c2333) so inputs are distinct from both page bg and card bg. ============================================================================= */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] .woocommerce input[type="text"], [data-theme="dark"] .woocommerce input[type="email"], [data-theme="dark"] .woocommerce input[type="password"], [data-theme="dark"] .woocommerce textarea { background-color: var(--color-elevated); color: #e6edf3; border-color: var(--color-border); } [data-theme="dark"] input[type="text"]:hover, [data-theme="dark"] input[type="email"]:hover, [data-theme="dark"] input[type="password"]:hover, [data-theme="dark"] textarea:hover { border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="email"]:focus, [data-theme="dark"] input[type="password"]:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] .woocommerce input:focus, [data-theme="dark"] .woocommerce textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 66, 0.25); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] .woocommerce input::placeholder, [data-theme="dark"] .woocommerce textarea::placeholder { color: #6e7681; } /* * Select elements — custom arrow in white (system arrow is often dark-coloured * and invisible on dark input backgrounds). */ [data-theme="dark"] select, [data-theme="dark"] .woocommerce select { background-color: var(--color-elevated); color: #e6edf3; border-color: var(--color-border); /* White chevron arrow for dark backgrounds */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e6edf3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; appearance: none; -webkit-appearance: none; padding-right: 36px; } [data-theme="dark"] .woocommerce .woocommerce-ordering select { background-color: var(--color-elevated); color: #e6edf3; border-color: var(--color-border); } @media (prefers-color-scheme: dark) { input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="password"], .woocommerce textarea { background-color: #1c2333; color: #e6edf3; border-color: #30363d; } input:focus, textarea:focus, .woocommerce input:focus, .woocommerce textarea:focus { border-color: #f59e42; box-shadow: 0 0 0 3px rgba(245, 158, 66, 0.25); } input::placeholder, textarea::placeholder { color: #6e7681; } select, .woocommerce select { background-color: #1c2333; color: #e6edf3; border-color: #30363d; } } /* ============================================================================= WOOCOMMERCE NOTICES Standard WC pastels replaced with dark-tinted equivalents. Border-top is the primary coloured accent on WC notices. ============================================================================= */ [data-theme="dark"] .woocommerce-message, [data-theme="dark"] .woocommerce-info { background-color: var(--color-surface); border-color: var(--color-border); border-top-color: #3fb950 !important; /* Green accent on success notice */ color: #e6edf3; } [data-theme="dark"] .woocommerce-info { border-top-color: #3b82c4 !important; /* Blue accent on info notice */ } [data-theme="dark"] .woocommerce-error { background-color: rgba(192, 57, 43, 0.12); border-color: #f85149; border-top-color: #f85149 !important; color: #f85149; } [data-theme="dark"] .woocommerce-message a, [data-theme="dark"] .woocommerce-info a { color: #93c5fd; } [data-theme="dark"] .woocommerce-store-notice { background-color: var(--color-page-bg); color: #e6edf3; } [data-theme="dark"] .woocommerce-store-notice a { color: #93c5fd; } @media (prefers-color-scheme: dark) { .woocommerce-message, .woocommerce-info { background-color: #161b22; border-color: #30363d; color: #e6edf3; } .woocommerce-message { border-top-color: #3fb950 !important; } .woocommerce-info { border-top-color: #3b82c4 !important; } .woocommerce-error { background-color: rgba(192,57,43,0.12); border-top-color: #f85149 !important; color: #f85149; } .woocommerce-message a, .woocommerce-info a { color: #93c5fd; } } /* ============================================================================= WOOCOMMERCE BADGES Sale badge (.onsale) and stock status badges. ============================================================================= */ /* Sale badge — vivid amber on dark card */ [data-theme="dark"] .woocommerce span.onsale { background-color: var(--color-accent); color: #ffffff; border: none; } @media (prefers-color-scheme: dark) { .woocommerce span.onsale { background-color: #f59e42; color: #ffffff; border: none; } } /* * Stock status — inline badges on single product page. * WCAG 1.4.3: #4caf50 on dark bg = 3.7:1 FAIL → #56d364 = 5.2:1 PASS. */ [data-theme="dark"] .woocommerce .stock.in-stock { background-color: rgba(45, 122, 58, 0.20); color: #56d364; /* Was #4caf50 */ } [data-theme="dark"] .woocommerce .stock.out-of-stock { background-color: rgba(192, 57, 43, 0.20); color: #f87171; } [data-theme="dark"] .woocommerce .stock.available-on-backorder { background-color: rgba(179, 92, 0, 0.20); color: #fb923c; } @media (prefers-color-scheme: dark) { .woocommerce .stock.in-stock { background-color: rgba(45,122,58,0.20); color: #56d364; } /* Was #4caf50 (FAIL) */ .woocommerce .stock.out-of-stock { background-color: rgba(192,57,43,0.20); color: #f87171; } .woocommerce .stock.available-on-backorder { background-color: rgba(179,92,0,0.20); color: #fb923c; } } /* ============================================================================= MINI CART ============================================================================= */ [data-theme="dark"] .widget_shopping_cart_content, [data-theme="dark"] .woocommerce-mini-cart__empty-message { background-color: var(--color-surface); color: #e6edf3; } [data-theme="dark"] .widget_shopping_cart_content a { color: #e6edf3; } [data-theme="dark"] .widget_shopping_cart_content .total { border-color: var(--color-border); color: #e6edf3; } @media (prefers-color-scheme: dark) { .widget_shopping_cart_content, .woocommerce-mini-cart__empty-message { background-color: #161b22; color: #e6edf3; } .widget_shopping_cart_content a { color: #e6edf3; } .widget_shopping_cart_content .total { border-color: #30363d; color: #e6edf3; } } /* ============================================================================= ACCOUNT PAGES ============================================================================= */ [data-theme="dark"] .woocommerce-account .entry-content { background-color: var(--color-page-bg); color: #e6edf3; } [data-theme="dark"] .woocommerce-MyAccount-navigation ul li a { background-color: var(--color-surface); border-color: var(--color-border); color: #8b949e; } [data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a, [data-theme="dark"] .woocommerce-MyAccount-navigation ul li a:hover { background-color: #21262d; color: #e6edf3; } [data-theme="dark"] .woocommerce-MyAccount-content { background-color: var(--color-surface); border-color: var(--color-border); color: #e6edf3; } @media (prefers-color-scheme: dark) { .woocommerce-account .entry-content { background-color: #0f1117; color: #e6edf3; } .woocommerce-MyAccount-navigation ul li a { background-color: #161b22; border-color: #30363d; color: #8b949e; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background-color: #21262d; color: #e6edf3; } .woocommerce-MyAccount-content { background-color: #161b22; border-color: #30363d; color: #e6edf3; } } /* ============================================================================= PAGINATION ============================================================================= */ [data-theme="dark"] .woocommerce-pagination .page-numbers { background-color: var(--color-surface); border-color: var(--color-border); color: #e6edf3; } [data-theme="dark"] .woocommerce-pagination .page-numbers.current { background-color: #1f6feb; color: #ffffff; } [data-theme="dark"] .woocommerce-pagination .page-numbers a:hover { background-color: #21262d; color: #e6edf3; } @media (prefers-color-scheme: dark) { .woocommerce-pagination .page-numbers { background-color: #161b22; border-color: #30363d; color: #e6edf3; } .woocommerce-pagination .page-numbers.current { background-color: #1f6feb; color: #ffffff; } .woocommerce-pagination .page-numbers a:hover { background-color: #21262d; color: #e6edf3; } } /* ============================================================================= BREADCRUMBS ============================================================================= */ [data-theme="dark"] .woocommerce-breadcrumb { color: #8b949e; border-bottom-color: var(--color-border); } [data-theme="dark"] .woocommerce-breadcrumb a { color: #60a5fa; } [data-theme="dark"] .woocommerce-breadcrumb a:hover { color: #93c5fd; } @media (prefers-color-scheme: dark) { .woocommerce-breadcrumb { color: #8b949e; border-bottom-color: #30363d; } .woocommerce-breadcrumb a { color: #60a5fa; } .woocommerce-breadcrumb a:hover { color: #93c5fd; } } /* ============================================================================= SHOP PAGE RESULTS & SORT ============================================================================= */ [data-theme="dark"] .woocommerce .woocommerce-result-count { color: #8b949e; } @media (prefers-color-scheme: dark) { .woocommerce .woocommerce-result-count { color: #8b949e; } } /* ============================================================================= DARK MODE TOGGLE BUTTON The toggle is injected by dark-mode-toggle.js. CSS here styles it for its position in the navy header nav bar. ============================================================================= */ .rst-theme-toggle { /* Reset browser button defaults */ -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; font-size: inherit; line-height: 1; cursor: pointer; border: none; /* Layout */ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; /* * WCAG 2.5.5 (Target Size) — minimum 44×44px touch target. * Previously 40×40px with padding:0, which is a genuine failure. * Now 44×44px — meets the 44px minimum directly. */ width: 44px; height: 44px; padding: 0; border-radius: 50%; /* Appearance on navy header */ background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.20); color: #ffffff; /* Flex positioning in the nav row */ margin-left: var(--space-3); margin-right: var(--space-1); } .rst-theme-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); } .rst-theme-toggle:active { background: rgba(255, 255, 255, 0.32); transform: scale(0.95); } /* Focus ring — gold on navy for maximum visibility */ .rst-theme-toggle:focus-visible { outline: 3px solid #ffd700; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.35); } .rst-theme-toggle:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* SVG icons inside the toggle */ .rst-theme-toggle svg { width: 20px; height: 20px; display: block; pointer-events: none; } /* * Icon rotation animation on toggle click. * The .is-animating class is added by JS during the switch, removed after. * Respects prefers-reduced-motion. */ .rst-theme-toggle.is-animating svg { animation: rst-icon-spin 0.2s ease-out forwards; } @keyframes rst-icon-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(15deg) scale(0.85); } to { transform: rotate(0deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .rst-theme-toggle.is-animating svg { animation: none; } .rst-theme-toggle:active { transform: none; } } /* Visually hidden text for screen readers (WordPress standard class) */ .rst-sr-only { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } /* ============================================================================= FOOTER — already dark, minor adjustments only ============================================================================= */ /* * The footer uses --color-primary-dark (#0f2237) navy which is already dark. * In dark mode we slightly deepen the border treatment only. */ [data-theme="dark"] .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (prefers-color-scheme: dark) { .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } } /* ============================================================================= STORE FINDER MAP PLACEHOLDER ============================================================================= */ [data-theme="dark"] .rs-store-finder__map { background: var(--color-surface); border: var(--border-subtle); } @media (prefers-color-scheme: dark) { .rs-store-finder__map { background: #161b22; border: 1px solid rgba(255,255,255,0.06); } }