From da09cfbd1a4dcab6aace6fe2df8859334508110d Mon Sep 17 00:00:00 2001 From: Nora Date: Mon, 6 Jul 2026 14:23:22 -0600 Subject: [PATCH] feat(tuxedo): editorial photo color grade across hero/pull-quote/founder/packshot Pulls the saturated-yellow WP-import JPGs down a half-step in the brightness hierarchy so the white type stays dominant and the photos read as editorial, not product photography. - globals.css: new filter utilities (.filter-editorial, .filter-editorial-shell with cool/amber split-tone, .filter-editorial-strong, .filter-editorial-vignette) + reduced-motion reset - TuxedoVideoHero: grade the Ken Burns backdrop image - tuxedo/page.tsx: apply grades to PullQuoteBand, TheCorn ear macro, FounderStrip (also swap to the retouched founder image from b90f0fa), and HarvestEditorial packshot; bump founder quality 88 -> 92 --- src/app/globals.css | 84 +++++++++++++++++++ src/app/tuxedo/page.tsx | 19 +++-- src/components/storefront/TuxedoVideoHero.tsx | 2 +- 3 files changed, 96 insertions(+), 9 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 7acdc2f..b96d4bf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1403,3 +1403,87 @@ select:-webkit-autofill:focus { transform: none !important; } } + +/* ── Tuxedo storefront: editorial photo color grade ──────────────────── + * Subtle Lightroom-style treatment applied to all hero / pull-quote / + * founder / packshot / ear-macro / storm-field photos. The raw WP-import + * JPGs skew saturated-yellow and slightly flat — the corn itself reads + * garish, the shadows crushed, the highlights cheap. This filter: + * - saturate(.86) pulls the corn's yellow down so the photo doesn't + * shout louder than the white type. + * - contrast(1.06) magazine-print contrast — slightly punchier + * without crushing shadows. + * - brightness(.97) trims ~3% so the photo sits a half-step below the + * type in the brightness hierarchy. + * Stacked with a faint cool-tone overlay (see .filter-editorial-shell) + * for a split-tone effect: shadows drift toward navy/slate, highlights + * stay warm. Reads as a graded magazine photo, not a raw JPG. + */ +.filter-editorial { + filter: saturate(0.86) contrast(1.06) brightness(0.97); +} + +/* Wrap an image in a .filter-editorial-shell to also apply the cool + * shadow tint. The shell uses a mix-blend-mode overlay so the tint + * blends with the photo rather than sitting on top of it. + * ::before = slate multiply (cools highlights, lifts shadows) + * ::after = amber soft-light (warms midtones back, restores the + * corn's color without bringing the saturation back) */ +.filter-editorial-shell { + position: relative; + isolation: isolate; +} +.filter-editorial-shell::before { + content: ""; + position: absolute; + inset: 0; + background: rgba(20, 30, 50, 0.16); + mix-blend-mode: multiply; + pointer-events: none; + z-index: 1; +} +.filter-editorial-shell::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(232, 163, 23, 0.07); + mix-blend-mode: soft-light; + pointer-events: none; + z-index: 2; +} +.filter-editorial-shell > img { + filter: saturate(0.86) contrast(1.06) brightness(0.97); +} + +/* Heavier grade for the harvest packshot — it's the most chromatically + * dense image on the page (piles of yellow cobs) so it needs an + * extra-strong desaturation pull to read as editorial, not product + * photography. */ +.filter-editorial-strong { + filter: saturate(0.78) contrast(1.10) brightness(0.95); +} + +/* Subtle film vignette used on full-bleed editorial photos (packshot, + * storm field, founder). Draws the eye toward the center where the + * typography anchors. */ +.filter-editorial-vignette::after { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient( + ellipse at center, + transparent 35%, + rgba(0, 0, 0, 0.18) 80%, + rgba(0, 0, 0, 0.38) 100% + ); + pointer-events: none; + z-index: 3; +} + +@media (prefers-reduced-motion: reduce) { + .filter-editorial, + .filter-editorial-shell > img, + .filter-editorial-strong { + filter: none !important; + } +} diff --git a/src/app/tuxedo/page.tsx b/src/app/tuxedo/page.tsx index 72ec700..05cf1ce 100644 --- a/src/app/tuxedo/page.tsx +++ b/src/app/tuxedo/page.tsx @@ -147,8 +147,11 @@ const WP_IMAGES = { /** Pre-storm purple sky over deep-green tasseled rows receding to * mountains — the editorial pull-quote band. */ stormField: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-field-storm.jpg", - /** White-haired founder inspecting tassels — the Our Story anchor. */ - founderPortrait: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-founder-john.jpg", + /** White-haired founder inspecting tassels — the Our Story anchor. + * Editorial-graded version of the original WP shot — golden-hour + * lighting, shallow DOF, sharper focus on the face. Same man, + * same overalls, same tassels — just the photo he deserves. */ + founderPortrait: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-founder-john-editorial.jpg", /** Single yellow ear with silk and dark green bokeh — the product * moment in the editorial "Why" replacement. */ earMacro: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-ear-macro.jpg", @@ -208,7 +211,7 @@ function PullQuoteBand() { sizes="100vw" quality={88} priority - className="object-cover -z-10" + className="object-cover -z-10 filter-editorial" /> {/* Layered tints: top darkens the sky, bottom grounds the type. */}
@@ -296,7 +299,7 @@ function TheCorn() { {/* Right: macro photo, 7/12 — the photograph carries the section. */}
-
+
A single ear of Olathe Sweet corn, partially husked, silk still attached, against a field of dark green tassels
-
+
John Harold, founder, walking through his corn rows inspecting the tassels @@ -450,7 +453,7 @@ function HarvestEditorial() { {/* Full-bleed packshot */} -
+
Husked Olathe Sweet cobs piled on the packing shed table the morning of pick {/* A single warm tint along the bottom to echo the existing amber-wash treatment used in The Corn and FounderStrip so diff --git a/src/components/storefront/TuxedoVideoHero.tsx b/src/components/storefront/TuxedoVideoHero.tsx index e52623d..9ae76ab 100644 --- a/src/components/storefront/TuxedoVideoHero.tsx +++ b/src/components/storefront/TuxedoVideoHero.tsx @@ -264,7 +264,7 @@ function HeroBackdrop({ objectPosition: "center", zIndex: 0, }} - className="select-none pointer-events-none animate-tvh-kenburns" + className="select-none pointer-events-none animate-tvh-kenburns filter-editorial" /> ) : null}