/* ZAD Tools — Brand Asset Kit application layer. Applies the assets in this directory to surfaces that already exist in the zad-tools-hallmark child theme, and owns the site's dark-surface text set. Loaded by wp-content/mu-plugins/brand-zadtools.php — delete that file to revert. All url() paths are relative to this file (assets/brand/). CASCADE NOTE (pattern B, see PILOT-REPORT.md) zad-journal-100/style.css wraps its lines 908+ in `@layer legacy`, while its lines 1-907 and every other theme sheet sit OUTSIDE any layer. Unlayered rules beat layered ones at ANY specificity, so the theme's own token-driven rules inside the layer are silently defeated by the hard-coded console block above them. That is the root cause of both blockers below. This file is deliberately UNLAYERED and enqueued last, which is the strongest position available without !important. Keep it that way: never wrap this file in @layer, or every fix here stops winning. !important appears below only where the losing declaration itself is !important; each of those is marked. */ /* ================================================================== 0. Dark-surface text set (pattern A) ------------------------------------------------------------------ The child theme maps every legacy token (--zad-*, --ops-*) onto the light-mode --color-* tokens at :root. Dark surfaces then inherit paper-mode ink/muted/accent-dark and go unreadable. These four aliases are the on-dark counterparts, all derived from tokens the theme already ships — no literal colours anywhere in this file. ================================================================== */ :root { --zad-on-dark-strong: var(--color-on-dark); /* #edf4ed */ --zad-on-dark-quiet: var(--color-on-dark-muted); /* #b1bab1 */ --zad-on-dark-accent: var(--color-accent); /* #49b653 */ --zad-on-accent-ink: var(--color-ink); /* #0b110c */ /* Pattern C — the child theme remapped most legacy tokens onto the green palette but left these four on editorial-index.css's blue (hue 255/264). They are the source of #113fbb (card index numbers, 22 occurrences) and #eef2f7 / #dce8ff. Finishing the remap here retires a whole parallel colour system at the token level. */ --zad-accent-dark: var(--color-accent-dark); --zad-accent-soft: var(--color-accent-soft); --zad-on-dark: var(--color-on-dark); --zad-cobalt-dark: var(--color-accent-dark); } /* --- A1. Tools archive topic nav — BLOCKER, was 1.00 ----------------- `a { color: inherit }` in editorial-index.css (unlayered, specificity 0,0,1) was beating `.zad-topic-index .zad-topic-root { color:#fff }` inside @layer legacy (0,2,0). Same selector, unlayered, last sheet. */ .zad-topic-index .zad-topic-root { color: var(--zad-on-dark-strong); } .zad-topic-index .zad-topic-root sup { color: var(--zad-on-dark-accent); } /* --- A2/A3/A4. Experience console — BLOCKER, copy button was 1.02 ---- */ .zad-live-mcp-single .zad-mcp-prompts button { color: var(--zad-on-dark-strong); } .zad-live-mcp-single > header > p:not(.zad-kicker), .zad-live-mcp-single .zad-experience-runbook-list p, .zad-live-mcp-single .zad-mcp-prompts p, .zad-live-mcp-single .zad-live-mcp-stats span, .zad-live-mcp-single .zad-live-mcp-chart figcaption, .zad-live-mcp-single .zad-live-mcp-viewbar button { color: var(--zad-on-dark-quiet); } .zad-live-mcp-single .zad-experience-runbook-list span { color: var(--zad-on-dark-accent); } /* --- A5. Footer signature — was 2.38 on every one of the 38 surfaces - */ .zth-footer .zth-label { color: var(--zad-on-dark-accent); } /* --- A6/A7. Tools archive hero --------------------------------------- Both losing declarations are !important in ops-lab.css, so these are. */ .zad-tools-hero .zad-tools-hero-copy > p { color: var(--zad-on-dark-quiet) !important; } .zad-tools-hero .zad-tools-counts dd { color: var(--zad-on-dark-accent) !important; } .zad-tools-hero .zad-tools-counts dt { color: var(--zad-on-dark-quiet); } /* --- A8. Newsletter consent link on the dark newsletter panel -------- */ .zad-newsletter__consent a, .zad-newsletter__consent span a { color: var(--zad-on-dark-accent); } /* --- A9. WooCommerce related/upsell heading on the dark strip -------- */ section.related.products > h2, section.upsells.products > h2 { color: var(--zad-on-dark-strong); } /* --- A10. WooCommerce product-grid button ---------------------------- */ .wc-block-grid__product-add-to-cart a.wp-block-button__link, .wc-block-grid__product-add-to-cart .wp-block-button__link { color: var(--zad-on-dark-strong); } /* --- A11. Closing band — ink on the brand green, was 3.09 ------------ The losing declaration is !important at (0,6,1), so this one is too. */ .zad-ops-closing .zad-ops-label { color: var(--zad-on-accent-ink) !important; } /* ================================================================== 1. Pattern C — retire the second (blue) colour system ================================================================== */ /* --- C1. The navy console surface -------------------------------------- parent-style.css lines 25-220 paint an entire navy console in literals (#0a121d / #07111d / #0d1825 / #111f2e) that belong to no palette. The theme's own layered rules already use --zad-cobalt (green); they just lose the cascade. Re-seat the surface on --color-ink. */ .zad-live-mcp-single { background-color: var(--color-ink); border-color: var(--color-ink); color: var(--zad-on-dark-strong); } .zad-live-mcp-single h2, .zad-live-mcp-single .zad-live-card-index, .zad-live-mcp-single .zad-live-card h3, .zad-live-mcp-single .zad-live-mcp-table th { color: var(--zad-on-dark-strong); } .zad-live-mcp-single .zad-kicker, .zad-live-mcp-single .zad-live-mcp-stats strong, .zad-live-mcp-single .zad-live-mcp-table td a, .zad-live-mcp-single .zad-live-card a, .zad-live-mcp-single .zad-data-number { color: var(--zad-on-dark-accent); } .zad-live-mcp-single .zad-live-mcp-table, .zad-live-mcp-single .zad-live-card, .zad-live-mcp-single .zad-data-status { color: var(--zad-on-dark-quiet); } .zad-live-mcp-single .zad-live-mcp-chart, .zad-live-mcp-single .zad-live-mcp-map, .zad-live-mcp-single .zad-live-mcp-viewbar, .zad-live-mcp-single .zad-live-card, .zad-live-mcp-single .zad-live-mcp-table tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--color-ink) 88%, var(--color-on-dark)); } .zad-live-mcp-single .zad-live-mcp-table-wrap, .zad-live-mcp-single .zad-live-mcp-table th { background: var(--color-ink); } .zad-live-mcp-single .zad-live-mcp-viewbar button:hover, .zad-live-mcp-single .zad-live-mcp-viewbar button.is-active { background: var(--zad-on-dark-strong); color: var(--color-ink); } /* --- C2. Data cells on the LIGHT gallery surfaces --------------------- The same unscoped rules paint #7ea2ff / #dbe7f7 onto the paper-white showcase tables: 2.34 and 1.18 respectively. */ .zad-data-number { color: var(--color-accent-dark); } .zad-live-card a { color: var(--color-accent-dark); border-bottom-color: var(--color-accent-dark); } .zad-data-status { color: var(--color-ink); border-color: var(--color-rule-dark); } .zad-empty-cell { color: var(--color-muted); } /* --- C3. Newsletter block (plugin sheet, hues 240-260) ---------------- */ .zad-newsletter__eyebrow, .zad-newsletter__tier-label, .zad-newsletter__tier li::before { color: var(--zad-on-dark-accent); } .zad-newsletter__tier > p:not(.zad-newsletter__tier-label, .zad-newsletter__status, .zad-newsletter__pending), .zad-newsletter__pending, .zad-newsletter__consent, .zad-newsletter__status, .zad-newsletter__copy > p, .zad-newsletter__copy > p:last-child, .zad-newsletter label small { color: var(--zad-on-dark-quiet); } .zad-newsletter__tier ul { color: var(--zad-on-dark-strong); } .zad-newsletter__fields input:focus { border-color: var(--zad-on-dark-accent); } .zad-newsletter__consent input { accent-color: var(--color-accent); } .zad-newsletter [data-state="success"] .zad-newsletter__status { color: var(--zad-on-dark-accent); } /* --- C4. Remaining cool neutrals painted as text ---------------------- */ .zad-knowledge-index span { color: var(--zad-on-dark-accent); } /* The lab section and the WebGL feature bar still paint oklch(... 245), the last of the blue hue on the front page. */ .zad-ops-lab p, .zad-ops-lab .zad-ops-section-head > p:not(.zad-ops-label), .zad-ops-lab .zad-ops-lab-list article span, .zad-ops-lab .zad-ops-deck span, .zad-ops-feature .zad-ops-feature-bar span, .zad-live-lab-note span { color: var(--zad-on-dark-quiet); } /* --- C5. One green in the header -------------------------------------- The kit lime (--brand-accent #a6e22e) sat next to the theme green (#49b653) in the same strip. The site's live palette is the theme's, so the mark frame follows it. */ .zth-brand__mark { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } /* ================================================================== 2. Pattern D — empty states offer a next step ------------------------------------------------------------------ Styling only; the markup is added by archive.php / 404.php in the child theme and by the mu-plugin for WooCommerce + blank search. ================================================================== */ /* A dead end is an operational state, so it gets an operational panel: the site's dark surface, the generated "no signal" plate, and the two routes out. Uses the dark-surface text set from section 0. */ .zth-empty { position: relative; display: grid; justify-items: start; align-content: center; gap: var(--space-md, 1rem); min-height: 22rem; border: var(--rule-hair, 1px) solid var(--color-rule-dark); padding: var(--space-2xl, 4rem) var(--space-xl, 2.5rem); background: url("empty-state.png") no-repeat left center / auto 68%, var(--color-ink); color: var(--zad-on-dark-strong); } .zth-empty p { margin: 0; max-width: 46ch; color: var(--zad-on-dark-quiet); } .zth-empty .zth-label { color: var(--zad-on-dark-accent); } /* Below the plate's width the art would sit under the copy — drop it. */ @media (max-width: 860px) { .zth-empty { background-image: none; padding-block: var(--space-xl, 2.5rem); min-height: 0; } } .zth-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm, .75rem); margin-block-start: var(--space-xs, .5rem); } .zth-empty__actions .zth-button { margin: 0; } /* Inside the dark plate the primary flips to the brand green on ink. */ .zth-empty .zth-button { border: var(--rule-heavy, 3px) solid var(--color-accent); background: var(--color-accent); color: var(--color-ink); } /* Secondary action reads as an outline next to the solid primary. */ .zth-button--ghost { border: var(--rule-heavy, 3px) solid var(--color-ink); background: transparent; color: var(--color-ink); } .zth-button--ghost:hover, .zth-button--ghost:focus-visible { background: var(--color-ink); color: var(--color-on-dark); } .zth-empty .zth-button--ghost { border-color: var(--zad-on-dark-strong); background: transparent; color: var(--zad-on-dark-strong); } .zth-empty .zth-button--ghost:hover, .zth-empty .zth-button--ghost:focus-visible { background: var(--zad-on-dark-strong); color: var(--color-ink); } /* 404 gets the same treatment inside its own shell. */ .zth-not-found .zth-empty__actions { margin-block-start: var(--space-lg, 1.5rem); } .zth-empty__search { display: flex; flex-wrap: wrap; gap: var(--space-xs, .5rem); } .zth-empty__search input { min-width: min(100%, 18rem); min-height: 2.75rem; border: var(--rule-hair, 1px) solid var(--color-rule-dark); padding-inline: var(--space-sm, .75rem); background: var(--color-paper-2); color: var(--color-ink); font: inherit; } .zth-empty__search button { min-height: 2.75rem; border: var(--rule-hair, 1px) solid var(--color-accent-dark); padding-inline: var(--space-md, 1rem); background: var(--color-accent-dark); color: var(--color-on-dark); font: inherit; font-weight: 700; cursor: pointer; } /* WooCommerce's own empty-category notice, given the same actions row. */ .woocommerce-info + .zth-empty__actions, .woocommerce-no-products-found .zth-empty__actions { margin-block-start: var(--space-md, 1rem); } /* ================================================================== 3. Header — brand mark + command-center grid ================================================================== */ .zth-header { isolation: isolate; } .zth-header::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("pattern.svg") 0 0 / 220px 220px repeat; mix-blend-mode: screen; opacity: .34; pointer-events: none; } .zth-header > .zth-shell { position: relative; z-index: 1; } /* Width stays at the theme's 2rem so the header row claims no extra horizontal space on narrow viewports. */ .zth-brand__mark { width: 2rem; height: 2rem; display: block; gap: 0; transform: none; border-width: var(--rule-hair, 1px); border-style: solid; background: url("logo-mark.svg") center / contain no-repeat; } .zth-brand__mark i { display: none; } /* ================================================================== 4. Footer — lockup signature + grid ================================================================== */ .zth-footer { position: relative; isolation: isolate; } .zth-footer::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("pattern.svg") 0 0 / 260px 260px repeat; mix-blend-mode: screen; opacity: .22; pointer-events: none; } .zth-footer > .zth-shell { position: relative; z-index: 1; } .zth-footer__grid > div:first-child::before { content: ""; display: block; /* logo-lockup.svg is a 720x180 canvas whose artwork sits in the left ~430px. Framed to that region so the plate hugs the lockup instead of half a void. */ width: min(100%, 15rem); aspect-ratio: 430 / 180; margin-block-end: var(--space-lg, 1.5rem); border: var(--rule-hair, 1px) solid color-mix(in srgb, var(--brand-muted, #7B8A76) 35%, transparent); background: url("logo-lockup.svg") left center / 167% auto no-repeat; } /* ================================================================== 5. Homepage command-center surfaces ================================================================== */ /* Feature panel: branded surface behind the WebGL canvas, and the fallback when WebGL or the Three.js CDN is unavailable. Tiled — the panel is narrow and tall, so a cover-scaled hero would crop its wordmark. */ .zad-ops-feature { background-color: var(--brand-bg, #0A0E0A); background-image: url("pattern.svg"); background-position: center; background-size: 420px 420px; background-repeat: repeat; background-blend-mode: screen; } /* Lab section: the dark operations surface on the front page. */ .zad-ops-lab { position: relative; isolation: isolate; overflow: hidden; } .zad-ops-lab::before { content: ""; position: absolute; inset: 0; z-index: 0; /* hero-background.svg carries its own "ZAD Tools" wordmark in the top-left eighth. The section already has a headline, so the art is scaled up and framed below that band: what carries through is the green/amber glow and the pulse curves, under a scrim that keeps the copy at full contrast. */ background-color: var(--brand-bg, #0A0E0A); background-image: linear-gradient(to bottom, rgba(10, 14, 10, .88), rgba(10, 14, 10, .95)), url("hero-background.svg"); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, 200% auto; background-position: center, 50% 62%; pointer-events: none; } .zad-ops-lab-inner { position: relative; z-index: 1; } /* ================================================================== 6. Generated covers — the card that fronts a post with no thumbnail ================================================================== */ .zth-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--color-ink); } /* ================================================================== 7. Print — brand surfaces are decoration only ================================================================== */ @media print { .zth-header::after, .zth-footer::after, .zad-ops-lab::before, .zth-footer__grid > div:first-child::before { display: none !important; } .zad-ops-feature { background-image: none !important; } /* The empty-state plate is a screen surface: on paper it would print as a solid black block. Flip it to ink-on-white and drop the artwork. */ .zth-empty { background: none !important; border-color: var(--color-ink) !important; color: var(--color-ink) !important; min-height: 0 !important; padding: var(--space-lg, 1.5rem) !important; } .zth-empty p, .zth-empty .zth-label { color: var(--color-ink) !important; } .zth-empty__actions, .zth-empty__search { display: none !important; } }