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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user