fix: brand contrast — chick-only header mark, ink callouts, nav polish

Phase 1 brand palette reused --c-sky for both the header background and
the word "Babies" inside the logo art, erasing it visually. Same class
of problem hit the contact page mailto callout.

- Split logo into chick mark + HTML site title so the wordmark colors
  no longer need to coexist with the header surface. Generator gains
  build_logo_mark_{png,webp} with a widest-gap column scan to crop.
- Header moves to --c-wheat; nav active state flips to ink pill with
  cream text; muted Shop link reads as coming-soon (italic + dim +
  not-allowed).
- Contact page mailto callout reskinned to ink/cream (strong CTA) and
  form note shifts from pale sky-deep to ink at 70% opacity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-21 20:07:30 -05:00
parent cd87db8e07
commit f5098c05f5
5 changed files with 155 additions and 16 deletions

View File

@@ -34,14 +34,17 @@
<header class="site-header">
<div class="wrap site-header__wrap">
<a class="site-header__brand" href="/" aria-label="Chicken Babies R Us home">
{# WebP with PNG fallback — generated by scripts/generate_static_assets.py. #}
{# Chick-only mark paired with the site title as styled text.
Decoupling the mark from the wordmark lets the header colors
change freely without the multi-colored logo text clashing. #}
<picture>
<source srcset="{{ url_for('static', path='img/logo.webp') }}" type="image/webp">
<img src="{{ url_for('static', path='img/logo.png') }}"
alt="Chicken Babies R Us"
height="48"
class="site-header__logo">
<source srcset="{{ url_for('static', path='img/logo-mark.webp') }}" type="image/webp">
<img src="{{ url_for('static', path='img/logo-mark.png') }}"
alt=""
height="56"
class="site-header__mark">
</picture>
<span class="site-header__title">Chicken Babies R Us</span>
</a>
{# The mobile toggle button — script below attaches a click handler