, which is tight-leading block text.
*/
align-content: flex-start;
gap: 0 0.35em;
}
.js:not(.intro-done) .intro {
display: flex;
}
/*
* Scoped to .hero on purpose. `.intro-done` is only ever set by the front
* page's intro script, so an unscoped `.pillars` rule leaves the same block
* permanently invisible anywhere else it is reused — the About page renders
* the slogan with this markup and would have shipped a blank row.
*/
.js:not(.intro-done) .headline-final,
.js:not(.intro-done) .hero-sub,
.js:not(.intro-done) .hero-cta,
.js:not(.intro-done) .hero .pillars {
opacity: 0;
transform: translateY( 12px );
}
.headline-final {
transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}
.intro.done {
pointer-events: none;
}
.intro-word {
font-weight: 700;
font-size: clamp( 2.75rem, 7vw, 6.5rem );
line-height: 1.02;
letter-spacing: -0.025em;
opacity: 0;
transform: translateY( 30px );
transition: opacity 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
.intro-word.in {
opacity: 1;
transform: none;
}
/* The third word carries the accent (§8). */
.intro-word:nth-child(3) {
color: var(--accent);
}
.intro.out .intro-word {
opacity: 0;
transform: translateY( -18px );
transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-sub {
margin-top: clamp( 1.5rem, 3vw, 2.25rem );
font-size: clamp( 1.05rem, 1.6vw, 1.3rem );
color: var(--ink-60);
max-width: 44ch;
transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}
.hero-cta {
margin-top: clamp( 1.75rem, 3.5vw, 2.75rem );
display: flex;
align-items: center;
gap: 1.75rem;
flex-wrap: wrap;
transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s;
}
/*
* The reveal works by removing `.intro-done` from the element, not by
* adding a class here. A `.headline-final.show` rule (0,2,0) would lose to the
* hiding rule `.js:not(.intro-done) .headline-final` (0,3,0) and never apply.
* Once the root class is set, these elements return to their default opacity
* and the transition-delays below produce the stagger.
*/
/* ==========================================================================
Pillars (§9) — the slogan lives here as structure, not as the headline.
========================================================================== */
.pillars {
margin-top: clamp( 3rem, 7vw, 6rem );
border-top: 1px solid var(--ink-12);
padding-top: 1.75rem;
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: clamp( 1rem, 3vw, 3rem );
transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}
/* An for document outline, but it must not inherit the h2 display scale. */
.pillar-k {
font-weight: 600;
font-size: 1.05rem;
line-height: 1.5;
letter-spacing: 0;
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.pillar-k .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
.pillar:nth-child(2) .dot {
background: var(--ink);
}
/* The one cool accent, used exactly once (§5). */
.pillar:nth-child(3) .dot {
background: var(--blue);
}
.pillar-d {
font-size: 0.9rem;
color: var(--ink-60);
max-width: 26ch;
}
/* ==========================================================================
Interior page shell
========================================================================== */
.site-main {
padding-top: calc( var(--nav-h) + clamp( 2rem, 5vw, 4rem ) );
padding-bottom: var(--pad-section);
}
.page-header {
margin-bottom: clamp( 2rem, 4vw, 3.5rem );
}
.entry-content > * + * {
margin-top: 1.25rem;
}
/*
* Measure cap (§4). Interior pages render generic page content through
* .entry-content, which had no max-width and so ran the full 1224px container —
* ~150-160 characters per line on /racing-simulators/, /lounge/ and
* /diy-service-bays/, against a comfortable 45-75. The theme already applies
* this rule selectively (.section-lead at 44ch, .how-statement at 24ch); it was
* simply never extended to the content that every interior page actually uses.
*
* Direct children only. Prose blocks nested inside a layout component — the
* partner blocks' copy column, the pricing cards, the contact grid — set their
* own width from their container and must not be capped twice.
*
* Headings are included deliberately: an h2 running to 1224px above a capped
* paragraph reads as unmoored from the text it introduces.
*
* Inert on mobile — at 390px the measure is already ~40ch, well inside the cap,
* so this needs no breakpoint.
*/
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
max-width: var(--measure);
}
/*
* Layout, not prose. These are direct children of .entry-content on the pages
* that use them, and they are grids/rows that need the full container.
* .alignwide and .alignfull set their own max-width below.
*/
.entry-content > .partner,
.entry-content > .beanz,
.entry-content > .pricing-grid,
.entry-content > .contact-grid,
.entry-content > .partner-specs,
.entry-content > .media-split,
.entry-content > .pillars,
.entry-content > table,
.entry-content > figure {
max-width: none;
}
/*
* The pillars carry their own top margin, which `.entry-content > * + *` would
* otherwise flatten to 1.25rem (equal specificity, later in the file) and
* collapse the breathing room the hairline needs above it.
*/
.entry-content > .pillars {
margin-top: clamp( 2.5rem, 5vw, 4rem );
}
/*
* A closing call to action. At the default 1.25rem it tucked under whatever
* precedes it — under the pillars it read as part of the first column rather
* than as the page's last move.
*/
.entry-content > .entry-cta {
margin-top: clamp( 2.5rem, 5vw, 3.5rem );
}
.entry-content > h2,
.entry-content > h3 {
margin-top: 2.5rem;
}
.entry-content ul,
.entry-content ol {
padding-left: 1.25rem;
}
.entry-content img {
border-radius: 0;
}
/* ==========================================================================
Shop photography
The client's own photos of the space (handoff §13: "sells on the space
looking capable and clean; avoid stock"). Square corners, no frame, no
shadow (§11) — the photo is the content, so nothing is drawn around it.
.entry-figure is a full-width photo set directly under the heading it
illustrates. The files are pre-cropped to 16:9 so one never runs taller
than the viewport; width/height come from the attachment, so the box is
reserved before the image loads.
========================================================================== */
.entry-figure img {
width: 100%;
}
/* More air than the 1.25rem prose rhythm on both sides, or the photo reads
as wedged between heading and paragraph. A following keeps
its own, larger top margin. */
.entry-content > .entry-figure,
.entry-content > .entry-figure + :not( h2 ) {
margin-top: clamp( 1.5rem, 3vw, 2rem );
}
/* Copy beside a photo — the DIY Service Bays inventory list next to the
workstation that holds it. Same flex shape as .partner, top-aligned
because the list is longer than the photo is tall. */
.media-split {
display: flex;
align-items: flex-start;
gap: clamp( 2rem, 6vw, 4.5rem );
}
.media-split-body {
flex: 1 1 auto;
min-width: 0;
}
.media-split-media {
flex: 0 0 auto;
width: clamp( 16rem, 36vw, 30rem );
}
.media-split-img {
width: 100%;
}
/* A partner's photo sits under its logo in the media column. */
.partner-photo {
width: 100%;
margin-top: clamp( 1.5rem, 3vw, 2rem );
}
/*
* Separator block. The theme never styled it, so core's default won — including
* the "dots" style, which renders three centred bullets. Every other divider on
* this site is a 1px --ink-12 hairline (partner blocks, pricing cards, the
* footer, the account nav), so match that and ignore the style variation
* rather than carry a second divider language.
*/
.wp-block-separator {
border: 0;
border-top: 1px solid var(--ink-12);
height: 0;
margin-block: clamp( 1.5rem, 4vw, 2.5rem );
}
.wp-block-separator.is-style-dots::before {
content: none;
}
.alignwide {
max-width: min( var(--wrap), 100% );
}
.alignfull {
max-width: 100vw;
margin-inline: calc( 50% - 50vw );
}
/* ==========================================================================
Partner block — Boosted Beanz (Lounge), BendPak & Sonic Tools
(Featured Partners, DIY Service Bays)
The same shape as the hero's .hero-top, and deliberately so: the copy is
the primary content and leads on the left, the partner lockup is the
secondary mark on the right. At the theme's 760px breakpoint the row
collapses to one column and the logo — placed after the text in the DOM —
stacks underneath it.
Each logo is that company's own brand asset, so Boosted Beanz's pinks,
BendPak's blue and grey, and Sonic's red dot are third-party marks rather
than a second SDC accent; §11's single-accent rule governs what WE draw,
and everything around the images here is --ink-12 and existing spacing
clamps. No new tokens. (If a future reader is about to "fix" the blue:
don't — we have written permission to reproduce these marks as supplied.)
.beanz is kept alongside .partner rather than renamed away. The Lounge
page's markup lives in the database, not in git, so an environment where
sdc-create-content-pages.php has not been re-run still holds the old
.beanz classes — dropping the selector would silently unstyle that page
on staging.
========================================================================== */
.beanz,
.partner {
display: flex;
align-items: center;
gap: clamp( 2rem, 6vw, 4.5rem );
/* Sets this block off as its own thing after the client's body copy,
rather than reading as a fifth paragraph with a picture. */
margin-top: clamp( 2.5rem, 6vw, 4rem );
padding-top: clamp( 2.5rem, 6vw, 4rem );
border-top: 1px solid var(--ink-12);
}
/* Logo left, copy right for alternate entries. A modifier class, not
:nth-child — these blocks are siblings of every paragraph and heading in
.entry-content, so an nth-child rule would alternate off a count that
shifts whenever the surrounding copy changes. */
.partner--reverse {
flex-direction: row-reverse;
}
/* min-width:0 lets the text column shrink so the copy wraps instead of
pushing the logo off the row (same reason as .hero-body). */
.beanz-body,
.partner-body {
flex: 1 1 auto;
min-width: 0;
}
/*
* Partner copy takes the same measure as the rest of the page.
*
* This started as a fix for logo-less blocks, which have no second column to
* be constrained by and so ran the full 1224px. Measuring the two-column
* blocks to confirm they were fine showed they were not: the body column is
* 784px, which is 111 characters a line — further past the comfortable band
* than the .entry-content prose that prompted the cap in the first place. It
* reads acceptably only because these blurbs are three lines long.
*
* So the cap applies to every partner block, with or without a logo.
*
* The spec rows are deliberately left full-width. They are a table of short
* label-length values, not prose, and letting them run keeps them scannable
* against the hairline rules that separate them.
*/
.partner-body > p,
.beanz-body > p {
max-width: var(--measure);
}
/* .entry-content > * + * only reaches direct children, so the heading and
paragraph inside this block need their own rhythm. */
.beanz-body > * + *,
.partner-body > * + * {
margin-top: 1.25rem;
}
.beanz-logo {
flex: 0 0 auto;
display: block;
width: clamp( 13rem, 26vw, 23rem );
height: auto;
}
/* Partner logos are sized on their wrapper rather than the ![]()
itself. The
wrapper is what wpautop cannot swallow into a
keeps
its own, larger top margin. */
.entry-content > .entry-figure,
.entry-content > .entry-figure + :not( h2 ) {
margin-top: clamp( 1.5rem, 3vw, 2rem );
}
/* Copy beside a photo — the DIY Service Bays inventory list next to the
workstation that holds it. Same flex shape as .partner, top-aligned
because the list is longer than the photo is tall. */
.media-split {
display: flex;
align-items: flex-start;
gap: clamp( 2rem, 6vw, 4.5rem );
}
.media-split-body {
flex: 1 1 auto;
min-width: 0;
}
.media-split-media {
flex: 0 0 auto;
width: clamp( 16rem, 36vw, 30rem );
}
.media-split-img {
width: 100%;
}
/* A partner's photo sits under its logo in the media column. */
.partner-photo {
width: 100%;
margin-top: clamp( 1.5rem, 3vw, 2rem );
}
/*
* Separator block. The theme never styled it, so core's default won — including
* the "dots" style, which renders three centred bullets. Every other divider on
* this site is a 1px --ink-12 hairline (partner blocks, pricing cards, the
* footer, the account nav), so match that and ignore the style variation
* rather than carry a second divider language.
*/
.wp-block-separator {
border: 0;
border-top: 1px solid var(--ink-12);
height: 0;
margin-block: clamp( 1.5rem, 4vw, 2.5rem );
}
.wp-block-separator.is-style-dots::before {
content: none;
}
.alignwide {
max-width: min( var(--wrap), 100% );
}
.alignfull {
max-width: 100vw;
margin-inline: calc( 50% - 50vw );
}
/* ==========================================================================
Partner block — Boosted Beanz (Lounge), BendPak & Sonic Tools
(Featured Partners, DIY Service Bays)
The same shape as the hero's .hero-top, and deliberately so: the copy is
the primary content and leads on the left, the partner lockup is the
secondary mark on the right. At the theme's 760px breakpoint the row
collapses to one column and the logo — placed after the text in the DOM —
stacks underneath it.
Each logo is that company's own brand asset, so Boosted Beanz's pinks,
BendPak's blue and grey, and Sonic's red dot are third-party marks rather
than a second SDC accent; §11's single-accent rule governs what WE draw,
and everything around the images here is --ink-12 and existing spacing
clamps. No new tokens. (If a future reader is about to "fix" the blue:
don't — we have written permission to reproduce these marks as supplied.)
.beanz is kept alongside .partner rather than renamed away. The Lounge
page's markup lives in the database, not in git, so an environment where
sdc-create-content-pages.php has not been re-run still holds the old
.beanz classes — dropping the selector would silently unstyle that page
on staging.
========================================================================== */
.beanz,
.partner {
display: flex;
align-items: center;
gap: clamp( 2rem, 6vw, 4.5rem );
/* Sets this block off as its own thing after the client's body copy,
rather than reading as a fifth paragraph with a picture. */
margin-top: clamp( 2.5rem, 6vw, 4rem );
padding-top: clamp( 2.5rem, 6vw, 4rem );
border-top: 1px solid var(--ink-12);
}
/* Logo left, copy right for alternate entries. A modifier class, not
:nth-child — these blocks are siblings of every paragraph and heading in
.entry-content, so an nth-child rule would alternate off a count that
shifts whenever the surrounding copy changes. */
.partner--reverse {
flex-direction: row-reverse;
}
/* min-width:0 lets the text column shrink so the copy wraps instead of
pushing the logo off the row (same reason as .hero-body). */
.beanz-body,
.partner-body {
flex: 1 1 auto;
min-width: 0;
}
/*
* Partner copy takes the same measure as the rest of the page.
*
* This started as a fix for logo-less blocks, which have no second column to
* be constrained by and so ran the full 1224px. Measuring the two-column
* blocks to confirm they were fine showed they were not: the body column is
* 784px, which is 111 characters a line — further past the comfortable band
* than the .entry-content prose that prompted the cap in the first place. It
* reads acceptably only because these blurbs are three lines long.
*
* So the cap applies to every partner block, with or without a logo.
*
* The spec rows are deliberately left full-width. They are a table of short
* label-length values, not prose, and letting them run keeps them scannable
* against the hairline rules that separate them.
*/
.partner-body > p,
.beanz-body > p {
max-width: var(--measure);
}
/* .entry-content > * + * only reaches direct children, so the heading and
paragraph inside this block need their own rhythm. */
.beanz-body > * + *,
.partner-body > * + * {
margin-top: 1.25rem;
}
.beanz-logo {
flex: 0 0 auto;
display: block;
width: clamp( 13rem, 26vw, 23rem );
height: auto;
}
/* Partner logos are sized on their wrapper rather than the ![]()
itself. The
wrapper is what wpautop cannot swallow into a
(see the note in sdc_content_pages_partner_block()), so it is the reliable flex item; the image then just fills it. This also stops sizes="auto" from feeding a collapsed layout width back into srcset selection. */ .partner-media { flex: 0 0 auto; width: clamp( 13rem, 26vw, 23rem ); } /* * A fixed optical box, for two reasons. * * Layout stability: sonic-logo.svg carries a viewBox but no width/height * attributes and is lazy-loaded, so with `height: auto` it reserved no space * and the block reflowed as the file decoded — the logo was simply absent on * first paint. A declared height reserves the row whatever the source is. * * Optical parity: the marks are supplied at wildly different proportions * (BendPak lands at 368x43, Sonic at 368x88), so at 100% width one partner * read twice the weight of the other for no reason but its source file. * Containing both in the same box lets them sit on a common baseline. * * Colours are untouched — see the note above; these are licensed third-party * marks and §11's single-accent rule governs what we draw, not what they do. */ .partner-logo { display: block; width: 100%; height: clamp( 3.5rem, 7vw, 5.5rem ); object-fit: contain; object-position: center; } /* The model name, sitting under the partner's name. It carries .mono, which already supplies the face, size, tracking and --ink-60 — all this adds is a tighter gap than the block's 1.25rem rhythm, because the model name belongs to the