/** * qa21-en-blog-topic-subtitle.css * Pages: the EN blog TOPIC / TAG archives, e.g. /en/jtl-blog/topics/ai/ * QA batch #21, item 3.3 — "the toplines in the topic pages have the old color". * * WHY THE EXISTING RULE DOESN'T WORK (this is not a missing declaration) * archive-blog.css already says the right thing: * .blog-archive-redesign__header .subtitle { color: var(--bar-tech-blue) } * but app.css paints the glyphs with a gradient instead of `color`: * .page-template-blog .subtitle, * .post-type-archive-blog .subtitle, * .tax-blog_category .subtitle, * .page-template-archive-blog .subtitle { * background: linear-gradient(64deg,#FF9A26,#FFC935); * background-clip: text; -webkit-background-clip: text; * -webkit-text-fill-color: transparent; * } * `-webkit-text-fill-color` wins over `color` when painting glyphs, so `color` * is inert and the eyebrow renders amber. The fix must UNDO the gradient, not * restate the colour. Same mechanism as qa14 and qa16. * * WHY THOSE TWO SHEETS DIDN'T ALREADY COVER THIS * qa14 scopes `body.page-id-263102`; qa16 scopes `page-id-263102`, * `page-id-77559` and `body.single-blog`. A topic archive carries NONE of * those — measured on prod, /en/jtl-blog/topics/ai/ has * * * no page-id at all. So it kept the amber gradient. * * SCOPE — why `html[lang="en"]` and not a page-id * There is no page-id to scope to (it is a post-type archive, not a page), and * per .claude/rules/css-override.md §3 a DE page-id would match the EN twin * anyway. The `.post-type-archive-blog` selector in app.css is * language-agnostic, so the language gate is what keeps this off the German * side. Only the EN topic pages were reported; DE archives are deliberately * left as they are. * * WHERE THE BLOG EYEBROW IS FIXED TODAY (measured, dev tunnel) * qa14 body.page-id-263102 -> EN blog landing * qa16 page-id-263102 + 77559 + single-blog -> both blog landings + posts * qa15 body.tax-blog_category -> category archives, BOTH langs * qa21 html[lang=en] .post-type-archive-blog -> EN topic/tag archives (this file) * * That leaves exactly one uncovered case: the DE topic/tag archives * (/de/jtl-blog/themen/ki/, lang=de-DE, post-type-archive-blog) still render the * amber gradient — confirmed `-webkit-text-fill-color: rgba(0,0,0,0)`. * * So German blog archives are now internally inconsistent: category archives are * tech-blue (qa15), topic archives are amber. That predates this PR for the * category side; this PR fixes only the EN topics, as reported. Dropping the lang * gate here would make DE topics blue and the inconsistency would disappear — but * that was not asked for, and recolouring German pages unbidden is exactly what * css-override.md §2/§3 warn against. Flagged rather than silently decided. * * Background check (css-override.md §2): this eyebrow only ever sits on the cream * #eeeee7 blog hero — never on a dark section — so tech-blue is safe here and * there is no light/dark twin of this class to wreck. */ html[lang="en"] .post-type-archive-blog .blog-archive-redesign__header .subtitle { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #2722f8 !important; color: #2722f8 !important; }