/* =========================================================================== * WDK header variant — "JADE" · body class: .wdk-hdr-jade * --------------------------------------------------------------------------- * Loads AFTER assets/wdk-chrome.css. Every rule is scoped to * `body.wdk-hdr-jade`, so the sheet is completely inert until that class is on * . No DOM changes, no JS changes — pure restyle of wdk_header_html(). * * THE IDEA * The bar IS the brand: a full-strength jade slab (#3EB785, lifted with a * soft top sheen and settled with a deeper base) carrying INK type, an ink * cart pill and ink ghost tools. White is not a text colour here — it is a * SURFACE: it arrives as the logo plate, as the tab that grows under an open * menu, and as the mega panel that tab merges into. Orange stays the single * accent (cart badge, ticker chip, feature price, ALL button). * * THE TWO TRAPS, SOLVED * 1. White-on-jade is 2.52:1 — it fails everywhere, at every size. So this * variant puts NO white text and NO white-only icon directly on bright * jade. All bar type is ink #151917 (6.0:1 worst case). That inversion is * also what lets the bar carry a gradient + sheen safely: lightening jade * only RAISES ink contrast, where it would have sunk white type. * 2. Jade bar + jade ticker = one green slab. The ticker goes INK — the same * #151917 as the new footer and homepage hero — so the green is contained * to one 72px band, the orange "cheapest oz" chip finally has a dark * ground to shout from, and the page reads jade → ink → paper. * * LOGO * small-logo.png is a three-line BLACK wordmark on transparency, and its * middle word ("DELIVERY") is drawn as hollow outline letters — on jade the * counters fill with green and the lockup loses its designed negative space. * It gets a white plate: restores the intended white counters, reads as a * deliberate brand badge, repeats the white-surface language of the tab and * panel, and stays correct if the owner ever swaps in coloured art (a CSS * invert filter would not). * ======================================================================== */ body.wdk-hdr-jade{ --jd-bar:#3EB785; /* the brand jade — the bar's mid stop */ --jd-bar-hi:#45C08D; /* top of the bar gradient */ --jd-bar-lo:#34A97A; /* base of the bar gradient */ --jd-edge:rgba(9,58,40,.34); /* dark-jade under-edge of the bar */ --jd-ink:#151917; /* THE text/anchor colour (footer + hero ink) */ --jd-ink-deep:#0C110F; /* pressed / hovered ink */ --jd-deep:#1B7C55; /* the ONE jade that is safe under white text (5.17:1) */ --jd-wash:rgba(255,255,255,.30); /* nav hover wash on jade */ --jd-ghost:rgba(19,42,32,.72); /* tool outline on jade — 3.2:1+ */ --jd-line:#d3ecdf; /* jade-tinted hairline on white surfaces */ --jd-line-soft:#e2f1ea; --jd-tint:#eef8f3; /* icon-tile ground */ --jd-tint-hi:#e6f6ee; /* row hover wash */ --jd-orange:#FF9800; --jd-orange-hi:#FFA61F; --jd-shadow:0 26px 50px -14px rgba(10,58,41,.36); } /* ============================================================ 1. THE BAR — jade slab, 72px, with a sheen and a dark base. The base edge is an INSET shadow, not a border: inset shadow paints above the background but BELOW child boxes, so the white tab of an open menu punches a clean notch through it and joins the panel with no line in between. Dropping the border also makes .wdk-mega's `top:100%` land exactly on the bar's bottom edge (percentages resolve on the padding box). ============================================================ */ body.wdk-hdr-jade .wdk-hdr{background:var(--jd-bar)} body.wdk-hdr-jade .wdk-hb{ background: radial-gradient(120% 200% at 10% -60%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%), linear-gradient(180deg, var(--jd-bar-hi) 0%, var(--jd-bar) 54%, var(--jd-bar-lo) 100%); border-bottom:0; box-shadow:inset 0 -3px 0 var(--jd-edge); } body.wdk-hdr-jade .wdk-hb-in{min-height:72px;gap:20px;padding:0 40px} /* --- logo: white plate (see header comment for the reasoning) --- */ /* No white plate behind the logo (owner, 2026-08-17): the mark sits straight on the jade. A soft shadow does the separating instead of a card. */ body.wdk-hdr-jade .wdk-logo{ align-items:center;background:none;border-radius:0;padding:0;box-shadow:none; } body.wdk-hdr-jade .wdk-logo img{filter:drop-shadow(0 1px 1px rgba(6,38,26,.28))} /* 56px in a 72px bar (owner, 2026-08-18 — "make the logo bigger"; it was 40px). small-logo.png is 525×320, so 56px tall is still under half its native height and stays sharp on a 2× screen. Every step below scales with it. */ body.wdk-hdr-jade .wdk-logo img{height:56px} body.wdk-hdr-jade .wdk-logo:focus-visible{outline:3px solid var(--jd-ink);outline-offset:4px;border-radius:6px} /* ============================================================ 2. NAV — ink Archivo Black on jade. The is stretched to the full bar height so its background can act as a TAB: hover is a translucent wash + white underline; open is a solid white tab whose bottom edge is the mega panel's top edge. ============================================================ */ /* align-self:stretch + a stretch chain down to the is what lets the link's own background become a full-bar-height tab. .wdk-nav becomes a flex parent to pass that height on, so the