/* Generated by build.mjs — loaded last, after every design stylesheet.
Phone-width fixes measured in a 390x844 viewport, plus the Method framing. */
/* The Speaking hero's torn edge, at every width — this one is not a phone-only
fix. Every other page draws that edge with assets/divider.svg, crisp and
white. This hero has no edge element at all: its torn edge is painted into
speaking-header-bg.png, so on desktop it renders as a soft red raster shape
that does not match any other page, and on a phone the blur above smeared it
outright.
Measured off the file, the baked edge starts at source y 906 of 1011 — the
bottom 10.4%. Scaling the photo by 1.12 from its top edge pushes exactly that
much past the hero's bottom, where overflow:hidden takes it, and leaves the
rest of the framing alone. 1.12 rather than something larger because this now
applies to desktop too, where any extra would be a visible zoom on a layout
nobody asked to change.
Then the real divider goes on as a pseudo-element, since there is no element
in the JSX to put it on. The artwork is white along its top with the teeth
pointing down, which suits a white section above a dark one; here it is the
other way round, so the strip is flipped — the same thing the About hero does
with its copy. The height comes from aspect-ratio, the artwork's own 1922/133,
rather than a vw figure: vw counts the scrollbar, so 6.92vw drew 88.6px where
the other pages' dividers drew 87.5px on the same screen. Taking the ratio off
the element's own width lands on their number exactly. The phone block then
overrides the height along with every other divider's. */
.sp-hero img {
transform: scale(1.12);
transform-origin: 50% 0;
}
.sp-hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
aspect-ratio: 1922 / 133;
pointer-events: none;
transform: scaleY(-1);
background: url('assets/divider.svg') center bottom / 100% 100% no-repeat;
}
/* The three speaker names under "What Others Are Saying" lose the end of the
last letter — the d of "Steve Weatherford" most visibly.
Same cause as the orange accent words: .sp-oname is painted with
background-clip:text, so the gradient only covers the element's box, and
Rockness draws past the advance width. Measured on the page, the ink runs
5.3px beyond the box for "Steve Weatherford", 1.8px for "James Malinchak" and
1.1px for "Billy Sticker", and .sp-oname carries no padding at all, so that
ink gets no paint and reads as a cut letter.
Not phone-only, unlike the accent words — these are clipped at 1280 as well,
which is why this sits outside the width blocks. The padding widens the
painted box and the negative margin takes the space back, so the names stay
exactly where they were. 0.2em covers the worst case of 0.145em.
Found by listing every element on the page with background-clip:text and
comparing each one's ink extent against its padding: 20 elements use it, and
these three were the only ones coming up short. */
.sp-oname {
padding-inline: 0.2em;
margin-inline: -0.2em;
padding-block: 0.14em;
margin-block: -0.14em;
}
/* The other two baked edges on the Speaking page, same problem as its hero.
"Thousands Have Been Inspired" (logos-bg.jpg) has one painted along its
bottom, and "Nick Has Shared the Stage With" (stage-bg.jpg) along its top.
Both are a chunkier, speckled torn shape than divider.svg, so they read as a
different edge from every other transition on the site.
Covered rather than cropped. The hero could be cropped because its baked edge
sat in a corner of the frame nothing else needed; here the edge runs across
content, and scaling these two photos to push it out would reframe a crowd
shot and a stage shot for no reason. Both baked edges are white and both meet
a white section, so laying a white strip with a proper torn edge over the top
hides the old one completely and leaves the photo untouched.
11% of the section's height, which is a percentage rather than a pixel figure
because the baked edge scales with the photo: measured at 8.2% of the section
on both a 1280 and a 375 screen, so 11% clears it at either end with room to
spare.
The artwork is white along its top with the teeth below. The stage section
takes it as it comes, teeth pointing down out of the white above it. The
logos section needs the opposite, so that strip is flipped and built upside
down — artwork at the bottom, filler above — which lands teeth-up with the
white running down into the section below. */
.sp-stagebg::before,
.sp-inspired::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 11%;
pointer-events: none;
z-index: 2;
background:
url('assets/divider.svg') center bottom / 100% 50% no-repeat,
linear-gradient(#fff, #fff) center top / 100% 51% no-repeat;
}
.sp-stagebg::before { top: -1px; }
.sp-inspired::after { bottom: -1px; transform: scaleY(-1); }
/* The strips have to sit above the photo and its veil but under the copy. A
pseudo-element alone cannot do both: ::before paints before the img, so it
would be hidden by it, and any z-index that clears the img also clears the
text. Lifting the content block above the strip is what settles the order. */
.sp-stagebg > .section-in,
.sp-inspired > .section-in {
position: relative;
z-index: 3;
}
/* The orange accent words are painted with background-clip:text, so the gradient
only reaches the element's own box and anything outside it renders as nothing.
Rockness's glyphs stand 1.461em tall — that is the font's own
ascent-plus-descent, read out of its hhea table — and its swashes reach past
the advance width sideways. An inline span's box is exactly the glyph box, so
inline accents were always fine. But a block or inline-block heading's box is
only as tall as its line-height, about 1.08em here, so the tails fell outside
the painted area and rendered as nothing: the descenders on "Workshop" and
"Coaching", and the tails on "Method", "Live" and "You Are Here to Lead."
This is not new and was never about which script face is in use. Measured
with Rockness, on the build that shipped before any font was swapped, the
same words were already losing their tails. It only became obvious when a
face with deeper descenders went in.
Measured across all six pages with Rockness, the worst shortfall is 0.281em
per side vertically (Speaking) and 0.21em horizontally ("Impact" on the
homepage), so 0.34em and 0.26em each carry a little headroom. The padding
grows the painted box and the negative margin gives the space back.
--grad-text-energy runs 90deg, left to right, so a taller box shifts no
colour. On inline spans the block axis is a no-op, since vertical padding and
margin do not affect inline layout.
Both axes are !important because the design system already does exactly this
by hand, as an inline style, on a few accents ("Method", "Impact",
"Amplifying."). Those values are lopsided the wrong way for these glyphs —
0.05em on the left where "Impact" needs 0.16em — so they have to be
overridden rather than deferred to. The values here are at least as large as
any of them, so nothing loses room.
The cancellation is exact on the inline axis but not for an inline-block's
block axis, where the line box is built from the margin box and the baseline
together. Swept from 0.34em to 0.6em: 0.34em is closest to neutral, leaving
every page within half a percent of its old height — a few pixels on the
headings that carry a script accent. */
.nu-gradient-text {
padding-block: 0.34em !important;
margin-block: -0.34em !important;
padding-inline: 0.26em !important;
margin-inline: -0.26em !important;
}
/* Work With Me: drop the short gradient rule above each program heading
(Workshop, Coaching, Publishing, Elite). The whole .wwm-kicker goes, not just
the rule inside it, so its margin does not leave a gap.
Scoped by data-screen-label because Success Stories reuses .wwm-prog and
.wwm-kicker for its featured stories, where the rule stays — its sections are
labelled "FEATURED STORY n" rather than "PROGRAM n". */
[data-screen-label^="PROGRAM"] .wwm-kicker { display: none; }
/* About photo on the homepage. The frame is 4/5 and the photo is 1365x2048, so
cover already crops it, and the stylesheet then scaled it a further 1.18 about
a point near the top. Between them only 6%-77% of the photo showed, and his
hands sit at 76%-88% — cut off exactly where the client saw it. Dropping the
scale and moving the framing down shows 9%-92%: hands and watch complete, with
headroom still above him. .about-photo is only used by this section. */
.about-photo img { transform: none; object-position: 50% 52%; }
/* Split Method layout (?method=split): two halves side by side, each with its
own background photo, heading plus the first two steps on the left and the
last three on the right. Reuses .method-row / .method-icon so the type and
icons match the other layouts exactly. */
/* One photo spans the whole section, so the venue reads as a single continuous
scene, with a thin divider between the two text columns.
The section carries .section padding (130px 40px, and 120px top/bottom from
.method-sec). Left alone that frames the photo with a band of the section's
own background, so this layout runs edge to edge instead. */
.method-sec:has(.m-split) { padding: 0; }
.m-split { position: relative; overflow: hidden; }
.m-split-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-split-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,6,6,.84) 0%, rgba(8,6,6,.90) 100%);
}
/* The photo stays full-bleed, but the copy is held to the same 1280px measure
the rest of the site uses and centred. Without it the two columns stretch to
the screen edges on an ultrawide monitor. */
.m-split-cols {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1280px;
margin: 0 auto;
}
.m-split-col {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--sp-80, 80px) var(--sp-40);
min-height: 620px;
}
.m-split-head { margin-bottom: calc(var(--sp-40) * 0.8); max-width: 560px; }
/* No rules between the steps in this layout. Scoped to .m-split so the other
Method layouts, including the live Option B, keep theirs. */
.m-split .method-row { border-top: 0; }
@media (max-width: 900px) {
.m-split-cols { grid-template-columns: 1fr; }
.m-split-col { min-height: 0; padding: var(--sp-56, 56px) var(--sp-24); }
}
/* The Method background needs no override. The supplied photo is composed for
this section — 2.12:1, its own black fade on the left, Nick to the right — so
the design's own centre framing lands him clear of the veil with the stage
behind the copy. Earlier photos needed nudging here; this one does not. */
@media (max-width: 1024px) {
/* Several headings carry an inline white-space:nowrap, tuned for desktop line
breaks. On a phone they held the page 100px wider than the viewport: the hero
h1 sat at 435px, and the MESSAGE h2's "Amplifying." ran to 475px in a 375px
viewport. Headings should always be free to wrap at this width. */
h1, h2, h3,
h1 span, h2 span, h3 span { white-space: normal !important; }
/* The one deliberate exception: a phrase marked .nu-keep stays on one line,
such as "With Nick" in "Ways to Work With Nick", so it never ends on a
lone "With". Outranks the rule above on specificity. */
h1 span.nu-keep, h2 span.nu-keep, h3 span.nu-keep { white-space: nowrap !important; }
/* Both hero blocks carry percentage translateY, tuned when they were short and
wide on desktop. On a phone the sub-copy block is ~629px tall, so -20% pulled
it up 126px and straight over the headline. */
h1[style*="translateY"] { transform: none !important; }
.hero-sub-shift { transform: none !important; }
/* "I also know what it's like to start with Absolutely Nothing": show Nick as
a real photo between the heading and the copy, the way "The Work I Do Today"
does once it stacks.
That section has no photo of its own in the markup. Its picture of Nick is
.ab-dark-bg, a background that is masked to the right-hand 38% on desktop;
at this width the mask is dropped and an 80% veil goes over it, so he is
reduced to a dark texture behind the text and you cannot really see him.
This paints the same photo again as a proper image.
Done as a pseudo-element rather than new markup so the design bundle's JSX
is untouched. The box copies .ab-photo exactly — 4/5, max 520px, centred,
same radius and shadow — so it reads as the same component.
The framing is a deliberate crop, not plain cover. At cover the photo sits
at its full 1280px height and Nick is small in the middle, with a band of
sky above him and water below. These numbers show source y 300-1200 and
x 633-1353 instead — 1.42x in — which fills the frame with him while
leaving 46px of headroom above his head at this size, and keeps his hands
and watch in shot. Both values are percentages, so the crop holds at any
box width.
Measured from the photo itself: his head starts at y=364, and he does not
stand in the middle of the frame — his shoulders centre on x=993 of 1920,
so a centred crop left him sitting to the right. The 52.8% puts him on the
centre line. The crop ends at x=1353, 567px clear of the right edge.
There are two .ab-dark sections — "Absolutely Nothing" and "Life on Fire" —
and they carry different photos, so each is selected by the file its own
.ab-dark-bg points at rather than by position. Keying off the section's own
photo also means a third .ab-dark section added later gets nothing here
instead of silently inheriting another section's picture. */
.ab-dark:has(.ab-dark-bg[src$="nick-waterfront.jpg"]) .ab-dark-col .ab-h2::after,
.ab-dark:has(.ab-dark-bg[src$="nick-sparks.jpg"]) .ab-dark-col .ab-h2::after {
content: '';
display: block;
width: 100%;
max-width: 520px;
margin: var(--sp-32) auto 0;
aspect-ratio: 4 / 5;
border-radius: var(--radius-image);
box-shadow: var(--shadow-medium);
background-size: cover;
background-position: center;
}
/* "Absolutely Nothing" — cropped in on Nick, as described above. */
.ab-dark:has(.ab-dark-bg[src$="nick-waterfront.jpg"]) .ab-dark-col .ab-h2::after {
background-image: url('assets/nick-waterfront.jpg');
background-size: 266.7% auto;
background-position: 52.8% 78.9%;
}
/* "Life on Fire" — a wide stage shot, 1920x1280, with Nick and his raised
fist over on the right and the spark fountain to his left. Here the 4/5 box
already takes the full height, so only the horizontal position matters:
84.8% frames source x 760-1784, which keeps him and the sparks together.
Pulled any further right and the sparks drop out of frame, which is the
whole point of the shot. */
.ab-dark:has(.ab-dark-bg[src$="nick-sparks.jpg"]) .ab-dark-col .ab-h2::after {
background-image: url('assets/nick-sparks.jpg');
background-position: 84.8% center;
}
/* With him shown properly above, the same photo behind the copy is just a
muddy shape under the text, so it goes. Scoped to the two sections that
gained a photo, so any other .ab-dark section keeps its background. The
section keeps its own black background and the veil either way. */
.ab-dark:has(.ab-dark-bg[src$="nick-waterfront.jpg"]) .ab-dark-bg,
.ab-dark:has(.ab-dark-bg[src$="nick-sparks.jpg"]) .ab-dark-bg { display: none; }
/* The dead space between "I figured out a System..." and "What I Believe".
.ab-believe sets margin-top 96px and padding-top 64px with a rule on the
border between them, and those never changed off desktop — 161px of empty
column measured on a 375px screen, with the rule stranded in the middle of
it. That reads as generous on a wide page and as a mistake on a phone.
Halved to 81px. The rule still separates the two parts clearly, it just no
longer floats in a void. The grid gap below is already handled by the
design's own 1024px rule. */
.ab-believe {
margin-top: 48px;
padding-top: 32px;
}
/* Centre the "What I Believe" heading once the two columns stack. On desktop
it is the left column of a 0.7/1.3 grid and reads as a label beside the
copy; stacked, it is a heading over full-width text and centring it matches
the statement above. Only the heading — the paragraphs stay left-aligned,
which is what long copy needs to stay readable. */
.ab-believe > .ab-h2 { text-align: center; }
}
@media (max-width: 640px) {
/* About hero: the heading sat across Nick's jaw on a phone.
The hero is 375x653 on a 375px phone and the photo is 1920x1028, so
object-fit: cover scales it by height (653/1028) and the overflow is all
horizontal. Vertically the photo always fits exactly, which means
object-position's Y has no effect and his face cannot be moved up or down —
it sits at a fixed fraction of the hero whatever the screen. Measured off
the real crop: his head runs from 20% to 34% of the hero height, so the
chin lands at 0.34 x height, about 222px. The heading started at 204px.
So the text has to move below him instead. Anchoring the block to the
bottom and trimming the bottom padding does that, and the smaller type at
this width keeps the block short enough to clear him on a 320px screen,
where the paragraph runs to an extra line. The body is 18px, the site's
phone body size (it was 20px, then brought down to match). Measured
clearance below the chin: +57px at 320, +87px at 375, +116px at 430. The block still
ends 53-62px above the torn edge at every width, and nothing changes at
641px and up. */
.ab-hero-in {
justify-content: flex-end;
padding-bottom: 72px;
}
.ab-hero {
--fs-hero: 40px;
--fs-body-lg: 18px;
}
/* The closing CTA, on every page. Its background is a 1920x739 photo of a
red-lit stage. At desktop width you see the whole wash; at 375px, cover
scales it to fit the height and crops away all but a narrow strip, so what
is left is a muddy brown blur with a blown-out highlight in it — it reads
as a mistake rather than a photograph.
Replaced with a flame gradient at phone width, running the full height of
the section so it carries through the social row at the bottom rather than
dying into black halfway down. It opens on a warm maroon behind the
headline and climbs through the brand's ember tones, so the icons and
labels at the bottom sit on the hottest part.
Contrast was the thing to watch, and it turned out not to be a constraint:
white on the top colour measures 12.8:1 and on the brightest step at the
very bottom, #c24a08, still 4.9:1 — past the 4.5:1 needed for normal text.
That is why the top could be lifted this far out of the black without the
headline or the body copy losing legibility.
The photo's dark overlay goes with it: that overlay exists to hold text off
a busy picture, and over a gradient it just turned everything to mud. The
gradient is built dark enough to carry the white copy on its own. :not()
guards the overlay selector, so if the markup ever changes and the first
child is the content wrapper instead, this leaves it alone rather than
hiding the copy. */
.final-cta {
background-image:
linear-gradient(180deg, #5c1d1a 0%, #6d2413 30%, #8a2e0f 58%, #ab3a0c 82%, #c24a08 100%);
background-color: #140808;
}
.final-cta > div:not(.wrap):not(.social-row):first-child { display: none; }
/* Work With Me hero: the headline sat across Nick's face, same cause as the
About hero. The photo is 1600x1081 in a 375-wide box, so cover scales it by
height and the overflow is all horizontal — vertically it fits exactly,
object-position's Y does nothing, and his face is pinned to a fixed
fraction of the hero. Read off the real crop: head from 15% to 24% of the
hero's height, so the chin lands at 0.24 x height.
The catch here is that the hero has no fixed height — it is padding plus
copy. Pushing the text down with padding makes the hero taller, which drags
his chin down with it, so each extra pixel of padding only buys 0.76px of
clearance. Padding alone needed 270px and a 1027px hero to clear him.
Dropping the body copy to 19px is what actually fixes it: at that size the
paragraph loses a line, the hero gets shorter, and his face rises. The h1 is
left alone; it carries an inline clamp(2.4rem, 4.6vw, 4.75rem) that is
already at its 2.4rem floor on a phone, so --fs-hero would not reach it.
The heading then goes up to 170px and the photo is scaled to 150% of the
hero's height, which is what moves Nick down. Scaling is the only way to
move him: the photo fits the hero exactly top to bottom, so there is no
vertical slack for object-position to work with, and enlarging it is what
pushes everything below the top edge downward. At 150% his face lands to
the right of the headline's short second and third lines, with the mic in
shot — visible rather than hidden behind the type. The body later went
from 19px to 18px, the site's phone body size; that shortens the hero a
little more, which only helps.
Below 360px this stops working. The taller hero at that width means a
bigger scale, the visible slice of the photo gets narrower, and his face
slides off the right edge; nudging object-position across to chase it only
puts him back under the text. So narrow phones keep the arrangement that
does work there — no scaling, and the heading low enough to clear his chin.
246px was the smallest padding that does that, found by sweeping in 10px
steps: 246 leaves 12px of clearance at 320, 236 leaves 4px, and 226 lands
back on his jaw. With the body at 18px it measured 9px at 246, so the
fallback below now uses 256px. */
.wwm-hero-in { padding-top: 170px; }
.wwm-hero-bg { height: 150%; }
.wwm-hero { --fs-body-lg: 18px; }
/* Speaking hero: the copy was hard to read over the photo on a phone.
Not a contrast problem — measured across the whole text area, white never
drops below 4.5:1 against the photo (median 12:1, worst 5.6:1). The issue
is that the photo is busy exactly where the copy sits: his figure, the LIFE
ON FIRE sign and the crowd all compete with the type. So this calms the
background rather than darkening it further.
Blurring the photo takes its detail away and leaves the colour and mood,
which is all it was really contributing behind the text. The small scale
goes with it because a blur samples past the element's edges and would
otherwise feather transparent in around the sides.
The veil then holds a steady ~0.6 rather than the design's gradient, which
ran from .55 at the top down to 0 at the bottom. That fade is why the lower
half read worst: the paragraph reaches 821px on a phone, well into the
stretch where the scrim had given up. */
.sp-hero img { filter: blur(7px) saturate(1.05); }
.sp-hero-veil {
background: linear-gradient(180deg, rgba(10,6,6,.62) 0%, rgba(10,6,6,.58) 60%, rgba(10,6,6,.64) 100%) !important;
}
/* Homepage hero: the same treatment as the Speaking hero above, for the same
reason. Behind the centred copy the stage photo puts the LIFE ON FIRE sign,
Nick and the lighting rig right under the headline and paragraph. Blur it
to colour and mood, scale it slightly so the blur does not feather in at
the edges, and hold the veil at the Speaking hero's steady ~0.6 instead of
the design's left-to-right fade, which on a phone left the right half of
every line at 0.35. The hero has no class of its own, so it is found by its
photo; the veil is the div right after it and is styled inline, hence
!important. */
img[src$="hero-stage.jpg"] {
filter: blur(7px) saturate(1.05);
transform: scale(1.12);
}
img[src$="hero-stage.jpg"] + div {
background: linear-gradient(180deg, rgba(10,6,6,.62) 0%, rgba(10,6,6,.58) 60%, rgba(10,6,6,.64) 100%) !important;
}
/* "The Message-to-Movement Method" ran at --fs-h2, 28px on a phone: smaller
than the step titles under it ("Clarify Your Message"), so the section's
own heading read as the least important line in it. Bring it to the size
of the homepage's other section heading on a phone, "Ways to Work With
Nick", which is --fs-h2 x 1.3. Set inline, hence !important. */
.method-sec h2 { font-size: calc(var(--fs-h2) * 1.3) !important; }
/* Same section: plain black behind it on a phone. The stage photo sits under
an 82% veil there, so all it added was a dim, busy texture behind five
blocks of copy. The section's own background is the site black, so hiding
the photo and its veil is enough. */
.method-sec .mF-bg,
.method-sec .mF-veil { display: none; }
/* "How the Work Moves" ran its paragraph at 22px while every program section
above it is at 17px, so on a phone it read as a different, louder kind of
text rather than the same body copy. It is the only paragraph in that
section, and the width it had on desktop is what made the larger size work
there; at 375 it just looks oversized.
17px to match .wwm-body p, which is the page's own body size, set as a flat
pixel value in wwm.css rather than from a token — so this matches that
number rather than inventing one. Line-height follows at 1.65, the same
ratio those paragraphs use, instead of --lh-body's 1.6.
Mobile only. On desktop the section still runs larger, which is the
design's intent for a single wide statement line. */
.wwm-moves-p {
font-size: 17px;
line-height: 1.65;
}
/* The torn dividers, every one on the site. They are drawn at the artwork's
own proportion, 133/1922 of the width, which is 133px across a 1920 desktop
but only 26px across a phone — the teeth shrink with the screen until the
edge reads as a grubby line rather than torn paper.
A flat pixel height instead, which inverts that: the narrower the screen
the more the edge is exaggerated, and by 640px it is back to roughly its
natural size. Stretching an organic torn edge vertically is invisible as
distortion, so object-fit: fill is the right choice over cover, which would
crop the ends off instead.
!important because .ab-hero .ab-hero-edge img sets height:auto at a higher
specificity than an attribute selector can reach, so the About hero's
divider would otherwise be the only one left small.
Three selectors because the site draws this edge three different ways, which
only turned up by counting the rendered dividers per page: most pages use an
![]()
, Contact uses a div with the SVG as a CSS mask and the ratio set
inline, and the Speaking hero has the pseudo-element added above. The
Contact one needs aspect-ratio cleared or its inline 1922/133 keeps
deciding the height. Matching on the filename means a divider added later is
covered without being listed by name. */
img[src$="divider.svg"] {
height: 44px !important;
object-fit: fill;
}
[style*="divider.svg"] {
height: 44px !important;
aspect-ratio: auto !important;
}
.sp-hero::after { height: 44px; }
/* "What Others Are Saying About Nick" — too much black between the photo and
the quote.
The card is a fixed 600px box with the photo absolutely placed across the
top 58% and the text bottom-aligned under it, so the height never responds
to how long the quote is. On top of that the photos are portrait shots
whose subject ends around 55% of the frame, with dark space below, and the
fade then blacks the rest out — so the gap between the last thing you can
see and the first line of the quote runs to about 150px.
Rebuilt the same way as the stage tiles: the photo becomes a normal 1:1
block, the text sits under it, and the card's height follows its content
instead of a fixed figure. The gradient join is reused so the photo still
melts into the black rather than ending on a line. */
.sp-ocard {
min-height: 0;
display: block;
}
.sp-ocard-img {
position: static;
height: auto;
}
.sp-ocard-img > img {
aspect-ratio: 1 / 1;
height: auto;
}
.sp-ocard-fade { display: none; }
/* The text is then pulled up into the photo rather than starting below it,
because the gap that is left is inside the picture: each shot runs out of
subject before the frame ends and goes black. Measured on the rendered
crop, the dark tail is 128px for Billy, 77px for Steve and 51px for James.
James sets the limit — go higher than his 51px and the quote starts over
him. The text begins 30px above the photo's edge, which leaves him 21px of
clear dark and takes a bite out of the empty space on the other two. */
.sp-ocard-body {
position: relative;
z-index: 1;
margin-top: -76px;
padding: 46px var(--sp-24) 36px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 36px, #000 100%);
}
/* "Nick Has Shared the Stage With" — the names sat over the faces.
The tile is a square with the caption laid over the bottom of the photo and
a dark gradient behind it. On desktop that works because the description is
hidden until hover, so only the name shows. There is no hover on a phone, so
the design reveals the description permanently below 900px — and on a 184px
square that caption block runs 101px tall, 55% of the tile, straight across
everyone's face.
It also clipped: the description is capped at max-height 80px, which is
where "Coach", "Secret Millionaire" and "Redskins" were losing their last
line.
So the caption comes out of the photo at phone width and sits under it. The
photo keeps its square crop, the tile grows to fit the text, the gradient
is no longer needed, and the cap comes off so nothing is cut. Faces stay
clear because nothing is drawn over them at all. */
.sp-tile {
aspect-ratio: auto;
overflow: visible;
}
.sp-tile > img {
aspect-ratio: 1 / 1;
height: auto;
}
.sp-tile-fade { display: none; }
/* The caption sits on a gradient rather than the tile's flat #111, which
turned each tile into a hard black box with a visible edge against the
section behind it. The negative top margin pulls the gradient up over the
last of the photo so there is no seam between the two, and it fades out at
the bottom into the section instead of stopping at a straight line. The
tile's own background goes transparent so only this is drawn.
position:relative matters more than it looks. The caption needs to paint
over the bottom of the photo for the two to blend, and a negative margin
alone does not do that: a static block's background is painted in an
earlier pass than a replaced element, so the gradient went under the image
and the join stayed a hard line. Positioning the caption puts it in the
later pass, over the photo, where the fade can be seen.
The fade is in px rather than a percentage so its depth does not change
with the length of the description — it covers the 36px of photo the
caption is pulled up over, and the caption is solid from there down. */
.sp-tile-txt {
position: relative;
z-index: 1;
margin-top: -36px;
padding: 46px 6px 22px;
background: linear-gradient(
180deg,
rgba(17, 17, 17, 0) 0,
rgba(17, 17, 17, 1) 36px,
rgba(17, 17, 17, 1) 100%
);
}
.sp-tile-txt p { max-height: none; }
/* "Thousands Have Been Inspired to Live Their Dreams Now". The second line is
a flex row holding the script "Live" beside "Their Dreams Now", laid out
side by side and bottom-aligned. At 375 that row needs 327px — 105 for Live
plus 222 for the rest — inside a 303px column, so it overflowed: "Live" was
pushed out to x=20 against a heading starting at x=36, and the rest broke
across two lines around it. That is the jumble.
Flex is the wrong tool at this width. The second item sizes itself to
"Dreams Now" and will not give that up: min-width:0, flex-shrink:10 and
flex:1 1 0 were each tried and the item stayed 232px wide against the 203px
available, so the row kept overflowing left. Taking the row back to normal
inline flow lets the four words wrap where they actually fit, which puts
"Live Their" on one line and "Dreams Now" under it, centred, at the
heading's own size — no shrinking required.
The underline moves with it. It was an absolute ::after on the second span,
which worked while that span was one unbroken box; inline text fragments
across lines, and the bar collapsed to 105px over "Their" alone. Drawing it
on the line's own block instead gives one full-width rule under the pair,
which is where it reads on desktop too. */
.sp-insp-l2 {
display: block;
position: relative;
padding-bottom: 0.18em;
}
.sp-insp-live,
.sp-insp-rest { display: inline; }
.sp-insp-rest {
padding-bottom: 0;
margin-bottom: 0;
}
.sp-insp-rest::after { display: none; }
.sp-insp-l2::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
border-radius: 3px;
background: var(--grad-energy);
}
/* "Nick Has Shared the Stage With" opens with 17.5vw of top padding, which is
221px on a 1280 screen but only 66px on a phone — while the torn edge over
it stays at a steady 8.2% of the section, about 88px. So on a phone the
heading starts inside the edge rather than below it, which was true of the
baked edge before this too; the white strip just makes it obvious, white
type on white paper.
The edge itself was the other half of it. It is sized as a share of the
section, 11%, and on a phone the stage tiles stack, so the section is
about 1750px tall: the edge grew to 193px, about 98px of plain white and
then a 95px tear, with the heading landing inside the tear. Give it a fixed
size instead: just the tear, 44px like every other divider on a phone,
with no white block above it, since the section above already ends in
white. The heading then sits 44px under the tear.
stage-bg.jpg also has its own white tear baked into its top 110 of 1213px,
9%. The photo is scaled to the section's height, so on a phone that grew to
153px and covered the heading too. Lift the photo 10% of the section above
the top, where overflow:hidden trims it, and make it 10% taller to match,
so the baked tear sits just out of view and only the 44px one shows.
Scaled up this far, the photo's stage edge reads as a hard horizontal line
running under the heading. Blur it, as the Speaking hero does on a phone,
so it becomes a warm wash rather than a picture. Blur pulls transparent
edge pixels in, so the photo is drawn past every edge: 12% above and below
the section, and 6% wider via scale. The taller box scales the photo up
too, so the baked tear now runs to 11.3% of the section; 12% still hides it. */
.sp-stagebg { padding-top: 88px; }
.sp-stagebg > .sp-dark-bg {
top: -12%;
height: 124%;
filter: blur(14px);
transform: scale(1.06);
}
.sp-stagebg::before {
height: 44px;
background: url('assets/divider.svg') center bottom / 100% 100% no-repeat;
}
/* Speaking page: two paragraphs ran at 22px while the page's own body copy is
18px — the Topics, Comments From The Crowd and Nick Bio sections are all
18px, measured section by section. Both of the outliers draw on
--fs-body-lg, which is sized for the width these had on desktop and reads
as oversized on a phone.
The hero's is set inline in the JSX, so the variable is reset on .sp-hero
rather than fighting the inline style with !important. .sp-head p is a
stylesheet rule and takes a plain size; it covers two intros, the Speaker
Reel and the Podcasts one, which are the same kind of line and should match
each other anyway. Line-height follows --lh-body at 1.6, which lands on the
28.8px those 18px paragraphs already use.
The closing CTA and the event form keep 22px: those are single wide
statement lines rather than body copy. */
.sp-hero { --fs-body-lg: 18px; }
.sp-head p { font-size: 18px; }
/* Breathing room once the headline wraps to four or five lines. */
.hero-sub-para { margin-top: var(--sp-16) !important; }
/* Footer links were 25px tall; the burger 30x40. Both are below a comfortable
touch target, and the footer links sit close together. */
.nav-burger {
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
footer a, [style*="surface-dark"] a, [style*="surface-dark"] span {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Burger menu entries render 29px tall, which is a small target for the one
menu that only exists on touch devices. */
.nav-mobile-menu a {
display: flex;
align-items: center;
min-height: 44px;
}
/* Keep the CTAs comfortably wide but never edge-to-edge. */
.hero-cta-row > * { width: 100%; }
/* Footer nav links wrap to 3 rows on a phone; the desktop 32px gap between
them stacks up into a lot of dead vertical space. */
.footer-nav-links { gap: var(--sp-16) !important; }
/* The "AS SEEN ON" strip packs eleven logos into one non-wrapping row with
flex-shrink on. At 375px that squeezed them to 22px wide on average, and the
narrowest to 7px — unreadable. Let the row wrap and stop the logos shrinking. */
.featured-logos {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 20px 26px !important;
}
.featured-logos img {
flex: 0 0 auto !important;
height: 26px !important;
max-width: 88px !important;
}
/* Two logos read far smaller than the rest under that cap. Entrepreneur is
a long, thin wordmark (272x53), so the 88px width cap bites first and it
drew only about 17px tall. Inc. 5000 is a round seal (77x76), so 26px tall
made it a 26px dot beside wordmarks three times its width. Give each its
own size: Entrepreneur 120px wide (about 23px tall), Inc. 5000 46px. */
.featured-logos img[src$="logo-1.png"] {
height: auto !important;
max-width: 120px !important;
width: 120px;
}
.featured-logos img[src$="inc5000.png"] { height: 46px !important; max-width: 46px !important; }
}
/* Speaking, the "Nick Unsworth" bio. Below 1100px the design stacks this
section: the photo on top at 16:10, the copy below on flat crimson (#C8082A).
Two pieces of it were built for the dark desktop version and read badly on
crimson.
The photo. Its inline translateX(10%) slides it right to clear the desktop
veil, but the stack has no veil, so on a phone it only pushed the photo 35px
off centre and left a crimson strip down the left. bio-bg-2.jpg also carries
a red wash baked into its left and bottom, meant to melt into that veil, and
the design's 16:10 crop at 65% kept most of it. Moved further right, the crop
loses the worst of the wash and keeps Nick and the room behind him.
"Unsworth". --grad-energy runs #EF4123 to #F7941E, which on #C8082A is 1.55:1
at the left end and 2.61:1 at the right, so "Uns" all but disappeared. A
lighter amber-to-cream gradient keeps the flame accent and reads 3.8:1 to
5:1. Only background-image changes, so the original background-clip:text
stays in force. */
@media (max-width: 1100px) {
.sp-biobg > .sp-dark-bg {
transform: none !important;
object-position: 78% center !important;
}
.sp-biobg .sp-bio-last {
background-image: linear-gradient(90deg, #FFC46E 0%, #FFEDB8 100%);
}
}
/* The photo, framed. Full-bleed, so no crimson strips run down either side of
it; the section's side padding differs by breakpoint, so the image sizes to
the viewport instead, and the section's own overflow:hidden trims any
scrollbar width.
The frame is 6:5 at 78%, which puts Nick's face on the centre line while
its left edge stays where the 4:3 right-anchored crop had it, just short of
the LIFE ON FIRE screen, so no more of the left wash comes in. The baked-in
wash also climbs steeply down the photo, from near zero across Nick to its
peak at the bottom. object-fit cannot crop that, because height is the
binding side, so the bottom 36% is clipped off and the same height handed
back with a negative margin. That ends the photo at Nick's chest, above the
wash. 36% of a 6:5 box 100vw wide is 30vw.
A hard cut there read as a seam, so the photo's last third fades out from
below. The mask runs over the whole box, clipped part included: opaque to
42%, transparent by 64% where the clip falls, so the section's own crimson
rises into the photo rather than the baked-in wash. */
@media (max-width: 1100px) {
.sp-biobg > .sp-dark-bg {
aspect-ratio: 6 / 5;
width: 100vw;
max-width: none;
margin-inline: calc(50% - 50vw);
clip-path: inset(0 0 36% 0);
margin-bottom: -30vw;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 64%);
mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 64%);
}
/* The design's 48px top padding sat below a photo that now fades out over
its last third, so the copy started under a band of plain crimson. Pull
it up into the tail of the fade, where the photo is nearly gone. */
.sp-biobg > .section-in {
padding-top: 0;
margin-top: -20px;
position: relative;
}
/* .sp-biobg keeps its desktop 160px bottom padding at every width, which
left a tall band of empty crimson under the last paragraph. Match the
site's own section padding instead: 90px here, 64px on a phone. */
.sp-biobg { padding-bottom: 90px; }
}
@media (max-width: 640px) {
.sp-biobg { padding-bottom: 64px; }
}
/* Success Stories hero on a phone. It reuses the Work With Me hero's classes,
so it inherited that hero's phone fixes, which were measured for a different
photo: the 150% height on top of this photo's own inline scale(1.35) blew
nick-waterfront.jpg up to 1563px tall and put Nick's face behind the body
copy, and the 19px body size was a Work With Me fix too.
nick-waterfront.jpg is 1920x1280 with Nick centred at 51% and his head
between 29% and 42% of its height, under a lot of sky. So the photo becomes
a fixed 400px band at the top, scaled 1.8x about a point chosen to land the
top of his head at about 92px, clear of the 77px fixed nav, and his chin at
about 186px, just above the headline at 212px. Being fixed in px, that holds
at every phone width, so the 246px fallback for narrow phones is not needed
here. The band fades out over its lower 30%; the mask scales with the image,
so on screen the fade runs from about 387px to 603px, behind the body copy
over his shirt. Body text drops to 18px to match the rest of the site. */
@media (max-width: 640px) {
.ss-hero { --fs-body-lg: 18px; }
.ss-hero .wwm-hero-in { padding-top: 212px; }
.ss-hero .wwm-hero-bg {
bottom: auto;
height: 400px;
object-position: 51% 50% !important;
transform: scale(1.8) !important;
transform-origin: 51% 146px !important;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
filter: brightness(1.15);
}
/* The shared veil darkens left to right for a desktop layout with the copy on
the left, which put about 75% black over his face in the middle of a phone.
Here it runs top to bottom instead: light over his face, which sits above
all the copy, then down to the old darkness from the headline on. */
.ss-hero .wwm-hero-veil {
background: linear-gradient(180deg,
rgba(6,5,5,.12) 0, rgba(6,5,5,.12) 190px,
rgba(6,5,5,.72) 250px, rgba(6,5,5,.82) 100%);
}
}
/* Contact hero on a phone: same treatment as Success Stories above. The
photo fills the hero, so Nick sat behind the body copy under a veil built
for a desktop layout, and the body ran at 22px.
nick-stage-wide.png is 1920x1283, his face at 61% across, head from 16% to
30% down. The photo becomes a fixed 400px band, scaled 1.68x about a point
23px down, which lands the top of his head at about 92px (below the 77px
nav) and his chin at about 186px. The headline starts at 252px, a little
lower than on Success Stories, so it clears the microphone and his hand
below his chin as well.
Centring him takes a length, not a percentage. object-position percentages
are of the slack, so a fixed percentage only centres his face at one phone
width. In px the image is 599px wide here, which puts his face 365px in, so
the image's left edge goes at 50vw - 365px and the scale origin at the
middle, keeping him centred at any width. */
@media (max-width: 640px) {
.ct-hero { --fs-body-lg: 18px; }
.ct-hero .ct-hero-in { padding-top: 252px; }
.ct-hero .ct-hero-bg {
bottom: auto;
height: 400px;
object-position: calc(50vw - 365px) 50%;
transform: scale(1.68);
transform-origin: 50% 23px;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
filter: brightness(1.1);
}
.ct-hero .ct-hero-veil {
background: linear-gradient(180deg,
rgba(6,5,5,.12) 0, rgba(6,5,5,.12) 230px,
rgba(6,5,5,.72) 290px, rgba(6,5,5,.82) 100%);
}
}
/* Homepage: the hero intro paragraph ran at --fs-body-lg, 22px, on a phone.
Bring it to the site's 18px body size. Its inline font-size reads the
variable, so setting the variable on the paragraph is enough. */
@media (max-width: 640px) {
.hero-sub-para { --fs-body-lg: 18px; }
/* Same for the MESSAGE intro ("Every person who has walked through…"),
whose inline font-size reads the same variable. */
.message-intro > p { --fs-body-lg: 18px; }
}
/* Homepage stats ("A Career Spent Turning Knowledge Into Impact"). The
numbers are nowrap and floor at 2.25rem, 36px, which on a phone is wider
than a column: at 381px each cell is 155px, but "Thousands" set 160px of
text and "Inc. 5000" 141px, so they ran over the centre rule into each
other. Scale them with the viewport instead. 7vw keeps "Thousands", the
widest, clear of each edge of its cell and off the centre rule: 22px with
6px either side at 320, 27px with 11px at 381, 30px with 15px at 430, back
up to the 36px floor by 514. 7.6vw fitted
too, but left it 5px from the rule. */
@media (max-width: 640px) {
.stat-num { font-size: min(2.25rem, 7vw); }
}
/* Homepage "Ways to Work With Nick". The desktop layout is a fixed 160px
rail of four tabs beside the copy, and the design never stacks it, so on a
phone the copy was left a 102px column: the heading broke into three lines,
the description ran one or two words a line, and the button wrapped to four.
Stack it instead: the rail on top as a compact list, the copy full width
below. Both columns are set inline, hence !important. The description drops
from 22px to the site's 18px body size, like the other phone fixes.
The copy also carried its desktop bottom padding, 64px + 120px, so with the
next section's 80px there was 264px of empty black under the button. The
site's phone section padding is 64px; use that.
The same goes for the top. The heading's wrapper pads 64px + 120px above it
and the Method section above ends on 120px, so 331px of black separated the
last Method step from "Ways to Work With Nick". Both go to 64px. And the
book photo is set 10% in from the left for the desktop composition, which
on a phone just left a 38px strip down the left with no photo in it. */
@media (max-width: 640px) {
.offers-copy-grid {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: var(--sp-40) !important;
}
.offers-copy-grid > div:first-child { gap: 18px !important; }
.offers-copy-grid { padding-bottom: 64px !important; }
.offers-sec > .wrap:not(.offers-copy-grid) { padding-top: 64px !important; }
.method-sec { padding-bottom: 64px !important; }
.offers-bg-img.offers-bg-book { inset: 0; }
.offers-sec .offer-desc { font-size: 18px !important; }
}
/* Every large body paragraph on a phone. The design's --fs-body-lg is
1.375rem, 22px, at all widths, and section by section each one has been
asked down to the site's 18px body size. Set it once for phones instead.
Measured across all six pages, the only text at 22px on a phone were these
paragraphs and the opt-in heading "Save Your Seat", which sets a literal
22px and so stays. The heroes that were tuned on their own (About 20px,
Work With Me 19px) set the variable on their own class, which outranks
:root, so they keep their sizes. */
@media (max-width: 640px) {
:root { --fs-body-lg: 18px; }
}
/* Success Stories on a phone. Its sections keep their desktop 96px top and
bottom, so between the stories ("More stories at lifeonfire.com") and
"Our Community On Fire" there was 192px of nothing; use the site's 64px
phone padding. The proof carousel under the community cards then adds its
own 64px above and below (set inline, hence !important), which left 176px
of white above the screenshots; it sits close under the cards and keeps a
little more below, before the final CTA. */
@media (max-width: 640px) {
.ss-sec { padding-top: 64px; padding-bottom: 64px; }
.ss-sec + section:has(> .wwm-proof) { padding: 16px 0 48px !important; }
}
/* Bestseller on Fire workshop band, tablet and phone. Both of its darkening
layers are left-to-right gradients built for desktop, where the copy is a
column on the left: the veil fades to nothing by 56% across, and the panel
behind the copy fades out at its right edge. Below 1024px the copy runs the
full width, so its right half sat on the lit shelves and lamp with no shade
at all. Shade the whole band evenly instead, top to bottom, and drop the
panel, which would only add a hard edge. */
@media (max-width: 1024px) {
.workshop-hero-veil {
background: linear-gradient(180deg, rgba(6,6,6,.82) 0%, rgba(6,6,6,.74) 55%, rgba(6,6,6,.86) 100%);
}
.workshop-copy::before { display: none; }
}
@media (max-width: 640px) {
/* The copy and the "Save Your Seat" opt-in sit 56px apart, a desktop gap
between two columns' worth of content; stacked on a phone it read as a
hole. Half that keeps them as separate blocks. */
.workshop-hero-in { gap: 28px; }
/* Plain black behind the whole band on a phone, like the Method section.
The workshop photo now sits in its own frame above "Save Your Seat", so
the same shelves dimmed behind the copy only repeated it as texture. */
.workshop-hero { background: var(--nu-black); }
.workshop-hero-veil { display: none; }
/* The Workshop card's photo, the laptop showing the Bestseller on Fire
book, set above "Save Your Seat" as a picture of what the seat is for.
Same photo, 4:3 frame, radius and hairline border as the card in "Ways to
Work With Nick", so the two read as the same offer. The band itself has no
image in its markup, so it is drawn as a pseudo-element on the opt-in.
The photo carries a heavy shade baked into its left half, for desktop copy
to sit on: the sky reads about 10 of 255 across the left 40% and only
clears past 55%. So this frames just the lit part, centred on the laptop
(which spans roughly 1035-1555px across, 408-770px down): a 640x480
window starting 960px across and 349px down the 1920x981 photo, the whole
laptop with a margin of skyline either side. As background maths:
1920/640 is a 300% size; 960 of the 1280px horizontal slack is 75%; and
349 of the 501px vertical slack is 69.7%. */
.workshop-optin::before {
content: '';
display: block;
aspect-ratio: 4 / 3;
margin-bottom: 28px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: url('assets/offers-book-bg-calm3.jpg') 75% 69.7% / 300% auto no-repeat;
}
}
/* Homepage "Ways to Work With Nick" as cards on a phone. The tab rail needs
a tap per offer and shows one at a time over a dim photo; on a phone all
four offers are stacked down the page instead as full-width cards, each
with its photo on top and its copy and button below, so the page simply
scrolls through them. The card list is in the markup at every width and
only shown here. The photo, veil and tab rail are hidden here; the veil is
the unclassed div styled inline after the photo. The dots were for an
earlier side-scrolling version and stay hidden. */
.offers-carousel, .offers-dots { display: none; }
@media (max-width: 640px) {
.offers-sec > .offers-bg-img,
.offers-sec > .offers-bg-img + div,
.offers-sec > .offers-copy-grid { display: none !important; }
.offers-carousel {
display: flex;
flex-direction: column;
gap: 20px;
padding: 32px 20px 64px;
position: relative;
}
.offers-card {
display: flex;
flex-direction: column;
background: #1b1716;
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
overflow: hidden;
}
.offers-card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.offers-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The Workshop card's photo has the baked left-half shade described at the
workshop band below, so it takes the same centred 640x480 window on the
laptop. An ![]()
cannot be cropped with background maths, so it is sized
and shifted instead: 300% of the card wide, moved left 960/640 = 150% of
the card width and up 349/640 = 54.53% of it (margin percentages are of
the width), with the frame's overflow hidden doing the crop. */
.offers-card-img img[src$="offers-book-bg-calm3.jpg"] {
width: 300%;
max-width: none;
height: auto;
margin: -54.53% 0 0 -150%;
}
.offers-card-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 22px 20px 24px;
}
.offers-card-title {
font-family: var(--font-display);
font-weight: 300;
font-size: 26px;
line-height: 1.15;
color: var(--nu-white);
margin: 0 0 14px;
}
.offers-card-desc {
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,.8);
margin: 0 0 24px;
}
.offers-card-body > button { margin-top: auto; width: 100%; justify-content: center; text-align: center; }
}
/* Narrow phones, below the 360px the Work With Me hero was tuned for. See the
note in the 640px block: scaling the photo there drives Nick's face off the
right edge, so these widths keep the unscaled photo and drop the heading back
below his chin instead. */
@media (max-width: 359px) {
.wwm-hero-in { padding-top: 256px; }
.wwm-hero-bg { height: 100%; }
}