/* GoldSystem — theme & accessibility layer (Module 24).
Tokens ride data-gsys-theme on ; "auto" resolves in theme.js. */
:root {
--gsys-bg: #f4f5f7;
--gsys-surface: #ffffff;
--gsys-surface-2: #f8f9fb;
--gsys-text: #1f2937;
--gsys-muted: #4b5563;
--gsys-border: #dfe3e8;
--gsys-gold: #b8860b;
--gsys-link: #2271b1;
--gsys-focus: #2563eb;
--gsys-ok: #15803d;
--gsys-warn: #b45309;
--gsys-bad: #b91c1c;
--gsys-info: #1d4ed8;
--gsys-radius: 14px;
--gsys-radius-s: 9px;
--gsys-shadow: 0 1px 2px rgba(24, 18, 8, 0.05), 0 10px 30px rgba(24, 18, 8, 0.07);
}
[data-gsys-theme="dark"] {
--gsys-bg: #0f141d;
--gsys-surface: #171f2b;
--gsys-surface-2: #1d2735;
--gsys-text: #e6e9ef;
--gsys-muted: #a3adbb;
--gsys-border: #2b3648;
--gsys-gold: #e7b84e;
--gsys-link: #8ab4ff;
--gsys-focus: #7cb1ff;
--gsys-ok: #34d399;
--gsys-warn: #f0b429;
--gsys-bad: #f87171;
--gsys-info: #8ab4ff;
--gsys-radius: 14px;
--gsys-radius-s: 9px;
--gsys-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------ Admin & POS surfaces */
.gsys-wrap { color: var(--gsys-text); }
.gsys-wrap .gsys-card {
background: var(--gsys-surface);
border: 1px solid var(--gsys-border);
color: var(--gsys-text);
}
[data-gsys-theme="dark"] #wpbody-content .gsys-wrap h1,
[data-gsys-theme="dark"] .gsys-wrap h1,
[data-gsys-theme="dark"] .gsys-wrap h2,
[data-gsys-theme="dark"] .gsys-wrap h3 { color: var(--gsys-text); }
[data-gsys-theme="dark"] .gsys-wrap a { color: var(--gsys-link); }
[data-gsys-theme="dark"] .gsys-wrap .description,
[data-gsys-theme="dark"] .gsys-wrap small { color: var(--gsys-muted); }
[data-gsys-theme="dark"] .gsys-wrap table.widefat {
background: var(--gsys-surface);
border-color: var(--gsys-border);
color: var(--gsys-text);
}
[data-gsys-theme="dark"] .gsys-wrap table.widefat thead th,
[data-gsys-theme="dark"] .gsys-wrap table.widefat tfoot th {
background: var(--gsys-surface-2);
color: var(--gsys-muted);
border-color: var(--gsys-border);
}
[data-gsys-theme="dark"] .gsys-wrap table.widefat td,
[data-gsys-theme="dark"] .gsys-wrap table.widefat th { border-color: var(--gsys-border); }
[data-gsys-theme="dark"] .gsys-wrap .striped > tbody > :nth-child(odd),
[data-gsys-theme="dark"] .gsys-wrap table.widefat.striped tbody tr:nth-child(odd) { background: var(--gsys-surface-2); }
[data-gsys-theme="dark"] .gsys-wrap input[type="text"],
[data-gsys-theme="dark"] .gsys-wrap input[type="search"],
[data-gsys-theme="dark"] .gsys-wrap input[type="number"],
[data-gsys-theme="dark"] .gsys-wrap input[type="email"],
[data-gsys-theme="dark"] .gsys-wrap input[type="tel"],
[data-gsys-theme="dark"] .gsys-wrap input[type="date"],
[data-gsys-theme="dark"] .gsys-wrap input[type="time"],
[data-gsys-theme="dark"] .gsys-wrap select,
[data-gsys-theme="dark"] .gsys-wrap textarea {
background: var(--gsys-surface-2);
border-color: var(--gsys-border);
color: var(--gsys-text);
color-scheme: dark;
}
[data-gsys-theme="dark"] .gsys-wrap .button,
[data-gsys-theme="dark"] .gsys-wrap .button-secondary {
background: var(--gsys-surface-2);
border-color: var(--gsys-border);
color: var(--gsys-text);
}
[data-gsys-theme="dark"] .gsys-wrap .button-primary {
background: var(--gsys-gold);
border-color: var(--gsys-gold);
color: #1a1200;
}
[data-gsys-theme="dark"] .nav-tab-wrapper { border-bottom-color: var(--gsys-border); }
[data-gsys-theme="dark"] .nav-tab {
background: var(--gsys-surface-2);
border-color: var(--gsys-border);
color: var(--gsys-muted);
}
[data-gsys-theme="dark"] .nav-tab-active,
[data-gsys-theme="dark"] .nav-tab-active:hover {
background: var(--gsys-surface);
color: var(--gsys-text);
}
/* ------------------------------------------------ Badges — AA contrast */
.gsys-badge { font-weight: 600; }
.gsys-in_stock { background: #d8f3e1; color: #0c5427; }
.gsys-reserved { background: #fdeeba; color: #6b4e00; }
.gsys-sold { background: #dbe7ff; color: #1c3faa; }
.gsys-returned { background: #fadcdc; color: #8f1030; }
[data-gsys-theme="dark"] .gsys-badge { background: var(--gsys-surface-2); color: var(--gsys-muted); }
[data-gsys-theme="dark"] .gsys-in_stock { background: #10331d; color: #6fe09a; }
[data-gsys-theme="dark"] .gsys-reserved { background: #3a2e05; color: #f5cf5a; }
[data-gsys-theme="dark"] .gsys-sold { background: #14264d; color: #9db9ff; }
[data-gsys-theme="dark"] .gsys-returned { background: #431019; color: #ff9aa8; }
/* ------------------------------------------------ Members portal (front) */
[data-gsys-theme="dark"] .gsysp { background: var(--gsys-bg); color: var(--gsys-text); }
[data-gsys-theme="dark"] .gsysp-card,
[data-gsys-theme="dark"] .gsysp-head {
background: var(--gsys-surface);
border-color: var(--gsys-border);
color: var(--gsys-text);
}
[data-gsys-theme="dark"] .gsysp input,
[data-gsys-theme="dark"] .gsysp select,
[data-gsys-theme="dark"] .gsysp textarea {
background: var(--gsys-surface-2);
border-color: var(--gsys-border);
color: var(--gsys-text);
color-scheme: dark;
}
[data-gsys-theme="dark"] .gsysp a { color: var(--gsys-link); }
/* ------------------------------------------------ Storefront (front) */
[data-gsys-theme="dark"] #gsys-shop { --ink: #e6e9ef; --gold: #e7b84e; color: var(--gsys-text); }
[data-gsys-theme="dark"] #gsys-shop .js-card,
[data-gsys-theme="dark"] #gsys-shop .js-tab {
background: var(--gsys-surface);
border-color: var(--gsys-border);
color: var(--gsys-text);
}
[data-gsys-theme="dark"] #gsys-shop .js-tab.on { background: var(--gsys-gold); border-color: var(--gsys-gold); color: #1a1200; }
[data-gsys-theme="dark"] #gsys-shop .js-cartbtn { background: var(--gsys-surface-2); }
[data-gsys-theme="dark"] #gsys-shop .js-search,
[data-gsys-theme="dark"] #gsys-shop input,
[data-gsys-theme="dark"] #gsys-shop select,
[data-gsys-theme="dark"] #gsys-shop textarea {
background: var(--gsys-surface-2);
border-color: var(--gsys-border);
color: var(--gsys-text);
color-scheme: dark;
}
[data-gsys-theme="dark"] #gsys-shop .js-noimg { background: var(--gsys-surface-2); }
[data-gsys-theme="dark"] #gsys-shop .js-price { color: var(--gsys-gold); }
[data-gsys-theme="dark"] #gsys-shop .js-btn { background: var(--gsys-gold); color: #1a1200; }
[data-gsys-theme="dark"] #gsys-shop .js-meta,
[data-gsys-theme="dark"] #gsys-shop .js-back { color: var(--gsys-muted); }
/* ------------------------------------------------ Accessibility layer */
.gsys-wrap :focus-visible,
.gsysp :focus-visible,
#gsys-shop :focus-visible,
.gsys-theme-toggle:focus-visible {
outline: 2px solid var(--gsys-focus);
outline-offset: 2px;
border-radius: 4px;
}
.gsys-skip {
position: absolute;
inset-inline-start: -9999px;
background: var(--gsys-surface);
color: var(--gsys-text);
padding: 8px 14px;
z-index: 100000;
border-radius: 6px;
}
.gsys-skip:focus { inset-inline-start: 10px; inset-block-start: 10px; }
@media (prefers-reduced-motion: reduce) {
.gsys-wrap *, .gsysp *, #gsys-shop * {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
@media (pointer: coarse) {
.gsys-wrap .button, .gsys-wrap select, .gsys-wrap input[type="date"],
.gsysp button, .gsysp .gsysp-btn, #gsys-shop .js-btn, #gsys-shop .js-tab {
min-height: 42px;
}
}
/* ------------------------------------------------ Responsive audit */
@media (max-width: 782px) {
.gsys-wrap .gsys-grid { grid-template-columns: 1fr !important; }
.gsys-wrap .gsys-card { overflow-x: auto; }
.gsys-wrap h1 { font-size: 20px; }
}
/* ------------------------------------------------ Theme toggle button */
.gsys-theme-toggle {
position: fixed;
inset-block-end: 16px;
inset-inline-end: 16px;
z-index: 99990;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--gsys-border);
background: var(--gsys-surface);
color: var(--gsys-text);
font-size: 20px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
@media print {
.gsys-theme-toggle { display: none !important; }
}
/* ═══ v3.16.18 — Dark-mode legibility hardening (admin panels) ═══ */
/* Root cause fixed: bare | cells (row-label tables like Details/Totals),
card headings and misc text were falling through to WordPress's default
dark ink (#1d2327 / #32373c) on our dark cards. Force our tokens. */
[data-gsys-theme="dark"] .gsys-wrap,
[data-gsys-theme="dark"] .gsys-wrap p,
[data-gsys-theme="dark"] .gsys-wrap li,
[data-gsys-theme="dark"] .gsys-wrap label,
[data-gsys-theme="dark"] .gsys-wrap span,
[data-gsys-theme="dark"] .gsys-wrap strong,
[data-gsys-theme="dark"] .gsys-wrap b { color: var(--gsys-text); }
/* Every th/td inside our cards & tables — including bare | row labels. */
[data-gsys-theme="dark"] .gsys-wrap .gsys-card h1,
[data-gsys-theme="dark"] .gsys-wrap .gsys-card h2,
[data-gsys-theme="dark"] .gsys-wrap .gsys-card h3,
[data-gsys-theme="dark"] .gsys-wrap .gsys-card h4 { color: var(--gsys-text); }
[data-gsys-theme="dark"] .gsys-wrap .gsys-card table th,
[data-gsys-theme="dark"] .gsys-wrap table.widefat th,
[data-gsys-theme="dark"] .gsys-wrap table.widefat tbody th { color: var(--gsys-text); background: transparent; }
[data-gsys-theme="dark"] .gsys-wrap .gsys-card table td,
[data-gsys-theme="dark"] .gsys-wrap table.widefat td { color: var(--gsys-text); }
/* Column-header rows stay muted but visible. */
[data-gsys-theme="dark"] .gsys-wrap table thead th,
[data-gsys-theme="dark"] .gsys-wrap table.widefat thead th { color: var(--gsys-muted); }
/* Section header underline keeps its gold hairline in dark. */
[data-gsys-theme="dark"] .gsys-wrap .gsys-card h2 {
border-block-end-color: color-mix(in srgb, var(--gsys-gold) 45%, var(--gsys-border));
}
/* Muted helper text shouldn't go pure-dark. */
[data-gsys-theme="dark"] .gsys-wrap .description,
[data-gsys-theme="dark"] .gsys-wrap small,
[data-gsys-theme="dark"] .gsys-wrap .gsys-muted { color: var(--gsys-muted); }
/* WordPress notices on dark cards. */
[data-gsys-theme="dark"] .gsys-wrap .notice { background: var(--gsys-surface-2); color: var(--gsys-text); border-color: var(--gsys-border); }
[data-gsys-theme="dark"] .gsys-wrap .notice p { color: var(--gsys-text); }
/* Inputs/selects legibility (some panels missed). */
[data-gsys-theme="dark"] .gsys-wrap select,
[data-gsys-theme="dark"] .gsys-wrap input[type="number"],
[data-gsys-theme="dark"] .gsys-wrap input[type="email"],
[data-gsys-theme="dark"] .gsys-wrap input[type="url"],
[data-gsys-theme="dark"] .gsys-wrap input[type="date"],
[data-gsys-theme="dark"] .gsys-wrap textarea {
background: var(--gsys-bg); color: var(--gsys-text); border-color: var(--gsys-border);
}
[data-gsys-theme="dark"] .gsys-wrap ::placeholder { color: color-mix(in srgb, var(--gsys-muted) 80%, transparent); }
/* v3.16.23 — Dark dropdowns across all admin panels */
[data-gsys-theme="dark"] select,
[data-gsys-theme="dark"] .gsys-wrap select {
color-scheme: dark;
background: var(--gsys-surface, #171f2b);
color: var(--gsys-text, #e6e9ef);
border-color: var(--gsys-border, #2a3140);
}
[data-gsys-theme="dark"] select option,
[data-gsys-theme="dark"] select optgroup,
[data-gsys-theme="dark"] .gsys-wrap select option,
[data-gsys-theme="dark"] .gsys-wrap select optgroup {
background: var(--gsys-surface, #171f2b);
color: var(--gsys-text, #e6e9ef);
}
[data-gsys-theme="dark"] select option:checked,
[data-gsys-theme="dark"] .gsys-wrap select option:checked {
background: color-mix(in srgb, var(--gsys-gold, #d4af37) 28%, var(--gsys-surface, #171f2b));
color: #fff;
}
/* Portal + shop selects too. */
[data-gsys-theme="dark"] .gsysp select option,
[data-gsys-theme="dark"] #gsys-shop select option { background: var(--gsys-surface, #171f2b); color: var(--gsys-text, #e6e9ef); }
/* ═══ v3.16.27 — Page headings: guaranteed contrast in dark mode ═══ */
/* Some admin pages render / where WordPress's own heading colour or a
stale token wins, leaving the title dark-on-dark (e.g. Categories page).
Force our light heading ink with high specificity so it always reads. */
html[data-gsys-theme="dark"] #wpbody-content .gsys-wrap h1,
html[data-gsys-theme="dark"] #wpbody-content .gsys-wrap h2,
html[data-gsys-theme="dark"] #wpbody-content .gsys-wrap h3,
html[data-gsys-theme="dark"] .gsys-wrap h1,
html[data-gsys-theme="dark"] .gsys-wrap h2,
html[data-gsys-theme="dark"] .gsys-wrap h3 {
color: #f1ede4 !important;
}
html[data-gsys-theme="dark"] .gsys-wrap h1::before,
html[data-gsys-theme="dark"] .gsys-wrap .gsys-card h2::before {
color: var(--gsys-gold, #d4af37) !important;
}
/* Light mode: keep the WP page title crisp too (dark ink on light). */
html:not([data-gsys-theme="dark"]) #wpbody-content .gsys-wrap h1,
html:not([data-gsys-theme="dark"]) .gsys-wrap h1,
html:not([data-gsys-theme="dark"]) .gsys-wrap h2 { color: #1c1917; }
/* v3.17.23 — Invoice list contrast, robust in BOTH themes */
/* Heading: force strong contrast against whatever the page background is. */
.gsys-wrap .wp-heading-inline,
html[data-gsys-theme] #wpbody-content .gsys-wrap .wp-heading-inline { color: #b8860b !important; font-weight: 700; }
/* Filter date labels stack above the input. */
.gsys-flt { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11px; vertical-align: top; margin-inline-end: 6px; }
.gsys-flt > span { opacity: .85; letter-spacing: .02em; font-weight: 600; }
/* All filter inputs on this page: explicit visible surface + border + text, theme-matched. */
.gsys-wrap .gsys-flt input[type="date"],
.gsys-wrap form input[type="date"],
.gsys-wrap form input[type="search"],
.gsys-wrap form select {
background: var(--gsys-surface, #fff);
color: var(--gsys-text, #1f2937);
border: 1px solid var(--gsys-border, #b8860b);
border-radius: 8px;
min-height: 38px;
padding: 4px 10px;
color-scheme: light;
}
[data-gsys-theme="dark"] .gsys-wrap .gsys-flt input[type="date"],
[data-gsys-theme="dark"] .gsys-wrap form input[type="date"],
[data-gsys-theme="dark"] .gsys-wrap form input[type="search"],
[data-gsys-theme="dark"] .gsys-wrap form select {
background: #1d2735;
color: #e6e9ef;
border: 1px solid #3a4761;
color-scheme: dark;
}
/* Make the native date text/icon visible in dark. */
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
/* Result count pill. */
.gsys-count { display: inline-block; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--gsys-gold, #b8860b) 22%, transparent);
color: var(--gsys-text, #1f2937); font-size: 12px; font-weight: 700; }
[data-gsys-theme="dark"] .gsys-count { color: #f1ede4; }
/* v3.17.24 — Filter date inputs: always show readable date text (no more black voids) */
.gsys-wrap .gsys-filters input[type="date"] {
color: #e6e9ef;
background: #1d2735;
border: 1px solid #3a4761;
color-scheme: dark;
}
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit,
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit-text,
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit-month-field,
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit-day-field,
.gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit-year-field {
color: #e6e9ef;
}
.gsys-wrap .gsys-filters input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) opacity(.85);
}
/* Light theme: keep them light with dark text instead. */
html:not([data-gsys-theme="dark"]) .gsys-wrap .gsys-filters input[type="date"] {
color: #1f2937;
background: #ffffff;
border: 1px solid #c9ccd1;
color-scheme: light;
}
html:not([data-gsys-theme="dark"]) .gsys-wrap .gsys-filters input[type="date"]::-webkit-datetime-edit { color: #6b7280; }
html:not([data-gsys-theme="dark"]) .gsys-wrap .gsys-filters input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
/* ============================================================
v3.17.27 — GLOBAL CONTRAST SAFETY LAYER (all gsys- pages)
Forces readable text/inputs regardless of per-page markup.
============================================================ */
/* Headings — always readable gold, in every theme, class or not. */
.gsys-wrap h1,
html[data-gsys-theme] #wpbody-content .gsys-wrap h1 { color: #b8860b !important; font-weight: 700; }
.gsys-wrap h2 { color: var(--gsys-text, #1f2937); }
[data-gsys-theme="dark"] .gsys-wrap h2,
[data-gsys-theme="dark"] .gsys-wrap h3,
[data-gsys-theme="dark"] .gsys-wrap label,
[data-gsys-theme="dark"] .gsys-wrap strong,
[data-gsys-theme="dark"] .gsys-wrap p,
[data-gsys-theme="dark"] .gsys-wrap td,
[data-gsys-theme="dark"] .gsys-wrap th { color: var(--gsys-text, #e6e9ef); }
/* Rate chip — neutral, readable in both themes (replaces mis-used status badge). */
.gsys-rate-chip {
display: inline-block; padding: 3px 10px; margin: 2px; border-radius: 999px;
background: color-mix(in srgb, var(--gsys-gold, #b8860b) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--gsys-gold, #b8860b) 45%, transparent);
color: var(--gsys-text, #1f2937); font-size: 12px; font-weight: 600; white-space: nowrap;
}
[data-gsys-theme="dark"] .gsys-rate-chip { color: #f1ede4; }
/* Every input/select/textarea on a gsys page: explicit, theme-matched, never invisible. */
.gsys-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gsys-wrap select,
.gsys-wrap textarea {
background: var(--gsys-surface, #fff);
color: var(--gsys-text, #1f2937);
border: 1px solid var(--gsys-border, #c9ccd1);
border-radius: 8px;
}
[data-gsys-theme="dark"] .gsys-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-gsys-theme="dark"] .gsys-wrap select,
[data-gsys-theme="dark"] .gsys-wrap textarea {
background: #1d2735;
color: #e6e9ef;
border-color: #3a4761;
color-scheme: dark;
}
[data-gsys-theme="dark"] .gsys-wrap input::placeholder,
[data-gsys-theme="dark"] .gsys-wrap textarea::placeholder { color: #9aa4b5; }
/* Native date digits + calendar icon visible in dark. */
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit,
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit-text,
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit-month-field,
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit-day-field,
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-datetime-edit-year-field { color: #e6e9ef; }
[data-gsys-theme="dark"] .gsys-wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.85); }
|