/* ============================================================ BEINC — Service Detail Page Hero (Section CSS) ============================================================ 100vh hero on cream background. Two-column desktop layout: left content column (≈55vw) holds the service heading + tagline + body description across 3 stacked rows; right media column (≈45vw) holds an image OR video at landscape 16:9 aspect ratio with --radius rounded corners. Dashed-line system on this hero (greyish on cream): - 4 horizontals around the nav bar (services-hero pattern) - 2 nav-side verticals running from the top of the viewport down to the nav bar's bottom edge - 2 edge verticals at global pad-x running from the top of the hero down to the hero's bottom (= just before features section) - 2 mid horizontals between the 3 rows of the LEFT column, full-bleed page width (media element overlays them) Service-color theming: every page that uses this CSS sets --service-color on .sdp-hero (or any ancestor) and the pulsating square + service-tinted accents pick it up. Depends on: global.css ============================================================ */ /* ── HERO PIN WRAPPER ── Sticky-pinned at the top so the next section (sdp-features) scrolls UP over the hero — the "covered" parallax. */ .sdp-hero-pin { position: sticky; top: 0; height: 80vh; height: 80lvh; z-index: 0; background: var(--color-white); } /* ── HERO SECTION ── */ .sdp-hero { position: relative; width: 100%; height: 80vh; height: 80lvh; background: var(--color-white); overflow: clip; isolation: isolate; } /* ── SERVICE COLOUR MAP ── Each SDP sets `` and the matching rule below sets `--service-color` on the body itself. Because the variable is on a high ancestor, it cascades into EVERY descendant that reads it — currently sdp-hero (square), sdp-features (asterisks + active dot) and any future SDP section. Slugs match the project tag values used by the data-binder so future authoring stays consistent. The brand fallback handles pages that forget to set the attribute. */ [data-service] { --service-color: var(--color-red-brand); } [data-service="brand"] { --service-color: var(--color-red-brand); } [data-service="comms"] { --service-color: var(--color-orange-comms); } [data-service="web"] { --service-color: var(--color-blue-web); } [data-service="app-platform"] { --service-color: var(--color-purple-app-platform); } [data-service="name-ideation"] { --service-color: var(--color-pink-name-ideation); } [data-service="packaging"] { --service-color: var(--color-green-packaging); } [data-service="graphic-design"] { --service-color: var(--color-yellow-graphic-design); } /* ── DASHED GUIDES (around nav + nav-side verticals + 2 mids + edges) ── Greyish on white. Same reveal/destruct behaviour as services-hero for the nav-flanking lines, but the nav-side verticals only span top→nav-bottom, and the 2 horizontal mids span full-bleed page width between the 3 left-column rows. */ .sdp-hero__guides { position: absolute; inset: 0; pointer-events: none; /* z-index 1 (below .sdp-hero__layout's z-index of var(--z-content) = 2) so the layout's media element occludes the 2 mid horizontal full-bleed lines as they pass behind the image. The other guides (nav-flank horizontals, edge verticals) are in transparent regions of the layout so they remain visible. */ z-index: 1; } .sdp-hero__guide { position: absolute; opacity: 0; background: none; will-change: transform, opacity; transform: translateZ(0); } /* 4 horizontals flanking the nav (top + bottom) */ .sdp-hero__guide--left-top, .sdp-hero__guide--left-bottom, .sdp-hero__guide--right-top, .sdp-hero__guide--right-bottom { height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-greyish); } .sdp-hero__guide--left-top, .sdp-hero__guide--left-bottom { left: 0; transform-origin: left center; } .sdp-hero__guide--right-top, .sdp-hero__guide--right-bottom { transform-origin: right center; } /* 2 verticals at the nav bar's L/R edges — top of screen → nav bottom */ .sdp-hero__guide--vert-left, .sdp-hero__guide--vert-right { width: 0; top: 0; border-left: var(--guide-width) var(--guide-style) var(--color-greyish); transform-origin: center top; } /* 2 edge verticals at global pad-x — span hero height (top→bottom) */ .sdp-hero__guide--edge-left, .sdp-hero__guide--edge-right { width: 0; top: 0; height: 100%; border-left: var(--guide-width) var(--guide-style) var(--color-greyish); transform-origin: center top; } /* 2 horizontal mid lines between left-column rows — full-bleed page width. Reveal-only (do NOT destruct on scroll). */ .sdp-hero__guide--mid-1, .sdp-hero__guide--mid-2 { height: 0; left: 0; width: 100%; border-top: var(--guide-width) var(--guide-style) var(--color-greyish); transform-origin: left center; } /* ── HERO ROWS GRID ── Two-column layout. Left column = content (heading + tagline + body stacked across 3 rows). Right column = media. The media is absolutely positioned over the rows so it can sit on top of the 2 horizontal mid lines without being squeezed by them. */ .sdp-hero__layout { position: absolute; inset: 0; padding-top: var(--nav-section-height, 13vh); /* Global left padding via --pad-x. The layout is full-width (inset: 0), so --pad-x: 2% resolves to 2vw on desktop — exactly matching how Features / Projects sections inset their content. If --pad-x changes globally, the hero text stays in sync automatically. */ padding-left: var(--pad-x); display: grid; /* Right column is FIXED at 45vw (not 45fr) so the media's screen position is INDEPENDENT of layout padding-left. This preserves the destination/source position for any hero ↔ overview media-transition animation. Left column fills the remaining space. */ grid-template-columns: 1fr 45vw; z-index: var(--z-content); } .sdp-hero__left { position: relative; display: grid; /* Heading row + body row are tall; tagline row is short — matches the screenshot where the tagline sits between two larger rows. */ grid-template-rows: 4fr 1fr 4fr; /* Inner left padding = 2vw = viewport-resolved equivalent of global --pad-x. Combined with the layout's OUTER var(--pad-x) (also 2vw on desktop), the text content sits 4vw from the screen edge = 2× global pad-x. Hardcoded 2vw (not var(--pad-x)) because --pad-x is a `%` that would resolve against the column's narrower width (~53vw), giving only ~1vw and breaking the doubled-pad rhythm. Right keeps the 4vw inner gap toward the media column. */ padding: 0 4vw 0 2vw; } .sdp-hero__right { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0 4vw; } .sdp-hero__row { display: flex; align-items: center; min-height: 0; } /* ── Heading row (top of left column) ── */ .sdp-hero__heading-row { align-items: flex-end; padding-bottom: var(--space-5); } /* ── Tagline row ── */ /* Vertical padding gives the dashed mid-1 / mid-2 lines (which anchor to this row's getBoundingClientRect top/bottom) breathing room around the tagline text. On desktop the 1fr grid track usually exceeds this so the padding is absorbed inside the track; on tablet/mobile the row is auto-sized and the padding extends the row's box outward, pushing the lines further from the text. */ .sdp-hero__tagline-row { padding-top: var(--space-5); padding-bottom: var(--space-5); } .sdp-hero__heading-group { display: inline-flex; align-items: center; gap: var(--space-4); } .sdp-hero__square { width: 20px; height: 20px; background: var(--service-color, var(--color-red-brand)); border-radius: 0; flex-shrink: 0; transform-origin: 50% 50%; will-change: transform; /* GSAP drives the entrance (scale 0 → over-shoot → 1 with 360° rotation) and the continuous subtle breathe loop in sdp-hero.js. */ } @media (max-width: 767px) { .sdp-hero__square { /* Smaller mark on mobile so it doesn't crowd the heading. */ width: 13px; height: 13px; } } .sdp-hero__heading { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); /* Slightly tighter than --text-3xl since the column is ~55vw — prevents super-large clamps from blowing out the row. */ font-size: clamp(2rem, 4.5vw, 4.5rem); line-height: var(--leading-none); color: var(--color-black2); margin: 0; } /* ── Tagline row (mid, smaller) ── */ .sdp-hero__tagline-row { align-items: center; } .sdp-hero__tagline { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); font-size: var(--text-sm); line-height: var(--leading-tight); color: var(--color-black2); margin: 0; } /* ── Body row (bottom of left column) ── */ .sdp-hero__body-row { align-items: flex-start; padding-top: var(--space-5); } .sdp-hero__body { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-normal); color: var(--color-black2); margin: 0; max-width: 50ch; } /* ── Right-column media — sits on top of the 2 mid horizontal lines ── */ .sdp-hero__media { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-darkgreyish); position: relative; z-index: 2; } .sdp-hero__media > img, .sdp-hero__media > video { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* ============================================================ TABLET (≤1023px) Single content column (heading + tagline + body) with the media absolutely positioned on the right of the heading + tagline block, vertically centered between them. ============================================================ */ @media (max-width: 1023px) { .sdp-hero__layout { grid-template-columns: 1fr; position: relative; padding: var(--nav-section-height, 13vh) 0 0 0; height: 100%; } .sdp-hero__left { position: relative; grid-template-rows: auto auto auto; /* Tablet pad-x = 4% → inner padding = 2× pad-x = 8vw */ padding: 0 8vw; gap: var(--space-6); align-content: center; height: 100%; } /* Tagline row keeps its vertical padding (so the dashed mid lines stay clear of the text); heading + body rows clear theirs because the grid `gap` provides their inter-row spacing on tablet/mobile. */ .sdp-hero__heading-row, .sdp-hero__body-row { padding: 0; } .sdp-hero__right { position: absolute; top: calc(var(--nav-section-height, 13vh) + 8%); right: 8vw; height: auto; padding: 0; width: 38%; } .sdp-hero__media { width: 100%; } } /* ============================================================ MOBILE (≤767px) Single full-width column. Heading + tagline + body stacked, media follows below at full width. All 6 nav-frame dashed lines (4 horizontals + 2 nav-side verticals) appear, plus the 2 edge verticals and the 2 mid horizontals positioned between the stacked left-column rows by sdp-hero.js. ============================================================ */ @media (max-width: 767px) { .sdp-hero { position: relative; height: auto; min-height: 0; overflow: visible; } .sdp-hero-pin { position: relative; top: auto; height: auto; min-height: 0; } .sdp-hero__layout { position: relative; height: auto; padding: var(--nav-section-height, 13vh) 0 var(--space-9) 0; } .sdp-hero__left { position: relative; grid-template-rows: auto auto auto auto; /* Mobile: text content sits at 2× global --pad-x from the screen edges (sides) AND from the nav bar (top) — same value all four sides so the heading isn't crammed against the nav. */ padding: calc(var(--pad-x) * 2) calc(var(--pad-x) * 2) 0; gap: var(--space-5); } .sdp-hero__heading { font-size: clamp(2rem, 9vw, 3rem); } .sdp-hero__right { position: relative; width: 100%; top: auto; right: auto; /* Match .sdp-hero__left so media + text sit at the same inset. */ padding: 0 calc(var(--pad-x) * 2); margin-top: var(--space-5); } }