/* ============================================================ TYPE — own note, per explicit instruction: no shared heading custom properties exist anywhere in this codebase (checked every :root declaration in both index.html and branding.html before writing this file — only page-local sizing vars like --services-heading-size and branding's own --card-headline-size, nothing named for reuse across pages). So every size/weight below is set directly against the one shared font stack ('Aspekta Variable', 'DM Sans', sans-serif — used unconditionally everywhere in this file) rather than a token that doesn't exist, each one traced back in its own comment to the homepage rule it matches. If a real shared heading scale gets built later, this file is the one to update. Also per explicit instruction: nothing here is a kicker label — no small-caps/uppercase line sits above any heading on this page. ============================================================ */ /* ============================================================ SEAFOOD HERO — own build. Same two-layer masked-aperture mechanic as the homepage hero (a base layer + a full duplicate "reveal" layer, clipped to the flame-hand silhouette via the same PNG mask asset, mask-position/size driven per-frame by JS toward the pointer), deliberately NOT wired to the homepage's own #hero/#heroReveal/FLAME_MASK_CONFIG machinery — own IDs throughout (seafoodHero/seafoodReveal/etc.) so the shared bundle's own hero script, which looks up id="hero" unconditionally, simply finds nothing here and never touches this page's markup. Per explicit follow-up request, this DOES now reuse the homepage's own scroll-pin-and-grow choreography (own .seafood-hero-pin-wrapper, same calc(100svh + 90vh) reserved scroll distance, same position:sticky hero) — see SEAFOOD_MASK below for the full growth math, ported from FLAME_MASK_CONFIG. Still NOT ported: the corner-icon handoff (this hero has no corner mark to peel off of) and desktop-only — mobile keeps its own simpler static strip, see the max-width:767px override below and SEAFOOD_MASK's own comment on why. ============================================================ */ .seafood-hero-pin-wrapper{ position: relative; height: calc(100svh + 90vh); /* 90vh matches the homepage's own FLAME_MASK_CONFIG.pinExtraVh — reserved extra scroll distance the growth animation plays out over before the page continues into the next section */ } .reduce-motion .seafood-hero-pin-wrapper{ height: auto; } /* no pin under reduced motion — matches the homepage's own identical rule */ .seafood-hero{ position: sticky; top: 0; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; background: var(--color-violet); } .reduce-motion .seafood-hero{ position: relative; } @media (max-width: 767px){ /* mobile keeps its existing stacked, non-pinned layout (see the hero's own max-width:767px override further down) rather than the homepage's full-bleed pinned mobile hero — reconciling the two would mean rebuilding this page's whole mobile hero from scratch, which wasn't part of this request. */ .seafood-hero-pin-wrapper{ height: auto; } .seafood-hero{ position: static; } } /* ---- base layer: violet ground, cream headline. No dot-grid here on purpose — per explicit spec, only the REVEAL layer carries the fish; the base stays plain so hovering genuinely "discovers" them rather than them sitting visible in the background the whole time. ---- */ .seafood-hero__headline{ position: absolute; left: 4%; bottom: 8%; margin: 0; /* matches h1.headline's own family/weight (the homepage's heavy heading treatment, font-weight 650, Aspekta) — size is this file's own derivation, not a token: a single word needs a different clamp than the homepage's 3-stacked-line hero, so this is sized on its own terms (see TYPE note above). */ font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 650; font-size: clamp(64px, 11vw, 200px); line-height: 0.92; letter-spacing: -0.01em; color: var(--color-cream); z-index: 5; pointer-events: none; } /* ---- persistent panel — NOT part of the aperture, always visible regardless of mask state. Deliberately plain text on the violet ground: no card/box, no monospace, no uppercase tracking — the branding hero's panel treatment is explicitly off-limits for type here. Sized so both lines clear the WCAG large-text floor (>=24px regular) against violet: cream-on-violet measures 3.51:1 (verified — see the publish report), which passes the 3:1 large-text threshold but not 4.5:1 for body-sized text, so nothing in this panel is allowed to render smaller than that floor. ---- */ .seafood-hero__panel{ position: absolute; right: 5%; top: 14%; width: min(34%, 460px); z-index: 6; } .seafood-hero__panel-headline{ margin: 0 0 0.5em; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-cream); } .seafood-hero__panel-body{ margin: 0; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(24px, 1.6vw, 30px); line-height: 1.35; color: var(--color-cream); } /* ---- reveal layer — the inverted duplicate. Ground flips to cream (near-black on the homepage), fish + duplicate headline are ink. See the publish report for the exact contrast + why this pair, not the homepage's ink/violet pair. Own fix, per explicit report ("the font needs to inverse too... as the [aperture] gets bigger on scroll"): the persistent panel was cream-only, so once the growing aperture's cream ground spread under it, the panel read as cream-on-cream. Rather than approximate this with a scroll-progress crossfade, this duplicates the panel into the reveal layer exactly the way the headline is already duplicated — same classes, same position (both .seafood-hero and .seafood-hero__reveal share the same inset:0 coordinate space), ink-colored — so it appears/disappears in lockstep with the ACTUAL mask shape, gap-for-gap, rather than a guess at when the aperture "should" have covered it. */ .seafood-hero__reveal .seafood-hero__panel-headline, .seafood-hero__reveal .seafood-hero__panel-body{ color: var(--color-near-black); } .seafood-hero__reveal{ position: absolute; inset: 0; z-index: 8; overflow: hidden; background: var(--color-cream); pointer-events: none; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url("https://cdn.prod.website-files.com/6aaab8aa5da02fa0b7406b4a/6ab4924a3fc9490cf2ae1f98_flame-hand-mask.png"); -webkit-mask-image: url("https://cdn.prod.website-files.com/6aaab8aa5da02fa0b7406b4a/6ab4924a3fc9490cf2ae1f98_flame-hand-mask.png"); } .seafood-hero__reveal .seafood-hero__headline{ color: var(--color-near-black); } /* own fix, per explicit request ("do white fish on black vs white on grey when the [aperture] scroll[s]"): the reveal's cream ground only applies pre-scroll (the hover-open state, where the ink fish/headline/panel pairing was originally spec'd and approved). Once scrolling drives the aperture's GROWTH phase, the SEAFOOD_MASK script now toggles this class, flipping the ground to near-black — matching the homepage's own ink-ground reveal convention — with the fish grid's white fill needing no change (already reads cleanly on black without its cream-legibility outline doing any real work there) but the duplicated headline and panel text, previously ink-on-cream, switched to cream-on- black so they don't go invisible against their own new ground. */ .seafood-hero__reveal.is-growing{ background: var(--color-near-black); } .seafood-hero__reveal.is-growing .seafood-hero__headline, .seafood-hero__reveal.is-growing .seafood-hero__panel-headline, .seafood-hero__reveal.is-growing .seafood-hero__panel-body{ color: var(--color-cream); } /* ---- fish dot-grid — the cherry-bomb tiling component, shape swapped for a hand-authored fish silhouette (no fish artwork exists anywhere in this codebase — see the publish report). Same construction as .dot-grid: one 62x124 tile, two offset placements, single flat fill, no idle animation. The homepage's own .dot-grid is confirmed static in its own CSS comment ("no idle drift, no cursor-follow") — so "same drift behavior as the bombs" is satisfied by ALSO staying static: whatever apparent motion you see is the aperture window moving over a fixed pattern, exactly like the homepage, not an animation on the fish themselves. Own fix, per explicit report ("make the fish... yellow/green vs grey"): the original ink fill (#0B0B0F) at 0.55 opacity over the cream reveal ground optically reads as grey, not black — alpha blending a near-black into a light ground desaturates toward grey regardless of the source hue. First pass baked in a darkened olive (#6B7300) instead of the palette's literal --color-yellow, reasoning that pure #E6FF00 is near-invisible on cream by contrast math (1.1:1) — user rejected that result on sight ("weird olive green vs the yellow/green that's our brand color"). Second pass used the literal brand --color-yellow fill with a thin ink stroke for edge legibility — user then called the yellow itself "too crazy" for this hero and asked for white instead. Kept the same ink stroke (still stroke="#0B0B0F", stroke-width 7 in the tile's own pre-scale path units ≈ 1.2px on screen after the transform's 0.169565 scale) since fill alone still can't carry legibility against cream regardless of hue — only swapped the fill to #FFFFFF. */ .seafood-hero__fish-grid{ position: absolute; inset: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MiIgaGVpZ2h0PSIxMjQiIHZpZXdCb3g9IjAgMCA2MiAxMjQiPjxkZWZzPjxwYXRoIGlkPSJzZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiwzOSBDNiwyMCAzNSw0IDY2LDQgQzEwMCw0IDEyNywyMCAxMjcsMzkgQzEyNyw1OCAxMDAsNzQgNjYsNzQgQzM1LDc0IDYsNTggNiwzOSBaIE0xMjAsMjIgTDE2MiwzIEwxMzQsMzkgTDE2Miw3NSBMMTIwLDU2IFogTTQ0LjUsMzIgQTYuNSw2LjUgMCAxLDAgMzEuNSwzMiBBNi41LDYuNSAwIDEsMCA0NC41LDMyIFoiLz48L2RlZnM+PHVzZSBocmVmPSIjc2YiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iIzBCMEIwRiIgc3Ryb2tlLXdpZHRoPSI3IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjIzOSwxMS41MDApIHNjYWxlKDAuMTY5NTY1KSIvPjx1c2UgaHJlZj0iI3NmIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwQjBCMEYiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEuMjM5LDczLjUwMCkgc2NhbGUoMC4xNjk1NjUpIi8+PC9zdmc+"); background-size: 62px 124px; background-repeat: repeat; opacity: 1; } @media (max-width: 767px){ .seafood-hero{ height: auto; min-height: 0; padding: 96px 6% 56px; } .seafood-hero__headline{ position: static; font-size: clamp(48px, 15vw, 96px); margin: 0 0 28px; } .seafood-hero__panel{ position: static; width: 100%; } .seafood-hero__reveal{ display: none; } /* see SEAFOOD_MASK script: touch gets a static open state instead of a full-bleed mask over stacked, static content */ .seafood-hero__mobile-reveal{ display: block; } } .seafood-hero__mobile-reveal{ display: none; } /* ============================================================ CATEGORY STATEMENT — ink ground, large cream paragraphs. Reuses the homepage's OWN service-row__para scale (font-weight 400, clamp(20px,2vw,34px), line-height 1.18) verbatim rather than inventing a new paragraph treatment, per instruction to consume existing patterns wherever one exists. No kicker. Own update: this now renders three paragraphs (SEAFOOD_CONFIG. category.paragraphs is an array), so .seafood-category__text is applied per-

with spacing between them instead of margin:0 on a single block. ============================================================ */ .seafood-category{ background: var(--color-near-black); color: var(--color-cream); padding: 14vh 6vw; } .seafood-category__text{ max-width: 1100px; margin: 0 0 0.9em; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(20px, 2vw, 34px); line-height: 1.3; } .seafood-category__text:last-child{ margin-bottom: 0; } /* ============================================================ SELECTED WORKS — cream ground, homepage's exact card treatment (.works-item / .works-item__media / .works-item__scrim / .works-item__text are the shared bundle's own classes — reused unchanged, not redefined here). Approved: the mobile swipe-row layout (flex row, overflow-x, bleeding past the right edge) at ALL sizes on this page, since 2 cards in the homepage's default 3-col grid leaves a hole. Own update, per explicit request ("rebuild ... to match the branding page's cases section rather than the homepage's card row"): row/card dimensions below are now copied verbatim from branding.html's own .branding-cases__row — 20px gap, fixed 320px card height (not the shared bundle's own aspect-ratio:4/5), clamp(280px,30vw,380px) width, 6px radius — so this section and branding's cases section are now the identical component at the identical size, not two different card treatments that happen to share a class name. ============================================================ */ .seafood-works{ background: var(--color-cream); color: var(--color-near-black); padding: 12vh 0 14vh; overflow: hidden; } .seafood-works__heading{ margin: 0 0 6vh; padding: 0 5vw; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 800; font-size: clamp(32px, 4.2vw, 64px); line-height: 0.95; } .seafood-works__row{ display: flex; gap: 20px; margin: 0; padding: 4px 5vw 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .seafood-works__row::-webkit-scrollbar{ display: none; } .seafood-works__row .works-item{ flex: 0 0 clamp(280px, 30vw, 380px); scroll-snap-align: start; } .seafood-works__row .works-item__media{ aspect-ratio: unset; height: 320px; border-radius: 6px; } .seafood-works__row .works-item__img{ border-radius: 6px; } /* own fix, per explicit measurement request — same override as branding.html's own .branding-cases__row .works-item__scrim, see that rule's comment for the full measurement writeup. Scoped to this row rather than the shared .works-item__scrim rule itself, since that rule is also the homepage's own Work grid. */ .seafood-works__row .works-item__scrim{ background: linear-gradient(to top, color-mix(in srgb, var(--color-near-black) 80%, transparent) 0%, color-mix(in srgb, var(--color-near-black) 80%, transparent) 45%, transparent 100%); } @media (max-width: 767px){ .seafood-works__row .works-item{ flex-basis: 78vw; } } /* ============================================================ SERVICES — six rows. Reuses the homepage's OWN .service-row / .service-row__number / .service-row__titlecol / .service-row__title / .service-row__para (all shared-bundle classes, same grid columns, same 1px divider, same type scale — none redefined here). Per explicit instruction: subs and doodle are skipped rather than filled with invented content, so the paragraph column below is widened to use that freed space (the homepage's own para sits at grid-column 5/10, leaving 10/13 for a doodle this page doesn't have). Own follow-up, per explicit request: flipped from the homepage's ink ground to cream/dark type. --services-number can no longer use the shared bundle's own default (var(--color-orange)) as-is — orange-on-cream measures 2.64:1, below even the 3:1 large-text floor — so this page sets its own darker "burnt orange" (#B33700, 4.87:1 on cream) as its --services-number instead, close to brand orange in hue without failing contrast. See the publish report for the full before/after numbers. ============================================================ */ .seafood-services{ background: var(--color-cream); /* own fix, caught in local testing: .service-row__title and .service-row__para (both reused verbatim from the shared bundle) declare no color of their own — on the homepage they inherit it from .services{ color: var(--services-text,...) }, a rule that only matches class="services". This section uses page-scoped class="seafood-services" instead, so that rule never applied. Setting color here directly (still via the same --services-text custom property this file already writes via JS, so there's still one place to change it) is what actually makes the inheritance work. */ color: var(--services-text, var(--color-near-black)); padding: 10vh 6vw 4vh; } .seafood-services__heading{ margin: 0 0 2vh; padding-bottom: 4vh; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 800; font-size: clamp(32px, 4.2vw, 64px); line-height: 0.95; color: var(--color-near-black); } #seafoodServicesStage .service-row__para{ grid-column: 5 / 13; } /* ---- STACK/UNSTACK — own build, per explicit request ("ease/ unstack and stack on scroll"): replaces the shared bundle's own one-shot .service-row.is-visible reveal (a fixed-duration fade that never reverses) with a continuously scroll-scrubbed transform, same technique as the homepage's own FILL block (per-row progress computed straight from getBoundingClientRect().top against two viewport-height thresholds, recomputed every scroll tick — a pure function of position, not an accumulator, so scrolling back up genuinely re-stacks a row instead of leaving it revealed). --stack-t (0 = stacked/tucked under the row above, 1 = fully unstacked into its resting position) is written per-row by the STACK script below; this rule just consumes it. ---- */ #seafoodServicesStage .service-row{ opacity: 1; transform: none; transition: none; /* overrides the shared bundle's own one-shot opacity:0/translateY(24px) + .is-visible transition — this page drives both continuously via --stack-t instead */ } #seafoodServicesStage .service-row > *{ opacity: calc(0.25 + var(--stack-t, 1) * 0.75); transform: translateY(calc((1 - var(--stack-t, 1)) * 56px)) scale(calc(0.97 + var(--stack-t, 1) * 0.03)); } @media (prefers-reduced-motion: reduce){ #seafoodServicesStage .service-row > *{ opacity: 1; transform: none; } } @media (max-width: 991px){ #seafoodServicesStage .service-row__para{ grid-column: 1 / -1; } } /* own fix, caught in local testing: below 767px the shared bundle's .service-row switches into an ACCORDION (one row expanded at a time, .service-row__para collapsed to max-height:0/opacity:0 until a row gets .is-expanded, toggled by the homepage's own accordion script) — this page never includes that script, so every row's paragraph was silently invisible on mobile, all six titles with no body copy under any of them. This page deliberately has no accordion (same "skim everything in one pass" reasoning that ruled out the typed-carousel heading applies just as much on mobile), so the collapse is overridden off entirely here rather than reproducing the toggle behavior. */ @media (max-width: 767px){ #seafoodServicesStage .service-row__para{ max-height: none; opacity: 1; padding-bottom: 28px; } } /* ============================================================ STAT — own rebuild, per explicit request. Was a single stacked stat (giant centered numeral, body underneath, source line below that). Now: numeral and copy sit side by side (own request: "number and copy side by side, not stacked... vertically aligned on the numeral's baseline area" — align-items:baseline on the row is the literal CSS mechanism for that), and the numeral shuffles through three throwaway stats before landing on a fourth, held one — see SEAFOOD_STAT_SEQUENCE script below for the full behavior writeup. Four .seafood-stat__frame elements sit stacked in the same grid cell (grid-area:1/1 on all four — CSS Grid auto-sizes the shared track to whichever frame is tallest, so the stage doesn't need a hardcoded height or any JS measurement to fit a differently- wrapping copy line at each stage). Only one frame is visible (.is-active) at a time, crossfaded by opacity+scale. ============================================================ */ .seafood-stat{ background: var(--color-cream); color: var(--color-near-black); padding: 14vh 6vw; } .seafood-stat__stage{ display: grid; max-width: 1100px; margin: 0 auto; } .seafood-stat__frame{ grid-area: 1 / 1; display: flex; align-items: baseline; gap: 5%; opacity: 0; transform: scale(0.92); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .seafood-stat__frame.is-active{ opacity: 1; transform: scale(1); } .seafood-stat__number{ flex: 0 0 auto; margin: 0; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 650; /* matches h1.headline's own weight — this file's heavy-heading treatment */ font-size: clamp(80px, 11vw, 200px); line-height: 0.9; letter-spacing: -0.01em; } .seafood-stat__body{ flex: 1 1 auto; margin: 0; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35; } .seafood-stat__source{ max-width: 1100px; margin: 3vh auto 0; font-family: 'Aspekta Variable', 'DM Sans', sans-serif; font-weight: 500; font-size: 14px; color: color-mix(in srgb, var(--color-near-black) 60%, transparent); opacity: 0; transition: opacity 0.4s ease; } .seafood-stat__source.is-visible{ opacity: 1; } /* own choice, not specified: side-by-side only holds down to tablet width — below 767px the numeral and a multi-line stat sentence competing for horizontal room gets cramped fast, so this page's established mobile pattern (stack what's side-by-side at desktop) applies here too. */ @media (max-width: 767px){ .seafood-stat__frame{ flex-direction: column; align-items: flex-start; gap: 0.2em; } } @media (prefers-reduced-motion: reduce){ .seafood-stat__frame{ transition: none; } .seafood-stat__source{ transition: none; } } /* ============================================================ CTA — violet ground. Same reasoning as STAT: no existing "headline + standalone email" section anywhere on the site (the only other hello@ links are small footer list items), so this is derived from the homepage heading treatment + a plain link. This section also stands in for the shared site footer, which /branding also omits entirely (confirmed live: no