/* ============================================
* service-page-hero.css — shared hero for the 6 service pages
*
* Template module: Website, Brand Identity, Strategy & Advisory,
* Projects & Campaigns, Training & Workshops, Fractional CMO.
*
* Built from Figma node 234:3183 (Website service page).
*
* Layout: text-left copy column + right-side product visual on a
* peach/pink soft glow. Calmer alternative to the homepage's
* full-bleed brand video — service pages don't need the same
* display drama.
*
* Sits inside `.tlm-page-header` so the navbar overlays the hero
* (transparent navbar → cream solid state on scroll).
*
* NOTES:
* - H1: 44 mobile (--text-h1-mobile, matches homepage) / 56 desktop
* (--text-h2, intentionally smaller than the homepage's 72px
* --text-display so the service-page hero stays quieter on
* larger screens).
* - Peach glow uses CSS radial-gradient (per the
* feedback-figma-asset-pipeline rule: prefer CSS gradient for
* soft glows). The Figma source has a 1.2 MB webp; this
* replaces it with zero asset weight + tunable intensity.
* - Title gradient on first line uses .tlm-heading-accent
* utility from base.css (background-clip: text technique).
* ============================================ */
.tlm-service-page-hero {
position: relative;
background-color: var(--color-cream);
overflow: hidden;
/* padding-top is a literal navbar-clearance value (not on the spacing
scale — it's a positioning number, like the why-image sticky offset).
padding-bottom uses a scale token. Mobile: ~90px navbar + breathing.
Bumped to 156 — 130 still read as too tight under the menu on the
text-only heroes (About/Approach/Contact/Start a conversation). */
padding-block: 156px var(--space-2xl);
}
/* Brand gradient image — same asset + treatment for mobile + desktop:
anchored top-right, sized so its height matches the hero, width
bleeds off the left at natural ratio. Bright pink in upper-right
of the source sits in the upper-right corner of the viewport.
Encoded from gradient-bg.png via cwebp q=85 (692 KB → 164 KB). */
.tlm-service-page-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url('../../images/service/hero-gradient-bg.webp') no-repeat right top / auto 100%;
/* Knock back the brightness — parent's cream bg blends through. */
opacity: 0.65;
}
/* ============================================
* SERVICE-PAGE NAVBAR OVERRIDE
*
* On service pages the navbar is pinned to its solid CONTENT state
* (navy logo / nav links / filled CTA) so it stays visible on the
* light hero. But at the top of the page we still want a transparent
* BG overlaying the hero — same feel as the homepage navbar.
*
* Script toggles `.tlm-navbar--scrolled` past the threshold; until
* then this rule strips the bg + shadow that `.tlm-navbar--solid`
* normally paints in.
* ============================================ */
.tlm-navbar.tlm-navbar--solid[data-pin-solid]:not(.tlm-navbar--scrolled) {
background-color: transparent;
box-shadow: none;
border-bottom-color: transparent;
}
.tlm-service-page-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0; /* per-item margin-top controls spacing instead */
}
/* Mobile visual order: title → lead → image → CTA.
DOM order stays semantic (title, lead, cta, image) for screen readers;
`order` rearranges visually. All four are direct flex children of
__inner; mobile margins live INSIDE each property block so a stray
`margin: 0` shorthand can't wipe them via source-order. */
/* Eyebrow — the real ; the visible headline below it is a
.
Canonical eyebrow convention (cf .tlm-mf__eyebrow, .blog-single-rail__eyebrow):
small, bold, uppercase, pink. order: 0 sits it above the title in the
mobile flex column; margin-bottom carries the eyebrow→title gap (mobile
spacing is per-item margin, __inner has gap: 0). */
/* The eyebrow is the real
; below 1024px (stacked layout) it's
visually hidden but kept in the DOM + a11y tree for SEO. The desktop
grid block restores it. Clip technique, not display:none, so it stays
a crawlable, exposed heading. */
.tlm-service-page-hero__eyebrow {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.tlm-service-page-hero__title {
order: 1;
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-h1-mobile); /* 44 mobile — matches homepage hero */
font-weight: var(--weight-regular);
/* Mobile leading bumped to 1.3 (--leading-snug) — the 1.25 standard
reads dense at 28px on a narrow viewport. Desktop reverts to 1.25
because the bigger H2 carries the tighter leading better. */
line-height: var(--leading-snug);
letter-spacing: var(--tracking-display);
color: var(--color-text-on-light);
text-wrap: balance;
}
.tlm-service-page-hero__visual {
order: 3;
margin: 0;
margin-top: var(--space-md); /* 24 from lead (mobile) */
position: relative;
}
.tlm-service-page-hero__lead {
order: 2;
margin: 0;
margin-top: var(--space-md); /* 24 from title (mobile) */
font-family: var(--font-sans);
font-size: var(--text-base); /* 16 mobile */
line-height: var(--leading-normal); /* 1.5 mobile — matches locked mobile body p standard */
color: var(--color-text-on-light);
/* Stop the browser from auto-hyphenating compound words like
"hands-off" across lines — reads as a typo on narrow viewports. */
hyphens: none;
overflow-wrap: normal;
}
/* Emphasis lede ("Make it count.") — own line + bold across all breakpoints.
Size steps up from the surrounding lead at each breakpoint:
mobile 16 lead → 18 emphasis (--text-lg)
tablet+ 18 lead → 20 emphasis (--text-xl) */
.tlm-service-page-hero__lead-emphasis {
display: block;
margin-bottom: var(--space-md); /* 24 — bigger gap to the rest on mobile */
font-size: var(--text-xl); /* 20 mobile */
font-weight: var(--weight-bold);
}
@media (min-width: 768px) {
.tlm-service-page-hero__lead-emphasis {
margin-bottom: var(--space-sm); /* 16 — desktop sits inline-ish, less gap */
font-size: var(--text-2xl); /* 24 desktop */
}
}
.tlm-service-page-hero__cta {
order: 4;
align-self: stretch; /* full-width on mobile/tablet per locked CTA standard */
margin-top: var(--space-md); /* 24 from lead */
}
.tlm-service-page-hero__visual img {
display: block;
width: 100%;
height: auto;
}
/* --cap-visual: for hero photos taller than the landscape slot
(portrait or near-square sources). Caps the rendered height and
crops with object-fit so a tall image doesn't dominate the hero.
Mobile uses a shorter cap so the image doesn't push the CTA below
the fold; desktop matches the slot min-height. */
.tlm-service-page-hero--cap-visual .tlm-service-page-hero__visual img {
width: 100%;
height: auto;
max-height: 420px;
object-fit: cover;
border-radius: var(--radius-lg);
}
@media (min-width: 1024px) {
.tlm-service-page-hero--cap-visual .tlm-service-page-hero__visual img {
max-height: 580px;
}
/* Capping the height makes a portrait source narrower than the 728px
slot. The base rule right-aligns the visual (justify-content:
flex-end), which leaves a capped image shoved to the far edge.
Centre it in the cell instead so it sits like the wider heroes. */
.tlm-service-page-hero--cap-visual .tlm-service-page-hero__visual {
justify-content: center;
}
}
/* Placeholder visual — navy-tint box at the hero image aspect
(728/618), centred icon. For pages without the asset yet. */
.tlm-service-page-hero__visual--placeholder {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 728 / 618;
border-radius: var(--radius-lg);
background-color: var(--color-navy-tint);
color: var(--color-navy-faint);
}
/* ============================================
* TABLET (>= 768px) — body p bumps; CTA reverts to natural width
* ============================================ */
@media (min-width: 768px) {
.tlm-service-page-hero {
padding-block: 160px var(--space-4xl); /* 80 bottom */
}
.tlm-service-page-hero__lead {
font-size: var(--text-lg); /* 18 */
line-height: var(--leading-relaxed); /* 1.6 */
letter-spacing: var(--tracking-tight);
}
/* CTA stays stretch (full-width) at tablet — Paul's rule:
tablet is "wider mobile", not its own design state. */
}
/* ============================================
* DESKTOP (>= 1024px) — 2-col asymmetric, H1 to full 56px
* ============================================ */
@media (min-width: 1024px) {
.tlm-service-page-hero {
padding-block: 180px var(--space-4xl); /* matches Figma 1440 frame */
}
/* Desktop uses the base rule (right top / auto 100%) — same
treatment as mobile, just naturally larger because the section
is shorter at this breakpoint and image scales to height.
Reset the mobile opacity knock-back so the gradient renders full
intensity at desktop. */
.tlm-service-page-hero__bg {
opacity: 1;
}
/* Desktop uses grid-template-areas so title/lead/CTA stack in the
left column and the visual spans all three rows on the right. */
.tlm-service-page-hero__inner {
display: grid;
grid-template-columns: minmax(0, 514px) 1fr;
grid-template-areas:
"eyebrow visual"
"title visual"
"lead visual"
"cta visual";
column-gap: var(--space-4xl); /* 80 between copy and visual */
row-gap: var(--space-lg); /* 32 between heading/lead/CTA */
align-items: center;
}
/* Reset the mobile margin-tops that were pushing items apart. */
.tlm-service-page-hero__title,
.tlm-service-page-hero__lead,
.tlm-service-page-hero__visual,
.tlm-service-page-hero__cta {
margin-top: 0;
}
/* Eyebrow joins the grid. Negative margin-bottom cancels the grid
row-gap (32) for the eyebrow→title gap specifically, leaving
title→lead→cta at the full 32. */
.tlm-service-page-hero__eyebrow {
/* Un-hide: revert the mobile clip and restore the visible eyebrow. */
position: static;
width: auto;
height: auto;
padding: 0;
border: 0;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
grid-area: eyebrow;
margin: 0 0 calc(-1 * var(--space-lg)) 0;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-pink-stop);
}
.tlm-service-page-hero__title { grid-area: title; font-size: var(--text-h2); line-height: var(--leading-tight); }
.tlm-service-page-hero__lead { grid-area: lead; }
.tlm-service-page-hero__cta { grid-area: cta; align-self: flex-start; justify-self: flex-start; }
.tlm-service-page-hero__visual { grid-area: visual; max-width: 728px; justify-self: end; min-height: 580px; display: flex; align-items: center; justify-content: flex-end; }
/* Min-height matches Website hero's rendered visual (728×618 → ~582px
in column). Forces the visual cell to stretch the grid rows the
same way regardless of source image aspect, so the title→lede gap
is consistent across every hero. Wider/shorter images sit centred
vertically inside the cell. */
/* Text-only hero — capability pages with no hero image. Single
column, no empty visual track; copy width lifts so it doesn't
read as a stranded half-row. */
.tlm-service-page-hero--text-only .tlm-service-page-hero__inner {
grid-template-columns: minmax(0, 760px);
grid-template-areas:
"eyebrow"
"title"
"lead"
"cta";
column-gap: 0;
}
/* --wide-visual variant: for hero images authored at a landscape
aspect (wider than the default 728/618). Visual column grows +
max-width lifts so the image reads at meaningful size. Copy column
stays wide enough that a ~38-char H1 still breaks to 2 lines. */
.tlm-service-page-hero--wide-visual .tlm-service-page-hero__inner {
grid-template-columns: minmax(0, 520px) 1fr;
}
.tlm-service-page-hero--wide-visual .tlm-service-page-hero__visual {
max-width: 1000px;
}
}