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

@@ -158,8 +158,8 @@ a:focus-visible {
/* Header / brand / nav ---------------------------------------------------- */
.site-header {
background-color: var(--c-sky);
border-bottom: 1px solid rgba(43, 58, 66, 0.1);
background-color: var(--c-wheat);
border-bottom: 1px solid rgba(43, 58, 66, 0.15);
}
.site-header__wrap {
@@ -174,12 +174,30 @@ a:focus-visible {
.site-header__brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--c-ink);
}
.site-header__logo {
height: 48px;
.site-header__mark {
height: 56px;
width: auto;
flex-shrink: 0;
}
.site-header__title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: 0.01em;
color: var(--c-ink);
}
@media (max-width: 30rem) {
.site-header__title {
font-size: 1.25rem;
}
}
/* Mobile nav toggle (shown < 48rem, hidden ≥ 48rem). */
@@ -233,22 +251,37 @@ a:focus-visible {
text-decoration: none;
color: var(--c-ink);
font-weight: 600;
transition: background-color 120ms ease, color 120ms ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
background-color: rgba(255, 255, 255, 0.35);
background-color: rgba(43, 58, 66, 0.08);
color: var(--c-ink);
}
.site-nav__link.is-active {
background-color: var(--c-cream);
color: var(--c-sky-deep);
background-color: var(--c-ink);
color: var(--c-cream);
}
.site-nav__link.is-active:hover,
.site-nav__link.is-active:focus-visible {
background-color: var(--c-ink);
color: var(--c-cream);
}
/* Muted link for not-yet-live destinations (Shop in Phase 1). */
.site-nav__link.nav--muted {
opacity: 0.65;
opacity: 0.55;
font-style: italic;
font-weight: 500;
}
.site-nav__link.nav--muted:hover,
.site-nav__link.nav--muted:focus-visible {
background-color: transparent;
cursor: not-allowed;
}
/* Main + footer ----------------------------------------------------------- */
@@ -387,16 +420,34 @@ a:focus-visible {
/* Contact form (inert in Phase 1). */
.contact-mailto {
background-color: var(--c-sky);
background-color: var(--c-ink);
color: var(--c-cream);
border-radius: var(--radius);
padding: var(--space-3);
}
.contact-mailto a {
color: var(--c-cream);
text-decoration-color: rgba(250, 243, 231, 0.5);
}
.contact-mailto a:hover,
.contact-mailto a:focus-visible {
color: #ffffff;
text-decoration-color: currentColor;
}
.contact-mailto--muted {
background-color: var(--c-wheat);
color: var(--c-ink);
font-style: italic;
}
.contact-mailto--muted a {
color: var(--c-ink);
text-decoration-color: currentColor;
}
.contact-form {
display: grid;
gap: var(--space-3);
@@ -407,7 +458,8 @@ a:focus-visible {
.contact-form__note {
margin-top: var(--space-3);
font-style: italic;
color: var(--c-sky-deep);
color: var(--c-ink);
opacity: 0.7;
}
.contact-form__field {

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB