/* M45Works dark mode — rules that depend on design-system variables. Loaded in the DC helmet, i.e. AFTER the token stylesheets. The dark palette itself lives in theme-boot.css, which is linked from the static so it applies on the first paint (no white flash). */ /* Logo: set the height, let the width follow — and swap the FILE for dark mode (never filter it; invert ruins the grey "Works Inc." and blows out the ink). */ .m45-logo { width: auto; display: block; } .m45-logo--dark { display: none; } :root[data-theme="dark"] .m45-logo--light { display: none; } :root[data-theme="dark"] .m45-logo--dark { display: block; } /* Under 640px the horizontal lockup would fall below its 120px minimum, so the kit's answer is a different file: the reduced mark at 26px. */ .m45-logo--narrow { display: none; } :root[data-theme="dark"] .m45-logo--narrow.m45-logo--dark { display: none; } @media (max-width: 640px) { .m45-logo--wide { display: none; } :root[data-theme="dark"] .m45-logo--wide.m45-logo--dark { display: none; } .m45-logo--narrow.m45-logo--light { display: block; } :root[data-theme="dark"] .m45-logo--narrow.m45-logo--dark { display: block; } } /* Photos stay exactly as they are on dark. The only change: the hero's multiply blend (which relies on a light page) is switched off so the image reads normally. */ :root[data-theme="dark"] .m-hero { mix-blend-mode: normal !important; } /* Form controls carry literal light fills inline. */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--surface-sunken) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; } :root[data-theme="dark"] ::placeholder { color: #6f6f78; } :root[data-theme="dark"] option { background: var(--surface-sunken); color: var(--text-primary); } /* Solid-black primary actions would disappear into a dark page — lift them one step. */ :root[data-theme="dark"] :where(button, a, label)[style*="background: var(--m45-black)"] { background: #33333b !important; color: var(--m45-off-white) !important; } /* Secondary/ghost buttons pair a light surface with near-black ink. */ :root[data-theme="dark"] :where(button, a, label)[style*="color: var(--m45-black)"]:not([style*="var(--accent)"]):not([style*="var(--m45-mint)"]) { color: var(--m45-off-white) !important; } /* Mint-wash chips print near-black ink in light mode. */ :root[data-theme="dark"] [style*="var(--m45-mint-dim)"] { color: var(--text-primary) !important; }