/** * Service-page design tokens (v2 refresh — 2026-05-05) * * Activated via `body.is-service-page` class, applied by * ig_blocks_service_page_body_class() to any singular page that contains * an `ig-blocks/service-hero` block. * * What this file owns (and why it's centralized rather than per-block): * 1. Continuous body-wide aurora background. Per-section gradients used * to terminate at module boundaries — readable as separate "panels." * v2 unifies the page into one canvas and lets sections sit * transparently over it. * 2. Section transparency overrides for blocks whose default background * is white. We don't change the block's own SCSS (those blocks are * shared with industry pages where a white background is correct). * 3. Typography readability caps (h2/p max-width). * 4. Refreshed brand tokens — overline colors, .btn-primary feel. * * Dark blocks (service-hero, closing-cta) overlay their own solid bg on * top of the body aurora — no override needed. * * Slate sections (methodology, experts in v2) get a fade-in/out gradient * band so the slate zone reads as one continuous chapter rather than a * hard module boundary. */ /* ────────────────────────────────────────────────────────────────── 1. Continuous body aurora + brand typography baseline Body font is Poppins (loaded via the service-page-poppins enqueue). Headlines fall through Trenda IG Text → Poppins → sans-serif. The theme's default sans (twentytwentyfive uses Manrope) would otherwise bleed into any element our block-scoped CSS doesn't explicitly cover. ────────────────────────────────────────────────────────────────── */ body.is-service-page { /* Brand gradient tokens — referenced by individual block stylesheets and by core/html sections via inline `var(--primary-gradient*)`. Values come from staffing-services.html prototype lines 123-124. --primary-gradient is for light section bgs (em text-clip, stat numbers); --primary-gradient-dark is the brighter variant used on dark sections where the text needs to read against deep colors. */ --primary-gradient: linear-gradient(90deg, #E80069 17.857%, #E91E00 110.69%); --primary-gradient-dark: linear-gradient(90deg, #FF0069 17.857%, #FF4400 110.69%); font-family: 'Poppins', system-ui, -apple-system, sans-serif; /* WP twentytwentyfive (and likely production IG theme too) emits an inline `body { font-weight: 300 }` via global-styles-inline-css. That weight cascades into every paragraph that doesn't explicitly set its own font-weight — block CSS rarely does. Result: body copy reads as Poppins Light instead of the prototype's Poppins Regular. Pin to 400 here so paragraph defaults inherit the correct weight. */ font-weight: 400; background: radial-gradient(900px 500px at 92% 22%, rgba(229, 0, 105, 0.05), transparent 65%), radial-gradient(720px 460px at 5% 32%, rgba(53, 0, 245, 0.05), transparent 60%), radial-gradient(820px 520px at 92% 42%, rgba(229, 0, 105, 0.04), transparent 65%), radial-gradient(680px 580px at 92% 52%, rgba(229, 0, 105, 0.10), transparent 70%), radial-gradient(700px 480px at 8% 78%, rgba(53, 0, 245, 0.04), transparent 65%), #ffffff; } /* H2 typography on service pages — Poppins Regular (400), NOT Trenda. Prototype intent: the global `h2` rule sets font-weight 400 and inherits font-family from `body { 'Poppins' }`. Block CSS in v1 used "Trenda IG Text" + font-weight 600/700 across all section h2s with nested selectors (e.g. .wp-block-ig-blocks-methodology .meth-header h2) that out-specificity any non-!important override. Using !important here is intentional — this rule IS the design system declaration: on service pages, section headlines are Poppins 400. Service-hero stays in Trenda (it's the page's display moment, h1 not h2); every other section h2 is Poppins 400. Scoped under body.is-service-page so industry pages — which DO use Trenda for h2 in some templates — are unaffected. */ body.is-service-page section h2 { font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; font-size: 32px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } /* Theme `h1, h2, h3 { text-transform: capitalize }` was leaking into every block heading on service pages (service-hero had its own reset; every other block did not). Source HTML is sentence case throughout. !important needed to beat the theme's specificity. */ body.is-service-page h1, body.is-service-page h2, body.is-service-page h3, body.is-service-page h4, body.is-service-page h5, body.is-service-page h6 { text-transform: none !important; } /* Mobile keeps the same 32px (prototype is viewport-agnostic — no responsive scaling on the global h2 rule) but bumps the line-height slightly so wrapped headlines breathe on narrow viewports. */ @media (max-width: 600px) { body.is-service-page section h2 { font-size: 28px !important; line-height: 1.25 !important; } } /* ────────────────────────────────────────────────────────────────── 2. Section transparency (let body aurora show through) Targets the block-level wrappers. Blocks whose CSS lives in their own style.scss are unchanged — these rules are pure overrides scoped under .is-service-page so they only apply on service pages. Dark blocks omitted: service-hero, closing-cta keep their own solid bg. Slate blocks get a fade band instead of transparent (see §3 below). ────────────────────────────────────────────────────────────────── */ body.is-service-page .wp-block-ig-blocks-faq, body.is-service-page .wp-block-ig-blocks-insights-grid, body.is-service-page .wp-block-ig-blocks-stage-selector, body.is-service-page .wp-block-ig-blocks-industry-landscape, body.is-service-page .wp-block-ig-blocks-scale-stages, body.is-service-page .svc-cs, /* HTML module: featured-case-study */ body.is-service-page .svc-people { /* HTML module: delivery-team */ background: transparent; } /* Section pseudo-element auroras (legacy per-section glows) — disable on service pages so the body aurora is the single source of glow. Specific selectors only; we don't want to nuke ::before on every nested element in those blocks. */ body.is-service-page .wp-block-ig-blocks-stage-selector::before, body.is-service-page .wp-block-ig-blocks-stage-selector::after { content: none; } /* ────────────────────────────────────────────────────────────────── 3. Slate fade-in/out band (methodology, experts) Solid #E8E9EC reads as a hard module boundary. v2 fades transparent → #EEF1F5 → transparent so the slate zone reads as one continuous chapter visually anchored by the section but not boxed by it. ────────────────────────────────────────────────────────────────── */ body.is-service-page .wp-block-ig-blocks-methodology, body.is-service-page .svc-people { background: linear-gradient( to bottom, transparent 0, #EEF1F5 140px, #EEF1F5 calc(100% - 140px), transparent 100% ); } /* ────────────────────────────────────────────────────────────────── 4. Typography readability caps h2 + p capped at 700px so long lines wrap into a comfortable measure regardless of container width. Caps are scoped to section roots (not to nested headings/paragraphs inside cards/grids) so block-internal layouts still control their own widths. ────────────────────────────────────────────────────────────────── */ body.is-service-page section > .ctr > h2, body.is-service-page section > .ctr > p, body.is-service-page section > .svc-cta-ctr > h2, body.is-service-page section > .svc-cta-ctr > p, body.is-service-page section > h2, body.is-service-page section > p, body.is-service-page .wp-block-ig-blocks-faq > .ctr > h2, body.is-service-page .wp-block-ig-blocks-faq > .ctr > p { max-width: 700px; } /* Centered headings get their cap centered, not left-aligned */ body.is-service-page section[class*="text-align-center"] > .ctr > h2, body.is-service-page .wp-block-ig-blocks-faq h2, body.is-service-page .wp-block-ig-blocks-faq > .ctr > p { margin-left: auto; margin-right: auto; } /* ────────────────────────────────────────────────────────────────── 5. Brand token overrides v2 shifts overlines from saturated brand colors to neutral grays (the headlines + accents do the brand-color work; overlines step back to provide contrast). ────────────────────────────────────────────────────────────────── */ body.is-service-page .overline-dark, body.is-service-page .wp-block-ig-blocks-closing-cta .cta-overline { color: #B3B3B3; } body.is-service-page .overline-light { color: #595959; } /* Methodology section's "HOW WE DELIVER" overline is colored via $meth-accent (purple #4527a0) at the block level — that pairing makes sense on industry pages but reads as off-brand "shaded" on service pages where overlines are uniformly neutral gray. */ body.is-service-page .wp-block-ig-blocks-methodology .meth-header .overline { color: #595959; } /* ────────────────────────────────────────────────────────────────── 6. Primary CTA refresh The cross-block "primary CTA" pattern (anywhere a gradient pill button appears) gets a unified touch-up: - Tighter padding (32 → 28) - Letter-spacing nudge for kerning at the new size - Stronger drop shadow on the label (improves legibility on the gradient bg) - Hover model shifts from translateY to opacity:0.9 — softer, less "kinetic" than v1 ────────────────────────────────────────────────────────────────── */ /* .ana-cta excluded from this padding ruleset — the anchor-nav pill is 36px tall and lives in a tighter sticky nav context, where 28px side padding made the "Contact us" pill noticeably wider than necessary. The anchor-nav block ships its own 12px padding that fits the pill. */ body.is-service-page .cta-btn-primary, body.is-service-page .btn-primary, body.is-service-page .si-cta { padding-left: 28px; padding-right: 28px; letter-spacing: 0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); transition: all 0.2s; white-space: nowrap; } body.is-service-page .cta-btn-primary:hover, body.is-service-page .btn-primary:hover, body.is-service-page .si-cta:hover, body.is-service-page .ana-cta:hover { transform: none; box-shadow: none; opacity: 0.9; } /* ────────────────────────────────────────────────────────────────── 7. Closing CTA — drop gradient text on em v2 shifts the headline em treatment to plain white (was gradient text-clip in v1). Keeps the headline emphasis without competing with the body aurora's pink notes for the eye's first read. ────────────────────────────────────────────────────────────────── */ body.is-service-page .wp-block-ig-blocks-closing-cta h2 em { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; background-clip: initial; color: #ffffff; } body.is-service-page .wp-block-ig-blocks-closing-cta { background: #2a2a2a; } /* ────────────────────────────────────────────────────────────────── 8. Methodology slate padding tweak v1: padding 100px 0 88px (asymmetric). v2: 100px 0 (symmetric, plays nicer with the fade-band gradient). ────────────────────────────────────────────────────────────────── */ body.is-service-page .wp-block-ig-blocks-methodology { padding-top: 100px; padding-bottom: 100px; } /* ────────────────────────────────────────────────────────────────── 9. Magenta gradient on h2 (default treatment) Prototype consistently treats the emphasized phrase in section h2s as the pink→orange brand gradient via background-clip:text. v1 of the blocks didn't bake this in — most rendered em as flat near-black (industry-landscape, industries-list, case-study) or as transparent without the gradient backing (insights-grid, faq). This rule is the default for any section h2 em on service pages. Block-specific overrides win via specificity: - closing-cta keeps white em (§7 above) - service-hero h1 em is untouched (selector targets h2, not h1) ────────────────────────────────────────────────────────────────── */ body.is-service-page section h2 em { background: linear-gradient(90deg, #DF0069 0%, #FF4000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: italic; font-weight: 400; display: inline-block; padding-right: 0.08em; } /* ────────────────────────────────────────────────────────────────── 10. Anchor color reset within sections Theme defines `a { color: rgb(0,97,243) }` (link blue) and adds an underline on :hover. Block-internal anchors should take their color from their parent (industries-list rows use `.ind-name` near-black; insights cards use card body color; etc.). CTAs that set their own color (.btn-primary, .case-cta a, etc.) win via specificity. ────────────────────────────────────────────────────────────────── */ body.is-service-page section a { color: inherit; text-decoration: none; } /* ────────────────────────────────────────────────────────────────── 11. .ctr centering safety net ig-blocks block stylesheets define `.ctr` scoped under their own block class with `margin: 0 auto`. core/html sections (e.g. the staffing "Why this works" soul block) reference `.ctr` in their inline styles but rely on a global `.ctr { margin: 0 auto }` that the theme doesn't provide — leaving them anchored at viewport x=0. Per-block `.ctr` rules out-specify this so existing block layouts are unaffected; this only catches the orphan core/html cases. ────────────────────────────────────────────────────────────────── */ body.is-service-page .ctr { margin-left: auto; margin-right: auto; } /* ────────────────────────────────────────────────────────────────── 12. Primary site header — static on service pages The IG theme's primary header (#ig-main-site-header-v2) defaults to position:fixed with z-index:999 and a `scrolling-nav` class that keeps it pinned to the viewport. That fights with the prototype's pattern (theme header scrolls away once you're past the hero, then the page's own anchor-nav slides down into the freed space). Force the header to static so it scrolls away naturally. The theme JS that adds .scrolling-nav can still run — the CSS override wins. ────────────────────────────────────────────────────────────────── */ body.is-service-page #ig-main-site-header-v2, body.is-service-page #ig-main-site-header-v2.scrolling-nav { position: static !important; top: auto !important; } /* Theme's `.scrolling-nav::after` pseudo-element is a 10px-tall horizontal accent the theme paints as a visual indicator that the header is in "scrolling" mode. With our static-header override the pseudo still paints, but its absolute positioning lands it on the trust section below the hero — reading as a "strange line" across Why Insight Global. Mobile CSS already suppresses .scrolling-nav so the line never appeared there. Kill the pseudo-element entirely on service pages. */ body.is-service-page #ig-main-site-header-v2::after, body.is-service-page #ig-main-site-header-v2.scrolling-nav::after, body.is-service-page #ig-main-site-header-v2::before, body.is-service-page #ig-main-site-header-v2.scrolling-nav::before { display: none !important; content: none !important; } /* ────────────────────────────────────────────────────────────────── 14. Stepper visual override — match service-page lifecycle design The stepper block defaults to large pink-filled 64px circles on a thick horizontal bar. Service-page lifecycle pattern (per RPO and future service prototypes) is editorial: small white circles with a pink border, pink number text, sitting on a thin 2px gradient rail. Text centered below each step, max ~200px measure. Scoped to body.is-service-page so industry pages keep the original. ────────────────────────────────────────────────────────────────── */ body.is-service-page .wp-block-ig-blocks-stepper { gap: 0 !important; padding: 0 12px; max-width: 1320px; margin: 0 auto 56px; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; align-items: start; position: relative; } /* Thin gradient rail running behind the numbered circles. The block's own .wp-block-ig-blocks-stepper-bar div is repurposed: shrink height to 2px, swap fill for the brand gradient, position so it sits at the vertical center of the circles. */ body.is-service-page .wp-block-ig-blocks-stepper-bar { position: absolute !important; top: 18px !important; left: 12% !important; right: 12% !important; width: auto !important; height: 2px !important; transform: none !important; background: linear-gradient(90deg, rgba(232, 0, 105, 0.18) 0%, rgba(232, 0, 105, 0.45) 50%, rgba(0, 214, 242, 0.35) 100%) !important; z-index: 0; } body.is-service-page .wp-block-ig-blocks-stepper-item { position: relative; z-index: 1; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; padding: 0 12px; max-width: none !important; gap: 0; } /* White circle with pink border + pink number — exact source spec. */ body.is-service-page .wp-block-ig-blocks-stepper-item-number { width: 38px !important; height: 38px !important; background: #fff !important; border: 2px solid #E80069 !important; color: #E80069 !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; margin-bottom: 18px; box-shadow: 0 4px 12px rgba(232, 0, 105, 0.18); display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; flex-shrink: 0; } body.is-service-page .wp-block-ig-blocks-stepper-item-content { width: auto !important; max-width: 200px; } body.is-service-page .wp-block-ig-blocks-stepper-item-content h3 { font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #0d0d0d !important; letter-spacing: -0.005em !important; margin: 0 0 8px !important; } body.is-service-page .wp-block-ig-blocks-stepper-item-content p { font-size: 14px !important; color: #595959 !important; line-height: 1.55 !important; margin: 0 !important; } /* Responsive: collapse to vertical at narrow widths */ @media (max-width: 1024px) { body.is-service-page .wp-block-ig-blocks-stepper { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 16px !important; padding: 0; } body.is-service-page .wp-block-ig-blocks-stepper-bar { display: none !important; } body.is-service-page .wp-block-ig-blocks-stepper-item { align-items: flex-start !important; text-align: left; } body.is-service-page .wp-block-ig-blocks-stepper-item-content { max-width: none; } } @media (max-width: 600px) { body.is-service-page .wp-block-ig-blocks-stepper { grid-template-columns: 1fr !important; gap: 28px !important; } } /* ────────────────────────────────────────────────────────────────── 15. Suppress theme's global `button:focus` + `button:hover` shadow The IG theme (css/style.css) declares a stacked box-shadow on `button:focus` (rgb(0,214,242) cyan + rgb(0,40,60) navy inset + white spacer) intended as a focus indicator for header nav CTAs. The selector is broad — fires on every