/* * Innovating Chaos — site-wide dark mode * * WHY THIS IS A SEPARATE FILE * --------------------------- * `ic-pathways.css` is the design of five specific pages and must not load * anywhere else. Dark mode is a property of the whole site. Mixing them would * mean either restyling every page's cards or leaving most of the site light — * the two outcomes this is meant to avoid. * * Everything is scoped to `body.ic-dark-ok`, which `IC_Dark_Mode` adds only * when the feature is enabled. The filter is a real switch, not a hint: * * add_filter( 'ic_dark_mode_enabled', '__return_false' ); * * THE RULE THIS FOLLOWS * --------------------- * Invert surfaces and the text on them together, or not at all. A half-inverted * page — dark cards on cream, or dark sections with white form panels still * sitting on them — is worse than no dark mode. Where a page cannot be fully * inverted it is excluded in PHP rather than partially styled here. * * Contrast: headings 15.0:1, body copy 8.0:1, muted text 5.2:1, all measured * against the surfaces below. */ body.ic-dark-ok { --icd-paper: #141C21; /* base surface */ --icd-paper-2: #1B2529; /* alternating band */ --icd-raised: #202B31; /* cards and panels that were white */ --icd-ink: #F2EFEA; /* headings */ --icd-body: #A9B2B7; /* body copy — 8.0:1 on paper */ --icd-muted: #8A9498; /* captions, meta — 5.2:1 on paper */ --icd-line: #33404A; --icd-accent: #FF8A3D; /* the kit accent lifted; #FF6600 is 4.48:1 here */ } @media (prefers-color-scheme: dark) { /* ---- Surfaces ----------------------------------------------------------- Elementor writes section backgrounds per element with (0,4,0) specificity, so these need !important to reach. Two alternating charcoals keep the band rhythm the cream and lavender provide in light mode; without it the page reads as one unbroken slab. */ body.ic-dark-ok, body.ic-dark-ok .mil-content, body.ic-dark-ok #mil-content, body.ic-dark-ok .mil-wrapper { background-color: var(--icd-paper) !important; } body.ic-dark-ok .elementor-top-section { background-color: var(--icd-paper) !important; } body.ic-dark-ok .elementor-top-section:nth-of-type(even) { background-color: var(--icd-paper-2) !important; } /* A section carrying a background image keeps it — an image paints over the colour — so those sections are untouched by the rules above in practice. */ /* ---- Type --------------------------------------------------------------- NARROW ON PURPOSE. The first version of this recoloured every `p`, `li` and `a` on the page. That reached into the header navigation, whose Pathways dropdown sits on solid brand orange — so the menu items became light grey on orange at 1.11:1, on every page of the site. Exactly the half-inverted result this file exists to prevent, introduced by the file itself. The header, the navigation and the footer are theme chrome. They are already charcoal in both schemes and were designed that way. Nothing here touches them. Only the content classes Lettery uses inside page sections are inverted, because only those sit on a surface this file changed. */ body.ic-dark-ok .mil-title-el, body.ic-dark-ok .elementor-widget-heading .elementor-heading-title, body.ic-dark-ok .elementor-top-section .mil-h2, body.ic-dark-ok .elementor-top-section .mil-h3, body.ic-dark-ok .elementor-top-section .mil-h4 { color: var(--icd-ink) !important; } body.ic-dark-ok .mil-text, body.ic-dark-ok .mil-text p, body.ic-dark-ok .elementor-widget-text-editor, body.ic-dark-ok .elementor-widget-text-editor p, body.ic-dark-ok .elementor-widget-text-editor li { color: var(--icd-body) !important; } /* `mil-softened-*` is also used in the footer, where it is already correct against charcoal, so it is only inverted inside a content section. */ body.ic-dark-ok .elementor-top-section .mil-text-lg.mil-softened-40, body.ic-dark-ok .elementor-top-section .mil-text.mil-softened-40 { color: var(--icd-muted) !important; } /* ---- Surfaces that were explicitly white -------------------------------- Lettery paints these white in markup rather than leaving them transparent, so they would stay white islands on a dark page. */ body.ic-dark-ok .mil-card-1 .mil-overlay.mil-with-bg, body.ic-dark-ok .mil-card-1 .mil-overlay.mil-with-bg.mil-with-bg-alt, body.ic-dark-ok .mil-post-card, body.ic-dark-ok .mil-blog-card, body.ic-dark-ok .mil-team-card, body.ic-dark-ok .mil-pricing-card, body.ic-dark-ok .mil-accordion-item, body.ic-dark-ok .mil-input-frame, body.ic-dark-ok .elementor-widget-lettery-contact-form form { background-color: var(--icd-raised) !important; border-color: var(--icd-line) !important; } /* ---- Form controls ------------------------------------------------------ A white field with dark text on a dark page is the single most obvious half-inversion, and the one people notice first. */ body.ic-dark-ok input[type="text"], body.ic-dark-ok input[type="email"], body.ic-dark-ok input[type="tel"], body.ic-dark-ok input[type="url"], body.ic-dark-ok input[type="number"], body.ic-dark-ok input[type="search"], body.ic-dark-ok select, body.ic-dark-ok textarea { background-color: var(--icd-raised) !important; border-color: var(--icd-line) !important; color: var(--icd-ink) !important; } body.ic-dark-ok ::placeholder { color: var(--icd-muted) !important; } /* ---- Rules and dividers ------------------------------------------------- */ body.ic-dark-ok hr, body.ic-dark-ok .mil-divider, body.ic-dark-ok .elementor-divider-separator { border-color: var(--icd-line) !important; background-color: var(--icd-line) !important; } /* ---- Accent: deliberately not touched ----------------------------------- There was a rule here lifting the kit accent from #FF6600 to #FF8A3D, because #FF6600 measures 4.48:1 on this charcoal against a 4.5:1 threshold. It is gone, and the reason is worth recording. Twice it reached the header. First unscoped, recolouring every menu item. Then "scoped" to `.elementor-top-section` — which does not exclude the header at all, because the header is an Elementor Theme Builder template and contains its own top sections. The Pathways dropdown sits on solid brand orange, so both versions produced light-orange-on-orange at 1.21:1 across five menu items on every page of the site. The whole thing bought 0.02 of contrast. Two visible regressions is a bad price for a rounding error, so the theme's own accent is left alone. If it is ever revisited, the containers to exclude are `.mil-top-panel` and `.mil-footer-1`, not `.elementor-top-section`. */ /* ---- Artwork ------------------------------------------------------------ The brand illustrations are drawn on cream paper and cannot invert. Take the glare off so they do not sit on the page like a lightbox. */ body.ic-dark-ok .mil-just-image img, body.ic-dark-ok .mil-image-frame img { filter: brightness(.88) saturate(.95); } /* ---- Left alone --------------------------------------------------------- The header and footer are charcoal in both schemes and are already correct. Restating them here would only risk breaking what works. */ }