/* ============================================================ Zysk UI — SPA component layer Namespaced (.zk-*), self-contained tokens, NO global reset and NO body override — safe to link alongside Tailwind + styles.css. Fonts (Fraunces / IBM Plex) are already loaded by index.html. ============================================================ */ :root{ --zk-paper:#F5F1EA; --zk-paper-deep:#EBE5DA; --zk-card:#fff; --zk-ink:#1B3022; --zk-ink-soft:#2D4A38; --zk-ink-muted:#4A6B5E; --zk-accent:#C5A059; --zk-accent-hi:#D8BC85; --zk-accent-lo:#9E7F3E; /* Gold TEXT on cream (.zk-eyebrow.zk-gold) only — #C5A059 itself is 1.96:1 on --zk-paper-deep (#EBE5DA), below WCAG AA's 4.5:1 for normal text. --zk-accent is unchanged and still used as-is for buttons, borders, and gold text on dark backgrounds, none of which were flagged. #7A5C1E already exists as scripts.js's own "goldTxt" — the same darker gold already used for readable gold text on this exact cream background elsewhere in the app (PortalLoginView, etc.) — reused here rather than inventing a second value. 4.96:1 on --zk-paper-deep. */ --zk-accent-txt:#7A5C1E; /* Gold-text systemic fix (manual QA Stage 1): --zk-gold-text is the single variable every gold-TEXT rule should read from. Default (root) resolves to the dark gold, correct for the common case — gold text on a cream/light section. Any section with a dark (--zk-ink) background must carry .zk-sec-dark, which flips the variable to the light gold (--zk-accent, 5.73:1 on --zk-ink) for every descendant. This replaces per-callsite guessing between --zk-accent and --zk-accent-txt — the cause of the WEEKLY LEDGER / EVENT PARTNERS failures (dark gold hardcoded onto a dark section, 2.26:1) — with one class applied once, on the section itself. */ --zk-gold-text: var(--zk-accent-txt); --zk-positive:#2D6A4F; --zk-rule:#D9D2C5; --zk-display:'Fraunces','Playfair Display',Georgia,serif; --zk-body:'IBM Plex Sans',system-ui,sans-serif; --zk-mono:'IBM Plex Mono',ui-monospace,monospace; --zk-radius:8px; } /* ── gold topline (fixed 3px bar) ── */ .zk-topline{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--zk-accent-lo),var(--zk-accent),var(--zk-accent-hi),var(--zk-accent))} /* ── brand mark + wordmark ── */ .zk-mark{width:34px;height:34px;border-radius:var(--zk-radius);background:var(--zk-accent);color:var(--zk-ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--zk-display);font-weight:600;font-size:1.25rem;line-height:1} .zk-wm{font-family:var(--zk-display);font-weight:600;font-size:1.15rem;color:var(--zk-ink)} .zk-wm i{color:var(--zk-accent);font-style:normal} /* ── ring nodes: shared circular gold-ring marker — spine timeline nodes + audience feature anchors ── */ .zk-ring-node{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;background:var(--zk-paper);border:2px solid var(--zk-accent);font-family:var(--zk-mono);font-size:.75rem;width:40px;height:40px;line-height:1} .zk-ring-node-lg{width:76px;height:76px;font-family:var(--zk-display);font-size:2rem;font-weight:300;font-style:italic} /* ── audience Venn wash: soft overlapping circle tints behind the 3 audience columns. Painted as this wrapper's own background (never bleeds past its box — no overflow:hidden needed), so card content stacks on top automatically. Desktop (lg+) only: below the 3-col breakpoint the columns stack and the wash is dropped, leaving the plain cream panel. ── */ .zk-audience-venn{position:relative;background-color:var(--zk-paper)} @media(min-width:1024px){ .zk-audience-venn{ background-repeat:no-repeat; background-image: radial-gradient(circle 300px at 16.667% 50%, rgba(27,48,34,.12) 0%, rgba(27,48,34,.06) 55%, rgba(27,48,34,0) 100%), radial-gradient(circle 360px at 50% 50%, rgba(197,160,89,.18) 0%, rgba(197,160,89,.09) 55%, rgba(197,160,89,0) 100%), radial-gradient(circle 300px at 83.333% 50%, rgba(27,48,34,.12) 0%, rgba(27,48,34,.06) 55%, rgba(27,48,34,0) 100%); } } /* ── nav links (mono, uppercase) ── */ .zk-navlink{font-family:var(--zk-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zk-ink-muted);transition:color .2s;cursor:pointer} .zk-navlink:hover,.zk-navlink.zk-current{color:var(--zk-ink)} /* ── mobile nav menu (TopNav, below the md breakpoint) ── Hamburger toggle is a fixed 44×44px square (WCAG 2.5.5 minimum target size) regardless of icon metrics. The panel hangs off the header (its nearest positioned ancestor, via `sticky`), spanning the full width. zk-mobile-navlink rows use flex+min-height (not padding-derived height) for the same guaranteed-44px reason, and are real full-width