/* ========================================================================== About — Founded on Integrity (neilkelly/about-design-build) Figma: About / Design Build Done Right (4721:92), desktop frame 1449x1227 Desktop is 1:1 with the frame; the breakpoints below layer on top of it. Measured values, all mapped to tokens in settings.custom.components.about: image x=0 w=678 h=846 — flush to the LEFT viewport edge, square text col x=748 w=607 — top-aligned with the image, not centred heading 50/800 lh 53.3 ls -1.02, wraps inside 535px body 30/400 lh 42.6 (1.42) ls -0.57 The pull quote that follows this section is neilkelly/project-testimonial, not markup owned here. ========================================================================== */ .nk-about-founded { /* WP core gives blocks a 24px margin-block-start; these are full-bleed panels that must butt against their neighbours. */ margin: 0; --nk-about-founded-image-col: var(--wp--custom--components--about--founded-image-col); /* Floor for the photograph, which otherwise takes its height from the copy column (see __media). Per-page, so Why can set its own. Replaces a --nk-about-founded-image-aspect var that pointed at a token removed when the media switched from a fixed aspect to this stretch-with-floor model. */ --nk-about-founded-image-min-height: var(--wp--custom--components--about--founded-image-min-height); --nk-about-founded-image-radius: 0; --nk-about-founded-heading-size: var(--wp--preset--font-size--xxl); --nk-about-founded-copy-size: var(--wp--preset--font-size--lg); /* A var rather than the token inline, because para-extra below has to resolve the same leading — deriving the blank-line gap from a second copy of the figure is how the two drift apart. This is About's value; is-why-geometry overrides it. */ --nk-about-founded-copy-leading: var(--wp--custom--line-height--md-tight); --nk-about-founded-copy-width: var(--wp--custom--components--about--founded-copy-width); --nk-about-founded-column-gap: var(--wp--preset--spacing--gutter); --nk-about-founded-body-gap: var(--wp--preset--spacing--6); --nk-about-founded-pad-bottom: 0px; /* Figma separates the paragraphs by a blank line, so the separation is one line of body copy. Derived from the line-height token rather than a measured figure, so the two can't drift — the device .nk-person-philosophy__body uses. It replaces a 42.6px measurement taken against the old 30px type, which at 25px read too open. `1em` resolves where the var is USED (on __copy), not here, so it is one line of the copy's own size. Minus the stack gap, because the paragraphs sit in a flex column that already separates them by that much. */ --nk-about-founded-para-extra: calc( ( var(--nk-about-founded-copy-leading) * 1em ) - var(--nk-about-founded-body-gap) ); box-sizing: border-box; width: 100%; /* On About there is no trailing padding: the pull quote that follows is a neilkelly/project-testimonial and supplies its own 90px. Why closes the section itself and opts in via is-why-geometry. */ padding-block: var(--wp--custom--components--about--founded-pad-top) var(--nk-about-founded-pad-bottom); background-color: var(--wp--preset--color--brand-white); font-family: var(--wp--preset--font-family--inter); } /* …unless the quote isn't there. It became a smart section on 2026-08-12 and now renders nothing when its quote field is empty, which would leave this band butting straight into the next one with no gap at all. Only then does this section pay for its own trailing space — using the token the quote itself uses, so the gap is identical either way. A no-op while the quote is authored. */ .nk-about-founded:not( :has( + .wp-block-neilkelly-project-testimonial ) ) { padding-bottom: var(--wp--preset--spacing--22-5); } /* ---------- Image + copy ---------- The image column is flush to the viewport edge, so this row carries no left padding — the inline gutter lives on the text column instead. */ .nk-about-founded__split { display: grid; grid-template-columns: var(--nk-about-founded-image-col) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--gutter); /* stretch, not start: the photograph's height follows the copy column (see __media). The copy reads top-aligned with the image, because __body is a column flex whose content starts at its top edge — unless is-centered-copy is on. */ align-items: stretch; } /* Height follows the copy column via the row's align-items: stretch, with a floor so short copy can't crop the photograph below its Figma height (846px at 1440). The image is absolute, so it never inflates the row — the same arrangement service-process uses for its media column. This matters now that the copy is authored in the CMS: at a fixed aspect-ratio, any copy longer or shorter than the Generation wording left the two columns ending on different lines. */ .nk-about-founded__media { margin: 0; position: relative; min-height: var(--nk-about-founded-image-min-height); overflow: hidden; } .nk-about-founded__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .nk-about-founded__body { display: flex; flex-direction: column; /* Figma's 12px is measured between text-BOX edges, and its heading box runs ~21px taller than the two rendered lines; the optical gap is ~33px. 24px matches One Team, which is the same heading-over-body relationship. */ gap: var(--nk-about-founded-body-gap); max-width: var(--nk-about-founded-copy-width); padding-right: var(--wp--preset--spacing--gutter); } .nk-about-founded__heading { margin: 0; max-width: var(--wp--custom--components--about--founded-heading-width); font-size: var(--nk-about-founded-heading-size); font-weight: var(--wp--custom--font-weight--extrabold); line-height: var(--wp--custom--line-height--xxl); letter-spacing: var(--wp--custom--letter-spacing--neg-102); text-transform: uppercase; color: var(--wp--preset--color--surface-footer); } /* Lede — the claim between heading and body. Figma 4915:1740: 24px semibold at 70% black, sitting in the column's own stack gap. Mixed against the section's white background rather than set as an alpha, so the text renders on an opaque colour. About's design has no such line, so nothing prints there (see render.php). */ .nk-about-founded__lede { margin: 0; font-size: var(--wp--custom--components--why--designbuild-lede-size); font-weight: var(--wp--custom--font-weight--semibold); line-height: var(--wp--custom--line-height--none); color: color-mix( in srgb, var(--wp--preset--color--brand-black) 70%, var(--wp--preset--color--brand-white) ); } /* Font style (size / weight / line-height) is kept in sync with .nk-person-philosophy__body, .nk-location-brand__body, .nk-about-one-team__copy and .nk-why-intro__body — all five are the same large-prose treatment and share one set of tokens. CHANGE ALL FIVE TOGETHER (each of those carries the same note; the Why intro joined on 2026-08-13). The sync covers the About instance, which is what this base rule is. The Why instance leaves it on the line-height only — see is-why-geometry below. Brought onto that treatment 2026-08-12 at Shawn's request. It was 30px (lg-xl) with a 1.42 line-height and a -0.57px track, both tuned to 30px type; at 25px the design sets neither, so the tracking is dropped rather than kept as a scaled-down version of a different size's — the reasoning is-why-geometry already applies at 18px, below. One size at every width, like the treatment it now matches: the old lg tablet step equalled the new base and the md mobile step would have dropped BELOW it. Colour is deliberately NOT synced. Those two sit on white and this sits on surface-footer; the shared treatment is typographic, not chromatic. */ .nk-about-founded__copy { margin: 0; /* Through the var, NOT the token directly: is-why-geometry insulates the Why page by overriding this var (18px there), and reading the token here would bypass it. */ font-size: var(--nk-about-founded-copy-size); font-weight: var(--wp--custom--font-weight--regular); line-height: var(--nk-about-founded-copy-leading); color: var(--wp--preset--color--surface-footer); } .nk-about-founded__copy + .nk-about-founded__copy { margin-top: var(--nk-about-founded-para-extra); } /* -------------------------------------------------------------------------- Modifier: is-why-geometry Why / The Solution (4915:1733) is this same section at different proportions: a wider photograph (794 of 1440), a narrower copy column (485), an 18px body instead of About's 30px, a 32px stack, and the section closing its own space rather than handing off to a pull quote. Its paragraph separation is one blank 18px line, so para-extra tops the stack gap DOWN to 18 rather than up. The tokens for all of this were already in theme.json under components.why; nothing consumed them, so the Why instance was rendering in About's proportions. Opt-in via className, so About is untouched. -------------------------------------------------------------------------- */ .nk-about-founded.is-why-geometry { --nk-about-founded-image-col: var(--wp--custom--components--why--designbuild-image-col); --nk-about-founded-image-min-height: var(--wp--custom--components--why--designbuild-image-min-height); --nk-about-founded-copy-size: var(--wp--preset--font-size--md-base); /* Why alone leaves the five-way line-height sync (2026-08-13). base (1.5) matches .nk-why-warranty__body, the 18px body directly below it on this page — at the same size the two read as different treatments otherwise. Figma sets this paragraph's leading to auto (4915:1741), so no frame value is being contradicted. Scoped to the modifier on purpose: About has no such neighbour and stays on md-tight with its four siblings. Deliberate divergence — don't "simplify" it back into the base rule. */ --nk-about-founded-copy-leading: var(--wp--custom--line-height--base); --nk-about-founded-copy-width: var(--wp--custom--components--why--designbuild-copy-width); --nk-about-founded-body-gap: var(--wp--preset--spacing--8); --nk-about-founded-para-extra: calc( var(--wp--preset--spacing--4-5) - var(--nk-about-founded-body-gap) ); padding-block: var(--wp--custom--components--why--designbuild-pad-block); } /* The letter-spacing override that used to sit here is gone: About's body moved onto the shared large-prose treatment (no tracking) on 2026-08-12, so this modifier was restating the base on that property. Size and line-height still differ here — 18px and base — both set through the vars above. */ /* -------------------------------------------------------------------------- Modifier: is-process Our Process / The First Conversation (6272:709) is this same section at a third set of proportions: a 580 photograph inset 36 from the top of the band rather than filling its height, a 16px body on a 22 leading, and a numbered display heading. The band's height comes from the photograph (36 + 420 + 35 = 491), not from the copy, so this instance pays no block padding. Opt-in via className. About and Why pass neither this nor is-media-right, so both keep the geometry they shipped with. -------------------------------------------------------------------------- */ .nk-about-founded.is-process { --nk-about-founded-image-col: var(--wp--custom--components--process-page--conv-image-col); /* 18px, the same --nk-process-intro-copy-size the bands between these two run. */ --nk-about-founded-copy-size: var(--wp--preset--font-size--md-base); --nk-about-founded-column-gap: var(--wp--custom--components--process-page--conv-column-gap); /* 23 under the heading, 24 between the paragraphs — the design's own two values, not one rounded gap. */ --nk-about-founded-body-gap: var(--wp--custom--components--process-page--conv-body-gap); --nk-about-founded-para-extra: var(--wp--custom--components--process-page--conv-para-extra); padding-block: 0; } .nk-about-founded.is-process .nk-about-founded__split { column-gap: var(--nk-about-founded-column-gap); /* The photograph is a fixed block inset into the band, not a column stretched to the copy's height — so the row starts its children rather than stretching them. */ align-items: start; } /* Guarded: stacked, the figure has to hug its photograph. This fixed height and the band insets are desktop geometry, and unguarded they outranked the mobile rules (0,2,0) against (0,1,0) — the image runs at aspect-ratio 4/3 there, so a 500px-wide band drew a 375px photo inside a 420px box and left the difference as dead space under it. */ @media (min-width: 768px) { .nk-about-founded.is-process .nk-about-founded__media { min-height: 0; height: var(--wp--custom--components--process-page--conv-image-height); margin-block: var(--wp--custom--components--process-page--conv-media-inset) var(--wp--custom--components--process-page--conv-media-inset-end); } } /* The copy column indents to sit under the heading TEXT, not under the number. border-box because Figma's 599 is the whole column INCLUDING that indent — the paragraphs inside it measure 521. */ .nk-about-founded.is-process .nk-about-founded__body { box-sizing: border-box; max-width: var(--wp--custom--components--process-page--conv-body-width); padding-inline: var(--wp--custom--components--process-page--conv-body-indent) 0; } /* COPY CENTRED AGAINST THE PHOTOGRAPH, both Our Process instances (Artiom, 2026-08-21). align-self on the item, not the block's is-centered-copy modifier: that one is justify-content:center, which needs a box the row has stretched — and .is-process sets align-items:start on __split so the photograph can sit as a fixed inset block. The body is therefore content-height here, and only centring the box itself moves it. This replaces section 2's 48 top drop (conv-copy-top, removed above) — the drop was how that frame pushed the copy down; centring is now what positions it. A no-op on mobile, where the grid collapses to one column per row. */ .nk-about-founded.is-process .nk-about-founded__body { align-self: center; } /* Breathing room above and below the copy, desktop and tablet only. Guarded because the stacked layout already separates the copy from the photograph with the split's row-gap, and adding it there would just deepen that gap. */ @media (min-width: 768px) { .nk-about-founded.is-process .nk-about-founded__body { padding-block: var(--wp--preset--spacing--6); } } .nk-about-founded.is-process .nk-about-founded__heading { box-sizing: border-box; /* Pulled back out of the body's indent: the heading owns the number's gutter itself (via .nk-numbered) and measures 510 including it. */ margin-inline-start: calc( -1 * var(--wp--custom--components--process-page--conv-body-indent) ); max-width: var(--wp--custom--components--process-page--conv-heading-width); line-height: var(--wp--custom--line-height--xl-tight); } /* Body copy matches nk-process-intro's on this page — the two sit alternating down the Our Process spine, and at 16/1.375 against 18/1.667 they read as two different voices. Same three values the process-intro paragraphs use (including the ones its WYSIWYG emits): 18px, relaxed leading, 60% black rather than 50%. The size steps to 16 at the mobile breakpoint below, which is what process-intro does too. Kept on .is-process, so About and Why keep the 25px/md-tight treatment they shipped with — this is a page-level harmonisation, not a change to the block's default. */ .nk-about-founded.is-process .nk-about-founded__copy { line-height: var(--wp--custom--line-height--relaxed); letter-spacing: var(--wp--custom--letter-spacing--normal); color: color-mix( in srgb, var(--wp--preset--color--surface-footer) 60%, var(--wp--preset--color--brand-white) ); } /* -------------------------------------------------------------------------- Modifier: is-media-right We Come To See The Space (6272:1005) mirrors the section — copy left, the photograph flush to the RIGHT viewport edge. The grid keeps its source order (media first in the DOM, which is also the reading order the mobile stack wants); only the painted columns swap. -------------------------------------------------------------------------- */ /* Guarded for the same reason as the is-process rules further down: at (0,3,0) this outranks the mobile `.nk-about-founded__split` (0,1,0) that collapses the band to one column, so without the guard the mirrored variant kept its two-column grid on a phone. page-process is the only consumer, so the guard is safe to put on the rule itself. */ @media (min-width: 768px) { .nk-about-founded.is-media-right .nk-about-founded__split { grid-template-columns: minmax(0, 1fr) var(--nk-about-founded-image-col); } } /* WHICH TRACK ABSORBS THE SURPLUS. The copy sits in the flexible track here and is capped at space-copy-width, so past roughly 1730 the track kept growing while the text stopped — and the leftover showed up as dead space between the text and the photograph: the 75 gap read as 122 at 1920 and 282 at 2560. Capping the copy track at what the copy actually needs (one gutter of margin plus its measure — __body is border-box, so space-copy-width already contains its own padding; counting that padding again left 72px of empty track between the text and the photo) and giving the photograph minmax(, 1fr) hands the surplus to the picture instead. The floor keeps the frame's proportion wherever it still fits, so everything at and below ~1730 renders exactly as before; above it the photograph simply grows and the gap stays the 75 it is set to. */ /* GUARDED at the two-column breakpoint. Both rules below are (0,4,0) and would otherwise outrank the mobile `.nk-about-founded__split` (0,1,0) that collapses the band to a single column — which is exactly what happened: section 5 kept its desktop two-column grid on a phone, squeezing the copy to about 100px beside a 250px photo. A media query adds no specificity, so the guard has to be explicit. */ @media (min-width: 768px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__split { grid-template-columns: minmax(0, calc( var(--wp--preset--spacing--gutter) + var(--wp--custom--components--process-page--space-copy-width) )) minmax(var(--nk-about-founded-image-col), 1fr); } } .nk-about-founded.is-media-right .nk-about-founded__media { order: 2; } .nk-about-founded.is-media-right .nk-about-founded__body { order: 1; } /* The 969-wide photograph is anchored to its left edge, so what the design shows at 1440 stays put and a wider viewport reveals more of the frame to the right instead of re-centring the crop. */ .nk-about-founded.is-media-right .nk-about-founded__image { object-position: left center; } /* Section 5's own proportions: full-height photograph, a 575 copy stack indented to the gutter, and a 29 rhythm between heading and paragraphs. */ .nk-about-founded.is-process.is-media-right { --nk-about-founded-image-col: var(--wp--custom--components--process-page--space-image-col); --nk-about-founded-body-gap: var(--wp--custom--components--process-page--space-stack-gap); /* 75 between the photograph and the copy, against the 48 the band above it runs — this one has the wider photograph, so the copy needs the extra separation. Set as the variant's own token so section 2 keeps its conv-column-gap. */ --nk-about-founded-column-gap: var(--wp--custom--components--process-page--space-column-gap); } /* The copy tracks the PAGE's capped left edge; the photograph keeps bleeding right. The band is full-bleed with the photograph sized as a percentage of it, so the copy column started one gutter from the VIEWPORT edge and stayed there — 72px at every width, while every capped section beside it re-centred: 246px adrift at 1920, 566px at 2560. The inset sits on the grid rather than on __body because a percentage resolves against the containing block: on __body that is its own 1fr column (roughly half the viewport, so the sum went negative and did nothing), while __split is a direct child of the section and 100% is the band itself. That also avoids 100vw, which would overshoot by the scrollbar width and reintroduce a few pixels of the same problem. It resolves to 0 at and below 1440, so the frame is untouched: the photograph keeps its full width there and only gives back the centring margin above it, still running to the right edge as .is-media-right's object-position intends. */ @media (min-width: 768px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__split { box-sizing: border-box; padding-inline-start: max( 0px, calc( ( 100% - var(--wp--custom--layout--max-width) ) / 2 ) ); } } /* Same guard as §04's media above — 519 here, so it stranded even more space. */ @media (min-width: 768px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__media { height: var(--wp--custom--components--process-page--space-min-height); margin-block: 0; } } /* Guarded, like the grid rules above: stacked, the mirrored band should read exactly like §04 above it, and these desktop indents were leaking past the breakpoint — (0,4,0) against the mobile rule's (0,1,0) — putting the copy 72px further in than its neighbour at every level. Below 768 it falls back to the plain .is-process indent, so the two bands line up. */ @media (min-width: 768px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__body { max-width: var(--wp--custom--components--process-page--space-copy-width); padding-inline: var(--wp--preset--spacing--gutter) 0; margin-inline-start: var(--wp--preset--spacing--gutter); } } /* Tablet runs the page's 48 inset, not the desktop gutter — every other band steps down to spacing--12 between 768 and 1023 and this one was holding 72, putting its heading 24 further in than its neighbours. Bounded at both ends: below 768 the band has no margin at all (the stacked rules own it), above 1023 the gutter is correct. The heading's -72 pull-back is unchanged: it cancels the body's padding, not this margin, so it still lands on the same line as the copy's left inset. */ @media (min-width: 768px) and (max-width: 1023px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__body { margin-inline-start: var(--wp--preset--spacing--12); } } /* Paired with the body indent above — the heading is pulled back out of it, so the two have to be guarded together or the heading would hang outside its copy on mobile. */ @media (min-width: 768px) { .nk-about-founded.is-process.is-media-right .nk-about-founded__heading { margin-inline-start: calc( -1 * var(--wp--preset--spacing--gutter) ); max-width: var(--wp--custom--components--process-page--space-heading-width); } } /* -------------------------------------------------------------------------- Modifier: is-centered-copy Centres the copy in the column the photograph's floor stretches open, rather than leaving it at the top. Added 2026-08-14 at Shawn's request for the About page; opt-in via className so Why (4915:1733, top-aligned) is untouched. Two things follow from the stretch relationship above, neither of them faults: it only bites while the copy is SHORTER than the image floor — longer copy sets the row height itself and leaves no slack to distribute — and it is a no-op on mobile, where the grid collapses to one column and __body is content-height. Paired with the same class on about-one-team, the section below it on About. -------------------------------------------------------------------------- */ .nk-about-founded.is-centered-copy .nk-about-founded__body { justify-content: center; } /* ---------- Tablet ---------- */ @media (max-width: 1023px) { .nk-about-founded { --nk-about-founded-heading-size: var(--wp--preset--font-size--xl); } .nk-about-founded__split { column-gap: var(--wp--preset--spacing--10); } /* Still two columns here, so the stretch relationship holds — only the floor comes down, since the narrower column would otherwise crop 846px of photo into a much taller portrait than the design's. */ .nk-about-founded__media { min-height: var(--wp--custom--components--about--founded-image-min-height-tablet); } .nk-about-founded__body { padding-right: var(--wp--preset--spacing--12); } } /* ---------- Mobile ---------- The image gives up its column and runs full-bleed. It sits above the copy on About and Why, and below it on Our Process (see the order swap inside). */ @media (max-width: 767px) { /* Steps to 16 with nk-process-intro's copy at the same breakpoint. */ .nk-about-founded.is-process { --nk-about-founded-copy-size: var(--wp--preset--font-size--base); } .nk-about-founded { --nk-about-founded-heading-size: var(--wp--preset--font-size--xl-sm); padding-block: 0; } /* The quote's mobile padding is 64px, not 90px, so the stand-in matches it. */ .nk-about-founded:not( :has( + .wp-block-neilkelly-project-testimonial ) ) { padding-bottom: var(--wp--preset--spacing--16); } .nk-about-founded__split { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--8); } /* Copy first, photograph under it — on Our Process both bands read that way. The DOM order is media-first (it is the reading order the desktop grid wants), so stacked it put the photo above the heading on section 4 while section 5, which already carries is-media-right's order swap, showed it below. Scoped to is-process so About and Why keep the image-above stack they shipped with. */ .nk-about-founded.is-process .nk-about-founded__body { order: 1; } .nk-about-founded.is-process .nk-about-founded__media { order: 2; } /* Single column here: there is no copy column to match, so the image goes back to sizing its own figure — and with it the aspect-ratio, which is what holds the layout stable while the photo loads. */ .nk-about-founded__media { position: static; min-height: 0; } /* Shared with about-one-team: both images drop their tall desktop crop for the same landscape one at this width. */ .nk-about-founded__image { position: static; height: auto; aspect-ratio: var(--wp--custom--components--about--image-aspect-mobile); } .nk-about-founded__body { max-width: none; padding-inline: var(--wp--preset--spacing--6); } /* 24 of breathing room on both edges. The .is-process indent above is (0,3,0) and outranks the rule just above, so it has to be restated here rather than inherited: the numbered gutter plus 24 on the left, a plain 24 on the right, where the copy was previously running flush to the viewport edge. The heading is pulled back by the gutter alone, so it lands on the same 24 as the text. */ .nk-about-founded.is-process .nk-about-founded__body { padding-inline: calc( var(--wp--custom--components--process-page--conv-body-indent) + var(--wp--preset--spacing--6) ) var(--wp--preset--spacing--6); } .nk-about-founded__heading { max-width: none; } } /* Our Process §05 "We come to see the space" (6272:1005) sets its heading on ink-primary where §04 (6272:709) uses true black. Same block, different frame — scoped to the mirrored instance so §04 and About keep their black. */ .wp-block-neilkelly-about-design-build.is-process.is-media-right .nk-about-founded__heading { color: var(--wp--preset--color--ink-primary); }