feat(tuxedo): editorial photo color grade across hero/pull-quote/founder/packshot
Deploy to route.crispygoat.com / deploy (push) Successful in 4m15s
Deploy to route.crispygoat.com / deploy (push) Successful in 4m15s
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
This commit is contained in:
+11
-8
@@ -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. */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-stone-950/55 via-stone-950/15 to-stone-950/80 -z-10" />
|
||||
@@ -296,7 +299,7 @@ function TheCorn() {
|
||||
{/* Right: macro photo, 7/12 — the photograph carries the section. */}
|
||||
<div className="lg:col-span-7 order-1 lg:order-2">
|
||||
<FadeOnScroll from="right" duration={1}>
|
||||
<div className="relative aspect-[5/4] sm:aspect-[16/11] overflow-hidden rounded-2xl shadow-[0_30px_80px_-30px_rgba(15,40,20,0.45)] ring-1 ring-stone-900/5">
|
||||
<div className="relative aspect-[5/4] sm:aspect-[16/11] overflow-hidden rounded-2xl shadow-[0_30px_80px_-30px_rgba(15,40,20,0.45)] ring-1 ring-stone-900/5 filter-editorial-shell">
|
||||
<Image
|
||||
src={WP_IMAGES.earMacro}
|
||||
alt="A single ear of Olathe Sweet corn, partially husked, silk still attached, against a field of dark green tassels"
|
||||
@@ -342,13 +345,13 @@ function FounderStrip() {
|
||||
<LayoutContainer>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center">
|
||||
<FadeOnScroll from="left" className="lg:col-span-5">
|
||||
<div className="relative aspect-[4/5] sm:aspect-[5/6] overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)]">
|
||||
<div className="relative aspect-[4/5] sm:aspect-[5/6] overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)] filter-editorial-shell">
|
||||
<Image
|
||||
src={WP_IMAGES.founderPortrait}
|
||||
alt="John Harold, founder, walking through his corn rows inspecting the tassels"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 42vw"
|
||||
quality={88}
|
||||
quality={92}
|
||||
priority
|
||||
className="object-cover"
|
||||
/>
|
||||
@@ -450,7 +453,7 @@ function HarvestEditorial() {
|
||||
</header>
|
||||
|
||||
{/* Full-bleed packshot */}
|
||||
<figure className="relative aspect-[16/9] sm:aspect-[21/10] overflow-hidden ring-1 ring-white/[0.06] shadow-[0_40px_120px_-40px_rgba(0,0,0,0.7)]">
|
||||
<figure className="relative aspect-[16/9] sm:aspect-[21/10] overflow-hidden ring-1 ring-white/[0.06] shadow-[0_40px_120px_-40px_rgba(0,0,0,0.7)] filter-editorial-vignette">
|
||||
<Image
|
||||
src={WP_IMAGES.piledCobs}
|
||||
alt="Husked Olathe Sweet cobs piled on the packing shed table the morning of pick"
|
||||
@@ -458,7 +461,7 @@ function HarvestEditorial() {
|
||||
sizes="(max-width: 1024px) 100vw, 1280px"
|
||||
quality={92}
|
||||
priority
|
||||
className="object-cover animate-harvest-drift"
|
||||
className="object-cover animate-harvest-drift filter-editorial-strong"
|
||||
/>
|
||||
{/* A single warm tint along the bottom to echo the existing
|
||||
amber-wash treatment used in The Corn and FounderStrip so
|
||||
|
||||
Reference in New Issue
Block a user