/* ========================================================================= Services (/services/, page-id-8) - desktop retrofit against the Agentis design export. Measured 2026-08-06 with staging and .../designs/v1-original/services/index.html both at innerWidth 1512. Per the standing ruling (Christine 2026-08-05, "please follow font sizing of Agentis design", widened by Matt to all typography and geometry) the export wins wherever it disagrees with the superseded @1440 Figma frames. BugZap #118 / #119 / #120 / #121 / #122. SPECIFICITY NOTE - read before editing. The "TYPE SYSTEM v2" block in figma-mobile-v4.css:1405 sets .content-list__heading, ..., section h2:not(.h2-deck):not(.content-list__deck) with !important. That last selector is (0,2,2), so a (0,2,0) override - even an !important one - loses. Every heading rule below therefore carries a third class (.content-list) to reach (0,3,0). The same trap already ate the older `.content-list--flush-top .content-list__heading` (36px) and `.content-list--imgfit-contain .content-list__heading` (40px) steps in figma-desktop-shared.css:274/305 - both are dead code, superseded by the type system, which is why the rows rendered at 52px. This file is enqueued with the rest of the figma layer, i.e. BEFORE the block stylesheets, so every rule here also has to out-specify the block CSS rather than rely on source order. ========================================================================= */ @media (min-width: 992px) { /* ---- #118 + #121 ------------------------------------------------------ "these need to be h3 (i believe)" / "header smaller". All five content-list rows on /services/ render their row heading with the H2 Section role (52/62). The export renders all five with the H3 Card role (32/40, ls -0.32px) - it emits

. Switching to the existing --h3-card-* tokens reproduces the export exactly; the type system's own letter-spacing: -0.01em resolves to the export's -0.32px at 32px, so it is deliberately left alone. NOTE: this changes the rendered SIZE, not the tag. The rows are still

in blocks/content-list/content-list.php. Promoting them to

needs either an editor-side className on all five blocks or a new block modifier - see the hand-off note, it is a markup decision, not a CSS one. ---------------------------------------------------------------------- */ .page-id-8 .content-list .content-list__heading { font-size: var(--h3-card-size) !important; /* 32px */ line-height: var(--h3-card-lh) !important; /* 40px */ } /* #118 "bigger gap between header and paragraph". blocks/content-list/content-list.css:142 pulls both of these adjacencies up by -1rem to fake a 16px inner gap. The export carries no negative margin at all and lets the flex column gap do the work. */ .page-id-8 .content-list .content-list__eyebrow + .content-list__heading, .page-id-8 .content-list .content-list__heading + .content-list__intro { margin-top: 0 !important; /* audit A1: mobile-v4's eyebrow-gap group is (0,2,0)!important and loads later - unimportant (0,3,0) loses */ } /* #118 "bullets smaller". Ours inherits 24px/1.5 w400 from figma-desktop-shared.css:294; the export runs 17px/1.6 w300. */ .page-id-8 .content-list .content-list__item { font-size: 1.0625rem; /* 17px */ line-height: 1.6; /* 27.2px */ font-weight: 300; } /* ---- #119 ------------------------------------------------------------ "This is a different header on Agentis design" - the content-features head. Column math, export: heading 124 + title gap 24 + text 54 = 202. Ours ran 124 + 24 + 16 + 27 = 191 because the text sat on one 814px-wide line with a 16px top margin. __title's own gap is already the export's 24px - do not touch it. The 16px comes from the selector group at blocks/content-features/content-features.css:527-530, whose `.content-features--icon-beside .content-features__title .content-features__text` arm is (0,3,0) - hence the four-class chain. */ .page-id-8 .content-features--icon-beside .content-features__title .content-features__text { margin-top: 0 !important; /* audit A3: eyebrow-only heads hit mobile-v4's (0,2,0)!important eyebrow-gap rule */ max-width: 720px; margin-inline: auto; } } /* ========================================================================= BugZap #57/#58/#66/#67 (+ two divergences) - validated against the new Agentis design preview 2026-08-07, staging and export at equal innerWidth. Section heights after this block match the export exactly: 190 / 629 / 629 / 1219 / 252 / 438 / 398 / 398 / ~532. ========================================================================= */ @media (min-width: 992px) { /* #57/#58: Part One / Part Two rows - eyebrow-to-heading gap ran 32, the export runs 8 (ey 112 -> H3 136 -> intro 184). Gold-line bullets and the 17/300 list type already matched (#48). */ .page-id-8 .content-list--flush-top .content-list__heading { margin-top: 0 !important; } /* #66: the export renders the three Focus Area rows TEXT-ONLY - no media column at all - with the content column at 800. The type inside (H3 32/40, intro 19/30 + 17/27) already matched; our 400x460 contain-fit images were the entire 684-vs-438/398/398 divergence. */ /* (#66 removed the media column to match the export; BugZap #140 2026-08-08 established the export's missing images were BROKEN assets, not design intent - images restored, ticket wins over export.) */ .page-id-8 .content-list--row-tight .content-list__content { max-width: 800px !important; } /* #67 + the "two-part approach" band: the classless free-form sections. Copy runs 17/1.6/300 in the export (ours ran 16/24/400); the Partner With Us button is the gold pill (14.4/36 padding, 999 radius, 15.2/700) rather than our small square; the H2-only band pads 16 under the heading, not 50. */ .page-id-8 section:not([class]) p { font-size: 1.0625rem !important; line-height: 1.6 !important; font-weight: 300 !important; } /* BugZap #157. Christine: "I want the fonts to match the styling of the teal testimonial from the focus page. do not reference lovable for this." The Services testimonial is not the testimonial block at all - it is free-form pasted content sitting in one of these classless bands, which is why it looked nothing like the real thing. Measured against the teal card on /focus-areas/business/ (.testimonial-bento__card): its quote runs 36px / 700 / Hoefler Text / 43.2px line-height. The Services quote was being swept up by the generic band rule above at 17px / 300, even though the author had already marked it as the serif face inline. Only the QUOTE differs. The attribution lines underneath already measure 17/300/Barlow on both pages, which is why this rule is deliberately narrow rather than restyling the whole band. Colour is left alone too - she asked for the fonts to match, and this band is navy-on-white by design where the focus card is white-on-teal. Hooked on the inline serif marker rather than DOM position: the paragraph carries its own font-family inline, so `p[style*="Hoefler"]` is the author's own signal that this is the pull quote. Verified it matches exactly one element on the page and that element is the quote. The positional alternative (`div > div > div:last-child > p`) also matched uniquely but breaks the moment the band is re-laid-out in the editor. Specificity (0,3,2) beats the band rule's (0,2,2). */ .page-id-8 section:not([class]) p[style*="Hoefler"] { font-size: 2.25rem !important; /* 36px, the focus card's quote */ line-height: 1.2 !important; /* 43.2px */ /* 400, not 700. This was briefly 700 because that is what the focus card measured at the time - but that 700 was itself the bug (see the note on .testimonial-bento__quote > p:first-child in figma-business-leadership-desktop.css). Both moved to 400 in the same commit so the two stay matched, which is the whole point of #157. */ font-weight: 400 !important; } .page-id-8 section:not([class]) a { font-size: 0.95rem !important; line-height: 1.5 !important; padding: 14.4px 36px !important; border-radius: 999px !important; margin-top: 12px !important; } .page-id-8 section:not([class]):not(:has(p)) > div { padding-bottom: 16px !important; } /* Divergence (same fix as #94 on insights): the four core-services card paragraphs run 300 weight in the export. */ .page-id-8 .content-features__item-text p { font-weight: 300 !important; } }