/* MAD Monkey Media - Gang Sheet Builder theme layer. * * LIGHT FIRST. Dark is never the default: it is opt-in via data-theme="dark", * and prefers-color-scheme is deliberately NOT consulted for the default. * Standing brand rule. * * Load AFTER mmm-gang-sheet.css. The bundled stylesheet paints a fixed dark * navy palette from custom properties on :root, so light is applied here as * the plain, unqualified default and dark is restored only under * [data-theme="dark"]. * * The dark hook is a plain attribute selector, not :root[...], so it works * both on (the standalone page) and on a wrapper
(the WordPress * page, where we do not control the html element). * * ASCII only. No em-dashes. */ /* ---------------------------------------------------------------- tokens */ :root { --mmm-navy: #eaeff6; /* header band */ --mmm-navy-deep: #ffffff; /* widget surface */ --mmm-navy-light: #f3f6fb; /* controls */ --mmm-gold: #12233f; /* the "accent" role reads as navy on light */ --mmm-gold-dim: #33507d; --mmm-orange: #d2691e; --mmm-orange-hot: #b8541a; --mmm-ink: #16233a; --mmm-ink-dim: #55647e; --mmm-danger: #c62348; --mmm-ok: #12805c; --mmm-shadow: 0 2px 14px rgba(16, 35, 64, 0.12); --mmm-line: #d7dfeb; } [data-theme='dark'] { --mmm-navy: #1a1a2e; --mmm-navy-deep: #11111d; --mmm-navy-light: #252544; --mmm-gold: #ffd700; --mmm-gold-dim: #c9a800; --mmm-orange: #ff8c00; --mmm-orange-hot: #ff7000; --mmm-ink: #f5f5fa; --mmm-ink-dim: #a8a8c2; --mmm-danger: #ff3b6c; --mmm-ok: #3ddc97; --mmm-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --mmm-line: rgba(255, 215, 0, 0.18); } /* ------------------------------------- light components (plain defaults) */ [data-mmm-gang-sheet] { border: 1px solid var(--mmm-line); } .mmm-header { background: linear-gradient(90deg, #f3f6fb 0%, #e6ecf5 100%); border-bottom: 1px solid var(--mmm-line); } .mmm-brand { color: #12233f; } .mmm-brand-mark { background: #12233f; color: #ffd700; } .mmm-btn { background: #ffffff; color: #16233a; border: 1px solid var(--mmm-line); } .mmm-btn:hover { border-color: #12233f; background: #f3f6fb; } .mmm-btn-primary { background: #12233f; color: #ffd700; border-color: #12233f; } .mmm-btn-primary:hover { background: #1c3459; color: #ffd700; } .mmm-btn-ghost { background: transparent; color: #33507d; } .mmm-btn-danger { background: #ffffff; color: #c62348; border-color: #f0c6d0; } .mmm-sidebar, .mmm-footer { background: #fbfcfe; border-color: var(--mmm-line); } .mmm-canvas-wrap { background: #eef2f7; } .mmm-select, .mmm-input { background: #ffffff; color: #16233a; border: 1px solid var(--mmm-line); } .mmm-price-tag { color: #12233f; } .mmm-section-label { color: #33507d; } .mmm-layer-item { background: #ffffff; border: 1px solid var(--mmm-line); } .mmm-fill-bar { background: #dde4ee; } .mmm-toast { background: #12233f; color: #ffffff; } /* ----------------------------------------------- dark opt-in (restore) */ [data-theme='dark'] .mmm-header { background: linear-gradient(90deg, #1a1a2e 0%, #252544 100%); border-bottom: 1px solid rgba(255, 215, 0, 0.18); } [data-theme='dark'] .mmm-brand { color: #ffd700; } [data-theme='dark'] .mmm-brand-mark { background: #ffd700; color: #1a1a2e; } [data-theme='dark'] .mmm-btn { background: #252544; color: #f5f5fa; border: 1px solid transparent; } [data-theme='dark'] .mmm-btn:hover { border-color: #ff8c00; background: #2d2d55; } [data-theme='dark'] .mmm-btn-primary { background: #ffd700; color: #1a1a2e; border-color: #ffd700; } [data-theme='dark'] .mmm-btn-primary:hover { background: #ffe34d; color: #1a1a2e; } [data-theme='dark'] .mmm-btn-ghost { background: transparent; color: #a8a8c2; } [data-theme='dark'] .mmm-btn-danger { background: #2a1520; color: #ff3b6c; border-color: #4a1f30; } [data-theme='dark'] .mmm-sidebar, [data-theme='dark'] .mmm-footer { background: #14141f; border-color: rgba(255, 215, 0, 0.18); } [data-theme='dark'] .mmm-canvas-wrap { background: #0c0c14; } [data-theme='dark'] .mmm-select, [data-theme='dark'] .mmm-input { background: #252544; color: #f5f5fa; border: 1px solid #33335c; } [data-theme='dark'] .mmm-price-tag { color: #ffd700; } [data-theme='dark'] .mmm-section-label { color: #a8a8c2; } [data-theme='dark'] .mmm-layer-item { background: #1d1d33; border: 1px solid #2d2d4d; } [data-theme='dark'] .mmm-fill-bar { background: #252544; } [data-theme='dark'] .mmm-toast { background: #252544; color: #f5f5fa; } [data-theme='dark'] [data-mmm-gang-sheet] { border-color: #2a2a45; } /* -------------------------------------------------- order button (footer) */ .mmm-btn-order { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; } .mmm-footer { gap: 10px; flex-wrap: wrap; } @media (max-width: 720px) { [data-mmm-gang-sheet] { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: 'header' 'sidebar' 'canvas' 'footer'; height: auto; min-height: 0; } .mmm-header { flex-wrap: wrap; padding: 10px; } .mmm-footer { padding: 10px; } .mmm-canvas-wrap { min-height: 420px; } }