/* Service pages (template-service.php) — Strategy, Content & Creative, Activation. See the template's own top comment for what's deliberately not built yet (hero scroll-lock, card hover-reveal tags). */ /* --- Hero (locked-scroll sequence) --- Ported from a working reference demo (front-end only) the user built — the key structural insight it confirmed: the photo lives on ONE shared layer behind BOTH the natural-scroll hero AND the pinned section below it, not as two separate section backgrounds. That's exactly why the very start of the page still scrolls completely normally — .service-hero itself is a plain 100vh block in normal flow; only .service-pinned (below) is tall + sticky, which is what makes IT lock. One deliberate change from the reference: it applied the photo via background-attachment:fixed on . This theme hit real, confirmed bugs with that exact property elsewhere (assets/css/blog.css has the fuller writeup) — it sizes background-size:cover against the viewport rather than the element, and iOS Safari doesn't support it at all. .service-locked__bg here is a real position:fixed layer instead, sized explicitly to the viewport, which sidesteps both problems. Figma exports this as ONE layer — a gradient stacked directly on top of the photo in a single `background` value, not a separate overlay element — specifically so the two can never drift apart. Built the same way here: --hero-image (set inline per-page in template-service.php) and the gradient are two background-image layers on this one element, both perfectly pinned together since they're the same fixed box. background-position is bottom-anchored, not centered — the Figma crop keeps the source photo's sky entirely out of frame regardless of viewport height, so cover needs to crop from the top, not both edges. Figma's own crop is also zoomed in noticeably further than a plain cover fit — its declared background-size is ~140% width / ~171% height of its (fixed 1440×787) frame, and cover alone for that same frame only needs ~100%/~122%: both ratios land on almost exactly 1.4×, i.e. Figma scaled the image up 1.4× beyond cover, uniformly. transform:scale(1.4) reproduces that same relative zoom at any viewport size/aspect ratio, which a fixed background-size percentage (aspect-ratio-dependent) couldn't do responsively. transform-origin is pinned to the bottom so the extra zoom eats into the top (more sky cropped away, as intended) rather than shifting the bottom-anchor established above. Because this is position:fixed, it stays rendered behind the ENTIRE page for the rest of the scroll, permanently — a fixed element doesn't get removed or clipped just because its trigger section scrolled out of view, and covering it once does NOT mean it's "done": at z-index:-1 it's behind normal in-flow content everywhere by definition, which means EVERY section from here to the footer needs its own genuinely opaque background, not only the first one after .service-locked. This was under-scoped once already — only .service-cards got an explicit background, on the wrong assumption that later sections would just inherit plain white once "past" this layer; they don't, because this layer is still there behind them too, so .service-hwt and .service-closing carry the same fix (see their own comments). This is exactly how the reference demo's own background-attachment:fixed on works too — it never "turns off," every section of that page is simply opaque enough to cover it throughout. */ .service-locked { position: relative; } .service-locked__bg { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(27, 27, 27, 0) var(--scrim-stop, 44%), rgba(27, 27, 27, var(--scrim-end-opacity, 1)) 100%), var(--hero-image); background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-color: var(--color-ink); /* transform: scale(1.4); */ transform-origin: center bottom; } .service-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; } .service-hero__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; padding-block: clamp(48px, 6vw, 90px); } /* Fades/slides in on load (service.js), the right column slightly after the left — matches the reference demo's own stagger. */ .service-hero__left, .service-hero__right { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; } .service-hero__right { transition-delay: 0.4s; } .service-hero__inner.is-visible .service-hero__left, .service-hero__inner.is-visible .service-hero__right { opacity: 1; transform: translateY(0); } .service-hero__left { flex: 1 1 20rem; } .service-hero__right { flex: 0 1 31rem; } .service-hero__heading { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.07; color: var(--color-white); } /* Global mobile h1 baseline (3.1rem) — see base.css. */ @media (max-width: 900px) { .service-hero__heading { font-size: clamp(2.25rem, 13vw, 3.1rem); } } .service-hero__subheading { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 1.625rem; color: var(--color-white); } .service-hero__intro { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 1.375rem; line-height: 1.45; text-align: right; color: var(--color-white); } /* --- Pinned (the actual scroll-jacked part) --- .service-pinned reserves a tall scroll distance (300vh); .service-pinned __sticky pins to the viewport for the duration of it via plain position:sticky — a real, natively-supported technique, no JS needed to fake the "stay in place" part. What service.js actually drives is the two panels' opacity/transform and .service-locked's --scrim-stop / --scrim-end-opacity, based on how far scrolled through that 300vh the user currently is (see its own top comment for the exact phase breakdown, ported from the reference demo's proven timing). */ .service-pinned { position: relative; height: 300vh; } /* Content & Creative only has one locked stat, not two — service.js already treats scroll progress as continuous darkening rather than a fade-in/swap/settle sequence for that case (see its own comment), but the reserved scroll distance itself was still the full 300vh built for the two-panel version, so the single stat just sat there doing nothing for most of it. The phase fractions in service.js (FADE_END etc.) are all relative to this height, not absolute, so shrinking it here alone proportionally shortens every phase together — no JS change needed to keep the timing shared between both versions. */ .service-pinned--single { height: 150vh; } .service-pinned__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } /* Row, not a stack — the citation pill (panel B only) sits to the right of the stat text, bottom-aligned with it, per Figma. It was previously just a bare straight after the

in the markup with no layout rule targeting it at all, so as an inline element after a block-level paragraph it fell to a new line below the text, left-aligned by default — not a mis-tuned attempt, just never actually built. Panel A has no citation, so this is a no-op there (a single flex item just sits at its own start edge). */ .service-pinned__panel { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(48px, 6vw, 90px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .service-pinned__stat { max-width: 51.6rem; margin: 0; min-width: 0; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 3.4375rem); line-height: 1.27; color: var(--color-white); } /* Frosted pill — semi-transparent fill + backdrop-filter, not Figma's literal opaque-white + mix-blend-mode:soft-light (that combination has reliably rendered as a flat, unblurred fill everywhere else it's been tried on this site — see .insights-badge in blog.css for the fuller explanation). Same look, without the fragility. */ .service-hero__citation { display: inline-flex; align-items: center; flex-shrink: 0; padding: 10px 20px; border-radius: 40px; font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; color: var(--color-white); background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background-color 0.2s ease; } /* Only ever true when this is a real link (an optional citation URL) — the plain-text version never gets a hover-capable pointer, so this rule has nothing to affect there. */ a.service-hero__citation:hover, a.service-hero__citation:focus-visible { background: rgba(255, 255, 255, 0.3); } /* Non-hover devices — checked against Figma's own mobile frame (node 4002:22189) directly, which turns out to be a bigger structural change than just "drop the scroll-jack": the stat copy isn't part of the hero photo at all there. The photo is bounded to just the heading/subheading/ intro paragraph and ends there; "When marketing isn't aligned…" sits AFTER it, as plain dark text on a plain white background, both stat fields reading as one continuous paragraph with no citation badge — not two white-on-photo panels with a McKinsey pill, which is what simply dropping the scroll-jack and keeping the existing markup/photo treatment would have produced (and which is what was here before this pass). .service-locked__bg (the fixed, permanently-behind-everything photo layer used to support the scroll-jack revealing over a persistent background — see its own comment) is dropped entirely here in favour of a normal, bounded background-image on .service-hero itself, so the photo naturally ends where the hero's own content does instead of bleeding behind every section after it. */ @media (hover: none) { .service-locked__bg { display: none; } .service-hero { /* A full 100vh (previously needed so the hero didn't feel truncated once .service-pinned below it was dropped) read as oversized on its own — 75vh keeps it a full "moment" without forcing a scroll before any of the next section peeks into view. align-items:center (overriding the desktop rule's own flex-end) is what actually moves the heading up from the very bottom edge — see .service-hero__inner's own comment. */ min-height: 75vh; align-items: center; /* Content is centred vertically now, not pinned to the bottom, so a gradient that only starts darkening at 44% left the heading sitting on almost-undarkened photo (confirmed live: white text over open sky on Strategy's own shot). Dark from top to bottom throughout instead — still graduated (lighter up top, solid by the final section) rather than a flat tint, but legible wherever the centred content actually lands. */ background-image: linear-gradient(180deg, rgba(27, 27, 27, 0.4) 0%, rgba(27, 27, 27, 0.6) 50%, rgba(27, 27, 27, 1) 100%), var(--hero-image); /* This box is much taller/narrower relative to these landscape photos than the old bottom-pinned full-height version was, so "cover" alone scales to match the box's HEIGHT exactly — with zero vertical overflow left to crop, background-position's Y value has nothing to act on, and the photo's own sky/horizon shows in full regardless of "top"/"bottom"/"center" (confirmed live on Strategy's river/forest shot). Same fix as the desktop locked hero's own __bg layer uses for the same reason (its own comment above) — over-zooming via a fixed vertical size forces real vertical overflow to exist, so "bottom" then actually has something to crop away (the sky) instead of showing the photo's full, uncropped vertical extent. */ background-size: auto 140%; background-position: center bottom; background-repeat: no-repeat; background-color: var(--color-ink); } /* No top padding here (unlike the previous bottom-pinned version of this layout, which needed one to clear the fixed header) — content is vertically centred within the hero now (.service-hero's own align-items:center), and adding one-sided padding back would just push it off-centre again, the opposite of what centring is for. */ .service-hero__inner { flex-direction: column; align-items: center; text-align: center; } /* Both columns stack full-width and centre their own text — Figma's mobile frame centres the heading/subheading/intro paragraph as one block, not left-aligned heading beside a right-aligned paragraph the way the desktop two-column layout reads. */ .service-hero__left, .service-hero__right { flex: none; width: 100%; } .service-hero__intro { text-align: center; } /* Dropped entirely on mobile — no locked-scroll sequence there anyway (see .service-pinned__sticky's own base rule), so this was just the run-on stat text sitting between the hero and whatever centred intro section actually follows (cards / pill-reveal / plain intro, depending on the page). Hiding it lets the hero flow straight into that instead. */ .service-pinned, .service-pinned--single { display: none; } } /* --- 3-card section --- */ /* This is the section that actually ends the fixed photo/gradient behind it (see .service-locked__bg's own comment) — its white background has to be genuinely full-bleed, edge to edge, not just visually centred. .container (used everywhere else on this site, including inside this very section for .service-cards__inner) caps at a max-width with auto margins, so putting the background on a "container service-cards" element the way .service-hero__inner does would leave the fixed layer showing through in the gutters on either side at any viewport wider than that max-width. The background lives on this outer, unconstrained section instead; .service-cards__inner carries the max-width/padding for the actual content. */ .service-cards { position: relative; z-index: 1; background: var(--color-white); } .service-cards__inner { /* Narrower than the site's regular .container (1440px) on purpose — with 3 fixed-height columns, the regular width made each card come out close to square; this overrides it back down (wins on cascade order over the shared .container rule, both being one class selector, since service.css loads after base.css) so each column is narrower relative to its height, closer to the reference demo's own card proportions (340×420, a noticeably portrait rectangle). */ max-width: 1180px; padding-block: clamp(56px, 8vw, 96px); } .service-cards__intro { max-width: 51rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; } .service-cards__heading { margin: 0 0 15px; font-family: var(--font-body); font-weight: 500; font-size: 2.5rem; line-height: 1.25; color: var(--color-ink); } /* Global mobile h2 baseline (2.3rem) — see base.css. */ @media (max-width: 900px) { .service-cards__heading { font-size: 2.3rem; } } .service-cards__lead { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 1.375rem; line-height: 1.55; color: var(--color-ink); } .service-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* min-height lives on the OUTER card, not -media — -media is position:absolute (below) so it can't establish its parent's height itself; the outer card needs its own height for -media to then fill via inset:0, matching the old single-element card's footprint exactly. */ /* overflow:hidden clips .service-cards__card-tags' resting position (translateY pushes it below the card, ready to slide up on hover) — before the accordion restructure that clipping lived on this same element implicitly (tags was a child of .service-cards__card-media, which has its own overflow:hidden); now that tags is a sibling of -media instead (see template-service.php's own comment on why), it needs its own clip boundary here or it visibly pokes out below the card at rest. */ .service-cards__card { position: relative; overflow: hidden; min-height: 26.25rem; } /* .service-cards__card-media (not the outer .service-cards__card) carries the photo, the title, and (non-hover only) the expand toggle — see template-service.php's own comment on why: on a hover-capable device this inner element fills the whole card exactly as the single-element version used to (inset:0 below), but on a non-hover device it needs to be a short, bounded bar instead, with the description/tags panel below it sitting on a genuine white background, not this same photo stretched down behind them too (see the (hover: none) rules further down). */ .service-cards__card-media { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; background-color: var(--color-ink); } .service-cards__card-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(210deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.8) 84%); pointer-events: none; } /* Hover mechanic ported from the reference demo (its own .sc-h3/.sc-bottom/ .sc-copy/.sc-buttons) — default state: heading sits low, resting just above the description (service.js measures the exact gap per card, same technique as the How We Think reveal, since a fixed guessed offset can't account for cards with differing description lengths); tags sit fully below the card's visible bottom edge, clipped by overflow:hidden above. On hover: heading slides up to the top, the description fades out, and the tags slide up into the space it left, with a short extra delay so they trail slightly behind the heading/description movement instead of all arriving at once. */ .service-cards__card-title { position: absolute; top: 30px; left: 30px; right: 30px; z-index: 2; margin: 0; color: var(--color-white); font-family: var(--font-body); font-weight: 500; font-size: 1.75rem; line-height: 1.25; transform: translateY(var(--card-title-drop, 200px)); transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1); } /* Triggered off the OUTER card, not .service-cards__card-media itself — .service-cards__card-bottom/-tags are siblings of -media now (see template-service.php's own comment on why), not descendants of it, so a hover selector scoped to -media alone couldn't reach them. The outer card and -media share the exact same visual bounds on a hover-capable device (see -media's own default position:absolute;inset:0 rule), so hovering either one is the same gesture in practice. */ .service-cards__card:hover .service-cards__card-title { transform: translateY(0); } /* Pinned to the card's bottom edge via absolute positioning (mirroring .service-cards__card-tags below it), not normal flow — before the accordion restructure this sat inside .service-cards__card-media's own flex column (justify-content:flex-end), which put it at the bottom for free; now that it's a sibling of -media instead of a child (see template-service.php's own comment on why), it's no longer inside that flex context, and -media itself is out of flow (position:absolute), so a plain position:relative here rendered right at the TOP of the card — overlapping the title instead of sitting under it. */ .service-cards__card-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 30px; } .service-cards__card-description { margin: 0; color: var(--color-white); font-family: var(--font-body); font-weight: 300; font-size: 1.375rem; line-height: 1.36; transition: opacity 0.25s ease; } .service-cards__card:hover .service-cards__card-description { opacity: 0; } .service-cards__card-tags { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transform: translateY(calc(100% + 30px)); transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1); } .service-cards__card:hover .service-cards__card-tags { transform: translateY(0); transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1) 0.14s; } .service-cards__card-tag { display: inline-block; margin: 0; max-width: 100%; padding: 11px 20px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); color: var(--color-white); font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; } /* Click-to-expand trigger, non-hover devices only — see the (hover: none) block below and template-service.php's own comment on this element. */ .service-cards__card-toggle { display: none; } @media (prefers-reduced-motion: reduce) { .service-cards__card-title, .service-cards__card-tags { transition: none; } } @media (max-width: 900px) { .service-cards__grid { grid-template-columns: 1fr; } } /* Click-to-expand accordion, non-hover devices — a touch/no-hover input has no gesture equivalent to "hover the card", so the same tag-reveal content becomes a real interaction instead (service.js's own click handler toggles .is-expanded), on a plain white background below a short image bar rather than an overlay on the photo — matches the design's own mobile treatment, and is what actually makes the tags reachable at all here (the hover version has no touch/keyboard equivalent otherwise). Sized/laid out from scratch rather than reusing the hover version's absolute-overlay positioning, which assumes a tall fixed-height card that doesn't apply once the expanding content needs to push real layout height. */ @media (hover: none) { /* Accordion rows sit flush against each other, divided by a plain rule (matching .service-hwt/.service-capabilities' own list-divider convention elsewhere in this file) rather than the grid's desktop card gap, which read as separate floating cards rather than one continuous accordion list. */ .service-cards__grid { gap: 0; } .service-cards__card { min-height: 0; /* Chrome's scroll anchoring otherwise re-targets the scroll position to whichever nearby element it thinks moved — since expanding a card changes ITS OWN height by hundreds of pixels, the browser was compensating by scrolling further down after every tap, landing on the newly-revealed tags instead of the top of the card that was just opened. */ overflow-anchor: none; border-bottom: 1px solid var(--color-ink); } .service-cards__card:last-child { border-bottom: none; } .service-cards__card-media { position: relative; inset: auto; min-height: 0; height: 9rem; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 20px; } .service-cards__card-title { position: static; flex: 1 1 auto; min-width: 0; transform: none; font-size: 1.375rem; } .service-cards__card-toggle { display: flex; align-items: center; justify-content: center; position: static; flex-shrink: 0; width: 2.75rem; height: 2.75rem; /* base.css only zeroes out