` shape
precisely so this rule keeps reaching it. */
/* THE ARTICLE PAGE'S `#more` BAND JOINS THIS LIST WITHOUT HAVING BEEN MEASURED,
which is a first and is stated rather than slipped in. Every other selector
above was added after its band was compared against the prototype; there is no
prototype for an article page (BUILD-DECISIONS 23.2), so the justification is
the opposite direction - `ugcza_render_article_more()` emits the same
`` shape inside a `.sec-h .row` that five measured bands
use, so leaving it off this list would be the deviation. `.pg-news #more`
rather than a bare `#more`: the id is generic enough that a future page could
claim it, and the body class cannot leak because only a single post and a post
archive wear it. */
.pg-news #more .sec-h .row .more a::after,
#brands .sec-h .row .more a::after,
#press .sec-h .row .more a::after,
#press-coverage .sec-h .row .more a::after,
.pg-portfolio .sec-h .row .more a::after,
.pg-press-kit .sec-h .row .more a::after,
#portfolio .sec-h .row .more a::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- Pools pulled below the header rows (new) ----------
Appended rather than edited: #about .about-bg beats the original
.about-bg on specificity and the repeated ::before wins on order.
Each pool's vertical radius is solved so the falloff reaches
transparent above ~30% of the layer, which is where the .sec-h row
sits. The eyebrow then lands on unwashed ground, where it measures
5.56 / 4.98 / 4.77 on --surface-1 / -3 / -4. */
/* The opaque stop is PURE BLACK, not the brand near-black. The port folded
`#000` onto --ds-color-bg-subtle (#0a0a0a) because they look the same, and in
a mask they are not a colour at all - the gradient is read as alpha, and the
two other stops in this same gradient are already channel-shadow. Folding one
stop of a three-stop gradient onto a surface role left the mask describing
itself in two different vocabularies, and the computed-style comparison
reported it as `rgb(0,0,0)` against `rgb(10,10,10)`. PORT-07 and PORT-08. */
#about .about-bg, #about::before {
-webkit-mask-image: radial-gradient(66% 44% at 30% 66%, rgb(var(--ds-color-channel-shadow)) 0%, rgba(var(--ds-color-channel-shadow), 0.72) 40%, transparent 88%);
mask-image: radial-gradient(66% 44% at 30% 66%, rgb(var(--ds-color-channel-shadow)) 0%, rgba(var(--ds-color-channel-shadow), 0.72) 40%, transparent 88%);
}
#brands .wash-bg, #brands::before {
-webkit-mask-image: radial-gradient(88% 40% at 50% 66%, var(--ds-color-bg-subtle) 0%, rgba(var(--ds-color-channel-shadow), 0.78) 46%, transparent 86%);
mask-image: radial-gradient(88% 40% at 50% 66%, var(--ds-color-bg-subtle) 0%, rgba(var(--ds-color-channel-shadow), 0.78) 46%, transparent 86%);
}
/* == tile grounds: filled by tilebg.py == */
/* Testimonial panels: a ground rather than a flat plate. The quote is large
type but the attribution under it is not, so the scrim is sized for the
attribution. */
.tslide {
position: relative;
overflow: hidden;
}
.tslide > * {
position: relative;
z-index: 2;
}
.ts-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
}
.tslide::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(160deg, rgba(var(--ds-color-channel-scrim), 0.88) 0%, rgba(var(--ds-color-channel-scrim), 0.74) 100%);
}
/* Brands band: a real ground, not a wash.
This section was .sec.teal (#1e3a38), dropped 2026-08-12 because the client
did not want a flat chromatic band, then carried a blurred-photo wash over
#222222. It now takes a teal-MAPPED ground from "Overlayed backgrounds/" -
the colour relationship the client knows, without the flat chroma, and an
actual picture rather than a filter stack.
The wash machinery is switched off here rather than deleted, because #about
still uses its own .about-bg implementation and the two were kept in step.
The scrim is heaviest at the very top: the .sec-h row sits in the first ~10%
of the band and its 11px orange eyebrow is the tightest contrast on the page
- orange on flat #131313 is 5.43:1, and under the old pool it fell to ~4.3
and missed the floor. Keep the scrim off nothing above that row. */
#brands {
background: var(--ds-color-bg-surface-4) url(ASSET) center/cover no-repeat;
}
#brands .wash-bg {
display: none;
}
#brands::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(var(--ds-color-channel-scrim), 0.94) 0%, rgba(var(--ds-color-channel-scrim), 0.8) 18%, rgba(var(--ds-color-channel-scrim), 0.58) 46%, rgba(var(--ds-color-channel-scrim), 0.58) 100%);
-webkit-mask-image: none;
mask-image: none;
}
#brands {
--veil: var(--ds-color-bg-mosaic-veil);
--veil-a: .96;
--mos-bright: .92;
--mos-sat: .6;
--cap: var(--ds-color-bg-mosaic-cap);
--cap-solid: 200px;
--cap-fade: 340px;
background: var(--ds-color-bg-mosaic-ground);
position: relative;
overflow: hidden;
}
#brands::before {
content: none;
}
#brands .logo-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
display: grid;
overflow: hidden;
align-content: start;
grid-template-columns: repeat(var(--mos-cols), 1fr);
filter: saturate(var(--mos-sat)) brightness(var(--mos-bright));
}
#brands .logo-bg i {
aspect-ratio: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#brands .logo-veil {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: var(--veil);
opacity: var(--veil-a);
}
#brands .logo-cap {
position: absolute;
inset: 0 0 auto 0;
z-index: 2;
pointer-events: none;
height: var(--cap-fade);
background: linear-gradient(180deg, var(--cap) 0, var(--cap) var(--cap-solid), transparent 100%);
}
#brands > .shell {
position: relative;
z-index: 3;
}
#brands .brands {
position: relative;
z-index: 3;
}
#brands {
--mos-cols: 18;
}
@media (max-width: 1279px) {
#brands {
--mos-cols: 15;
}
}
@media (max-width: 899px) {
#brands {
--mos-cols: 9;
}
}
@media (max-width: 519px) {
#brands {
--mos-cols: 6;
}
}
.wp-block-button.btn > .wp-block-button__link,
.wp-block-button.btn.is-style-outline > .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--ds-font-heading);
font-size: var(--ds-size-button);
font-weight: var(--ds-weight-semibold);
line-height: var(--ds-leading-relaxed);
padding: 13px 24px;
height: auto;
border-radius: var(--ds-radius-md);
border: var(--ds-control-border-width) solid transparent;
background: var(--ds-color-btn-primary-bg);
color: rgb(var(--ds-color-channel-light));
text-decoration: none;
transition: background var(--ds-motion-fast) var(--ds-motion-ease), color var(--ds-motion-fast) var(--ds-motion-ease), border-color var(--ds-motion-fast) var(--ds-motion-ease), transform 0.12s var(--ds-motion-ease);
}
.wp-block-button.btn > .wp-block-button__link:hover,
.wp-block-button.btn.is-style-outline > .wp-block-button__link:hover {
background: var(--ds-color-btn-primary-hover-bg);
}
.wp-block-button.btn.line > .wp-block-button__link,
.wp-block-button.btn.line.is-style-outline > .wp-block-button__link {
background: transparent;
border-color: var(--ds-color-btn-secondary-border);
color: var(--ds-color-fg-heading);
}
.wp-block-button.btn.line > .wp-block-button__link:hover,
.wp-block-button.btn.line.is-style-outline > .wp-block-button__link:hover {
background: var(--ds-color-btn-secondary-hover-bg);
border-color: var(--ds-color-btn-secondary-hover-border);
color: var(--ds-color-btn-secondary-hover-text);
}
.wp-block-button.btn.sm > .wp-block-button__link {
padding: 9px 16px;
font-size: 15px;
}
.wp-block-button.btn,
.wp-block-button.btn:hover {
background: none;
border: 0;
padding: 0;
height: auto;
}
.pg-about .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-about .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-about h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-about h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-about .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* The testimonial panel is the same step down, and it is the only component on
this page that ALSO renders on the homepage, so these four cannot go in
_brands.scss without moving the homepage with them. Prototype values, both
files diffed rather than guessed: `.tslide` 26->24 padding and .28->.3
ground, `.who` 20->18, and `.tcar` loses the homepage's 6px lead-in because
`.sec-h`'s own margin-bottom is the gap on this page. */
.pg-about .tcar {
margin-top: 0;
}
.pg-about .tslide {
background: rgba(var(--ds-color-channel-shadow), 0.3);
padding: clamp(24px, 4vw, 42px);
}
.pg-about .tslide .who {
margin-top: 18px;
}
/* ---------- page head ----------
Every page in this design opens with this band rather than a post title.
Pure black ground with two radial pools over it and a left-weighted scrim
pulling the type side back down - the h1 sits on the dark end, the colour
lives on the right where nothing is read. */
.phead {
position: relative;
background: rgb(var(--ds-color-channel-shadow));
overflow: hidden;
padding: clamp(46px, 7vw, 92px) 0 clamp(40px, 6vw, 76px);
}
.phead::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(62% 90% at 78% 20%, rgba(var(--ds-color-channel-key), 0.42), transparent 62%), radial-gradient(50% 80% at 10% 100%, rgba(var(--ds-color-channel-alt), 0.85), transparent 62%);
}
.phead::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(var(--ds-color-channel-shadow), 0.92) 0%, rgba(var(--ds-color-channel-shadow), 0.7) 46%, rgba(var(--ds-color-channel-shadow), 0.3) 100%);
}
.phead .shell {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 16px;
}
.crumb {
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
.crumb a:hover {
color: var(--ds-color-brand-accent);
}
/* ---------- story ----------
Two columns that fold to one below ~660px: the copy on the left, the
showreel and the press-kit call on the right. `auto-fit` rather than a
fixed pair, so the fold is driven by the 300px minimum the copy needs
rather than by a breakpoint invented here. */
.story {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(26px, 4vw, 58px);
align-items: start;
}
.story p {
color: var(--ds-color-fg-default);
line-height: 1.78;
}
.story strong {
color: var(--ds-color-fg-heading);
font-weight: 600;
}
/* The drop cap is the only place on the site where type is set from the
heading face at a multiple of its own size, so it is expressed in `em` and
follows whatever the paragraph resolves to. */
.drop::first-letter {
font-family: var(--ds-font-heading);
font-size: 3.4em;
float: left;
line-height: 0.82;
padding: 4px 12px 0 0;
color: var(--ds-color-brand-primary);
}
/* The press-kit call under the showreel. The prototype writes this as an
inline `margin-top:26px` on the wrapper, which is a value in markup; the
class carries it here instead. It has to outrank the `.story>*>*` block-gap
reset at the foot of this file, which it does on SPECIFICITY - (0,2,0)
against that rule's (0,1,0) - and not on source order, so moving either one
does not silently drop the gap. `margin-top` and the reset's
`margin-block-start` are the same computed property in this writing mode and
do compete. */
.story .go {
margin-top: 26px;
}
/* ---------- the showreel, in the About page's own dress ----------
`.reel` IS A SHARED SELECTOR WITH TWO DIFFERENT VALUES, which is the same
class of finding as the five scale values at the head of this file. The
homepage prototype carries the two-row treatment - a `.watch` call set into
the bottom of the frame under a tall scrim, disc clamped to the frame - and
`_about.scss` is the port of that. THIS page's prototype carries the older
arrangement and still does: one 80px disc centred in the whole frame, a
shallow scrim foot, and a `.cap` line bottom-left. Both files were compared
directly rather than assumed, as the header of this file requires.
An earlier revision took the homepage's treatment here on the grounds that
there is one `.reel` in the design system and the two-row version replaced
it on 2026-08-12. That reasoning does not survive the second half of the
sentence: the replacement was made ON THE HOMEPAGE, this page's prototype
was regenerated after it (13:38 on 2026-08-13) and still carries the centred
disc, and `_portfolio-page.scss` had already forked the same three rules for
the same reason. So the divergence is the design, not drift.
The block markup follows: `wp:ugcza/about-reel {"call":"caption"}` emits a
`.cap` where the homepage emits a `.watch`, because the copy differs too and
CSS cannot rewrite a string. */
.pg-about .reel {
display: grid;
grid-template-rows: none;
place-items: center;
}
/* A shallow foot rather than the homepage's tall ramp: this frame carries one
11px line at the very bottom, not a 40px headline halfway up it, so the
scrim only has to hold `fg-default` over the last few rows and the still
gets the rest of the box back. The stops are the prototype's own. */
.pg-about .reel::after {
background: linear-gradient(0deg, rgba(var(--ds-color-channel-scrim), 0.92) 0%, rgba(var(--ds-color-channel-scrim), 0.88) 16%, rgba(var(--ds-color-channel-scrim), 0.45) 28%, transparent 46%);
}
/* Fixed 80px, not the homepage's clamp, and centred in the WHOLE frame rather
than in row 1 of two. `grid-row:auto` undoes both the `1/3` span and the
`@media (max-width:479px)` override in _about.scss - a media query adds no
specificity, so this (0,3,0) selector wins at every width, which is what is
wanted here because there is no second row for a disc to land on. */
.pg-about .reel .play {
grid-row: auto;
grid-column: auto;
width: 80px;
height: 80px;
}
/* PURE white, not the brand's #f9fafa: the prototype paints this triangle
`#fff` and the two are 6/255 apart - small enough to read as a fold and
large enough for a computed-style comparison to report it (PORT-08). */
.pg-about .reel .play::after {
border-left: 22px solid rgb(var(--ds-color-channel-light));
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
margin-left: 6px;
}
/* The caption, where the homepage's reel carries its watch call. Absolutely
positioned rather than placed in the grid, because the disc is centred in the
whole frame and there is no second row for this to sit in. */
.pg-about .reel .cap {
position: absolute;
z-index: 3;
left: 16px;
bottom: 14px;
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
}
/* ---------- founders ----------
A portrait card: a 4:5 plate carrying the photograph, a gradient foot over
it, and the name block beneath. The photograph arrives on the element as
`--pi` because it comes from the media library; the gradient does NOT,
because it is identical on every card and is design rather than content.
In the prototype it was inlined as `--pg` on all three cards at once, which
is the same value written three times in markup. */
.founders {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
gap: 18px;
}
.fdr {
background: var(--ds-color-bg-subtle);
display: flex;
flex-direction: column;
overflow: hidden;
}
.fdr .por {
aspect-ratio: 4/5;
position: relative;
background: var(--ds-color-bg-lift);
background-image: var(--pi);
background-size: cover;
background-position: 50% 50%;
}
/* Transparent to 54%, then down to .6. Kept off the photograph itself so a
portrait that is already dark at the foot does not double up. */
.fdr .por::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(var(--ds-color-channel-portrait), 0) 54%, rgba(var(--ds-color-channel-portrait), 0.6));
}
.fdr .por span {
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
right: 0;
padding: 16px 17px;
background: linear-gradient(0deg, rgba(var(--ds-color-channel-shadow), 0.9), transparent);
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
}
.fdr .b {
padding: 18px 19px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.fdr .b h4 {
font-size: 24px;
}
.fdr .b .role {
font-family: var(--ds-font-label);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-color-brand-accent);
}
.fdr .b p {
font-size: 14.5px;
color: var(--ds-color-fg-default);
line-height: 1.55;
}
/* ---------- mission ---------- */
.mission {
border-left: 5px solid var(--ds-color-brand-primary);
padding: clamp(20px, 3vw, 34px) 0 clamp(20px, 3vw, 34px) clamp(22px, 3vw, 38px);
}
.mission p {
font-size: clamp(19px, 2.4vw, 28px);
line-height: 1.48;
color: var(--ds-color-fg-heading);
font-family: var(--ds-font-heading);
font-weight: 600;
letter-spacing: -0.01em;
}
.taglines {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: 14px;
margin-top: clamp(26px, 4vw, 42px);
}
.tg {
background: var(--ds-color-bg-subtle);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 9px;
}
/* `.kind` and `.line` beside the prototype's own `span` and `b`: core's
paragraph block cannot emit a bare `` or ``, and the copy has to
stay editable in wp-admin, so the class is what carries the treatment and
the element is whichever of the two rendered it. Same bridge as
`.sp p:not(.eyebrow)` in _tiles.scss - no value changes, only the selector. */
.tg span, .tg .kind {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
}
.tg b, .tg .line {
font-family: var(--ds-font-heading);
font-size: 21px;
font-weight: 600;
line-height: 1.2;
color: var(--ds-color-fg-heading);
}
.tg.pick {
background: var(--ds-color-brand-primary);
}
.tg.pick span, .tg.pick .kind {
color: rgba(var(--ds-color-channel-light), 0.85);
}
/* PURE white, not the brand's #f9fafa. The prototype paints this line #fff on
the red plate and the two are 6/255 apart, which a computed-style comparison
reads and reports - the same fold `_wp-bridge.scss` had to undo on button
labels. The contrast is unchanged either way. */
.tg.pick b, .tg.pick .line {
color: rgb(var(--ds-color-channel-light));
}
/* ---------- values ----------
`min-height` rather than an equal-height hack: the four cards carry
different amounts of copy and the grid already stretches them, so this only
sets the floor for the shortest. */
.vals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
gap: 14px;
}
.val {
background: var(--ds-color-bg-alt-lift);
padding: 24px 21px;
display: flex;
flex-direction: column;
gap: 9px;
min-height: 150px;
}
.val .num {
font-family: var(--ds-font-label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ds-color-brand-accent);
}
.val h4 {
font-size: 21px;
line-height: 1.14;
}
/* `:not(.num)` because the number renders as a paragraph here and as a span in
the prototype, and it must not pick up the body copy's size or colour. */
.val p:not(.num) {
font-size: 14px;
color: rgba(var(--ds-color-channel-light), 0.72);
line-height: 1.5;
}
/* ---------- ambitions ----------
A card carries optional artwork under a veil, on the client's instruction of
2026-08-14 (BUILD-DECISIONS 4.8). `.art` is a SEPARATE treatment rather than
a variable filled in: an ambition with no featured image renders exactly the
flat card that shipped before, because painting the veil over the flat ground
would darken every card that has no picture to justify it.
THE VEIL IS MEASURED, AND THE FLOOR IS THE GROUND IT REPLACES. `.when` is
`fg-muted` #868686 on `bg-muted` #383838, which is 3.22:1 - the prototype's
own pairing, ported verbatim and already under 4.5:1 before any of this.
Artwork must not make it worse, so the veil holds the composite no lighter
than #383838 in the WORST case, which is a pure-white region of a photograph:
255 - 245a <= 56 gives a >= .812. At .82 the type is exactly as legible over
the brightest part of any picture as it is over the flat card today, and a
normal dark frame lands between #0e0e0e and #363636 - a ground with texture
in it rather than a picture, which is what a 135px card carrying two lines of
type can actually hold. Lifting it means lifting `.when` off `fg-muted` in
the same change, not on its own.
FLAT RATHER THAN A GRADIENT, deliberately, and this is the part that looks
like a missed opportunity. The type sits at the TOP of the card and the goal
runs to three lines on the longest of the five, so the text zone is anywhere
between 46% and 79% of the card depending on what the client types. A
gradient lightening toward the foot would pass on today's copy and drop under
the floor above the day somebody writes a longer goal - a defect that appears
when the CONTENT changes rather than when the CSS does, which is the kind no
gate here is watching for.
`--ai` is the file and arrives on the element from the media library; the
gradient does not, because it is identical on every card. Same split as
`.fdr .por` above. */
.amb {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.am {
background: var(--ds-color-bg-muted);
border-top: 3px solid var(--ds-color-brand-primary);
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 7px;
background-size: cover;
background-position: 50% 50%;
}
/* Two background layers in one declaration, not a scrim pseudo-element. A
pseudo-element over the image has to be held under the type by a stacking
context, and this page already carries the note about an element left out of
one painting UNDERNEATH the scrim it was supposed to sit above. As layers the
gradient is over the picture and both are under the text with no z-index
anywhere - the construction `.reel` already uses in _about.scss. */
.am.art {
background-image: linear-gradient(rgba(var(--ds-color-channel-scrim), 0.82), rgba(var(--ds-color-channel-scrim), 0.82)), var(--ai);
}
.am b, .am .goal {
font-family: var(--ds-font-heading);
font-size: 20px;
font-weight: 600;
line-height: 1.1;
color: var(--ds-color-fg-heading);
}
.am span, .am .when {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
/* ---------- voice ---------- */
.voice {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.vc {
background: var(--ds-color-bg-subtle);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.vc h4 {
color: var(--ds-color-brand-accent);
}
.vc ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.vc li {
font-size: 14.5px;
color: var(--ds-color-fg-default);
padding-left: 16px;
position: relative;
}
/* A 7px rule rather than a bullet glyph: neither licensed face carries a
disc that sits on this baseline, and a list-style marker cannot be
positioned. */
.vc li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 7px;
height: 1px;
background: var(--ds-color-brand-primary);
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` onto every
child of a group block through `:root :where(.is-layout-flow) > *`. On a
flex or grid container those margins ADD to the gap instead of collapsing
into it, so every band above would run its own measured gap plus 26px. The
selector is (0,1,0), equal to core's, and wins on source order because
ugcza.css is enqueued after global-styles-inline-css. Exactly the fix
`.sec-h>*` already carries in _sections.scss. */
.phead .shell > *,
.story > *, .story > * > *,
.vals > *, .val > *,
.amb > *, .am > *,
.voice > *, .vc > *,
.taglines > *, .tg > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* And the bands themselves. Each sits directly under `.sec-h`, whose own
margin-bottom is the measured gap; core's block gap on top of it would add a
second one. Same fix `.plists` already carries in _tiles.scss. `.taglines` is
not in the list because it declares its own margin-top, which outranks core's
rule on specificity (0,1,0 against 0,0,1). */
.story, .founders, .mission, .vals, .amb, .voice {
margin-block-start: 0;
}
/* `.press` and `.tcar` render on the homepage too, so they are scoped rather
than added to the line above. THE HOMEPAGE HIDES THIS ONE: block gap is a
flat 26px and the homepage's `.sec-h` margin-bottom is `clamp(26px,3.6vw,44px)`,
so the larger of the two collapsing margins is always the right one there. On
this page `.sec-h` starts at 24px, block gap wins below ~765px, and both
bands sat 2px low at 390 and correct at 1440 - which reads as a mobile-only
defect rather than as the shared rule it is. */
.pg-about .press, .pg-about .tcar {
margin-block-start: 0;
}
/* After the reset above, and higher specificity than it, so the paragraph
rhythm inside the story survives. */
.story p + p {
margin-top: 17px;
}
/* ---------- the page head ------------------------------------------------- */
/* THE BAND ITSELF IS NOT DEFINED HERE. `.phead`, its two wash layers and
`.crumb` are shared by every inner page and land in `_about-page.scss`, which
is where the first of them arrived. Only two things are added to that base:
the type sizes, which every inner-page prototype sets identically and which
differ from the homepage's, and this page's own deltas further down.
Duplicating the base here would silently repaint the About page's wash from
this file, because two identical selectors are decided by source order. */
/* The inner pages run a smaller h1 and a larger lede than the homepage. That is
a real difference in the design rather than drift: the homepage's h1 is the
only one on the site with nothing above it. Scoped to `.phead`, so the
homepage keeps its own. */
.phead h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.phead .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* The live-sync label, with the studio tally light beside it. */
.src {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ds-font-label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-color-brand-accent);
}
/* `tally` is declared once, in _startgg.scss, and shared - the strip's tally
and this one are the same light and must pulse together. */
.src i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ds-color-brand-primary);
flex: none;
animation: tally 2.4s ease-in-out infinite;
}
/* AFTER the rule it disables, or it silently does nothing: media queries add no
specificity and with equal selectors source order decides. This has failed
three times on this project. */
@media (prefers-reduced-motion: reduce) {
.src i {
animation: none;
}
}
/* This page's own head: a tighter stack than the other inner pages, and its
wash sits higher and hotter. Compound selectors throughout, so these still
win once a second page defines the base above. */
.phead.phead--tournaments {
padding: clamp(44px, 6.5vw, 84px) 0 clamp(34px, 5vw, 60px);
}
.phead.phead--tournaments .shell {
gap: 15px;
}
.phead.phead--tournaments::before {
background: radial-gradient(60% 92% at 84% 14%, rgba(var(--ds-color-channel-key), 0.44), transparent 62%), radial-gradient(52% 80% at 4% 100%, rgba(var(--ds-color-channel-alt), 0.9), transparent 62%);
}
.phead.phead--tournaments::after {
background: linear-gradient(90deg, rgba(var(--ds-color-channel-shadow), 0.93) 0%, rgba(var(--ds-color-channel-shadow), 0.72) 46%, rgba(var(--ds-color-channel-shadow), 0.3) 100%);
}
.phead.phead--tournaments .lede {
max-width: 62ch;
}
/* ---------- core block bridge --------------------------------------------- */
/* Core's flow layout writes `margin-block-start:var(--wp--style--block-gap)`
onto every child of the page's `main`, which is 26px between bands that the
design stacks flush - the head, the season figures, the sticky filter bar and
the rows are one continuous column in the prototype, and each band pays for
its own space with padding. Nothing in the markup shows you the gap; it comes
from a rule the theme never wrote. Same fix `.sec-h>*` and `.about>*` already
carry, applied at page level. */
.season, .filters, .sec.sec--rows {
margin-block-start: 0;
}
/* ---------- the season band ----------------------------------------------- */
/* Five figures, every one of them computed from the tournament records at
render. Nothing here is typed in, so the band cannot disagree with the rows
under it. */
.season {
background: var(--ds-color-bg-alt);
}
.season .shell {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
}
.st {
background: var(--ds-color-bg-alt-lift);
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 3px;
}
/* PURE white, not the brand's #f9fafa, and the same call the button labels make:
these sit on the teal lift where the brand white reads a touch cream. */
.st b {
font-family: var(--ds-font-heading);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 600;
color: rgb(var(--ds-color-channel-light));
line-height: 1;
}
.st span {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(var(--ds-color-channel-light), 0.6);
font-weight: 600;
}
/* ---------- the filter bar ------------------------------------------------ */
/* Sticks under the nav, which is 74px tall - the one place on the site where a
component has to know another component's height. */
.filters {
position: sticky;
top: 74px;
z-index: 60;
background: var(--ds-color-bg-subtle);
}
.filters .shell {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
}
.fbtn {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
font-family: var(--ds-font-label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
padding: 15px 18px 13px;
white-space: nowrap;
transition: 0.15s;
}
.fbtn:hover {
color: var(--ds-color-fg-heading);
}
.fbtn.on {
color: var(--ds-color-fg-heading);
border-color: var(--ds-color-brand-primary);
}
.fbtn em {
font-style: normal;
color: var(--ds-color-fg-muted);
margin-left: 6px;
font-size: 10px;
}
.fbtn.on em {
color: var(--ds-color-brand-accent);
}
/* ---------- the rows ------------------------------------------------------ */
/* A tighter section rhythm than the rest of the site: clamp(46px,6vw,84px)
against the shared clamp(52px,7.5vw,102px). The prototype sets it per page
and this one is 18px shorter at desktop, which is a difference worth keeping
rather than folding - the page opens on a sticky filter bar, so the band
under it starts closer. */
.sec.sec--rows {
padding: clamp(46px, 6vw, 84px) 0;
}
.list {
display: flex;
flex-direction: column;
gap: 14px;
}
.tr {
position: relative;
overflow: hidden;
background: var(--ds-color-bg-subtle);
display: block;
}
/* Artwork behind the row under a scrim - no height cost. Opacity transitions
alongside the scale so the whole hover resolves as one move; brightening
instantly while growing over half a second reads as two separate events. */
.tr-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center 40%;
transition: transform 0.55s ease-out, opacity 0.35s ease;
}
.tr-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(var(--ds-color-channel-scrim), 0.95) 0%, rgba(var(--ds-color-channel-scrim), 0.88) 45%, rgba(var(--ds-color-channel-scrim), 0.74) 100%);
}
.tr > * {
position: relative;
z-index: 1;
}
.tr.past .tr-bg, .tr.tr--completed .tr-bg {
filter: grayscale(1);
opacity: 0.42;
}
.tr:hover .tr-bg {
opacity: 0.9;
}
/* Hover-zoom, the same 7% as the homepage hero but eased rather than linear -
this is a response to the pointer, not a drift, so it wants to arrive and
settle. Guarded on (hover:hover): rows expand on tap, and a touch device
would leave the artwork stuck mid-zoom afterwards. The row already clips. */
@media (hover: hover) {
.tr:hover .tr-bg {
transform: scale(1.07);
}
}
@media (prefers-reduced-motion: reduce) {
.tr-bg {
transition: none;
}
.tr:hover .tr-bg {
transform: none;
}
}
.tr.up, .tr.tr--upcoming {
box-shadow: inset 3px 0 0 var(--ds-color-brand-accent);
}
.tr.live, .tr.tr--live {
box-shadow: inset 3px 0 0 var(--ds-color-brand-primary);
}
/* The wash. Red at .34 over the left third of the artwork, which is what stops
"running" and "coming up" being told apart by a 3px sliver of near-identical
warm. */
.tr.live .tr-bg::after,
.tr.tr--live .tr-bg::after {
background: linear-gradient(90deg, rgba(var(--ds-color-channel-key), 0.34) 0%, rgba(var(--ds-color-channel-scrim), 0.9) 45%, rgba(var(--ds-color-channel-scrim), 0.76) 100%);
}
.tr.past .ev, .tr.tr--completed .ev {
color: var(--ds-color-fg-default);
}
/* Truncate rather than wrap: one long tournament name cannot be allowed to
stretch a row, and a meta line that wraps takes the grid with it. */
.tr-meta, .tr-when .dt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.tr-main h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tr-cd {
font-family: var(--ds-font-label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-color-fg-heading);
}
.tr-win {
font-family: var(--ds-font-label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The prototype lifts the row ground to #151515 on hover. Folded onto
`surface-2` (#161616), one part in 255 lighter: the row is under artwork at
90% opacity by then, no type contrast floor moves, and there is no other
#151515 anywhere in the design to give a role to. PORT-08 - a fold is a
decision, and this is the deliberate kind. */
.tr:hover {
background: var(--ds-color-bg-surface-2);
}
.tr.hide {
display: none;
}
.tr-top {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
gap: clamp(12px, 2.4vw, 28px);
padding: 20px 22px;
align-items: start;
}
.tr-when {
display: flex;
flex-direction: column;
gap: 4px;
}
.tr-when .dt {
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ds-color-fg-default);
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.tr-when .tm {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
.tr-main {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.tr-main h3 {
line-height: 1.05;
}
.tr-meta {
font-family: var(--ds-font-label);
font-size: 11.5px;
color: var(--ds-color-fg-muted);
letter-spacing: 0.04em;
}
.tr-meta b {
color: var(--ds-color-fg-default);
font-weight: 600;
}
.games {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.g {
font-family: var(--ds-font-label);
font-size: 9.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
padding: 3px 7px;
white-space: nowrap;
}
/* The figure column. `text-align:right` here is the alignment the type forces -
see the header of this file - and it is why the column collapses to the left
only when it stops being a column at all, under 820px. */
.tr-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
text-align: right;
}
.tr-num {
font-family: var(--ds-font-heading);
font-size: 34px;
font-weight: 600;
line-height: 1;
color: var(--ds-color-fg-heading);
}
.tr-num span {
display: block;
font-family: var(--ds-font-label);
font-size: 9.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 400;
margin-top: 4px;
}
.chip {
font-family: var(--ds-font-label);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
background: rgba(var(--ds-color-channel-light), 0.09);
white-space: nowrap;
}
.chip.up, .chip.chip--upcoming {
color: var(--ds-color-brand-accent);
}
.chip.live, .chip.chip--live {
color: var(--ds-color-brand-primary);
}
.chip.done, .chip.chip--completed {
color: var(--ds-color-fg-muted);
}
.tr-links {
display: flex;
gap: 7px;
flex-wrap: wrap;
justify-content: flex-end;
}
.tr-links a {
background: transparent;
font-family: var(--ds-font-label);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
padding: 6px 10px;
transition: 0.15s;
border: 1px solid rgba(var(--ds-color-channel-paper), 0.42);
}
.tr-links a:hover {
color: var(--ds-color-brand-accent);
border-color: var(--ds-color-brand-accent);
}
/* The one filled control on a row, and it carries the brand's white-on-red
button label - PURE white, like every other button on the site. */
.tr-links a.hot {
color: rgb(var(--ds-color-channel-light));
background: var(--ds-color-brand-primary);
border-color: var(--ds-color-brand-primary);
}
.tr-links a.hot:hover {
background: var(--ds-color-brand-accent);
border-color: var(--ds-color-brand-accent);
color: rgb(var(--ds-color-channel-light));
}
/* ---------- standings ----------------------------------------------------- */
/* Closed by default and opened by the row's own button, because four open
tables is a page nobody can scan. */
.stand {
padding: 0 22px 22px;
display: none;
}
.tr.show .stand {
display: block;
}
.stand-h {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
padding: 16px 0 12px;
}
.tw {
overflow-x: auto;
}
.res {
width: 100%;
min-width: 460px;
border-collapse: collapse;
font-family: var(--ds-font-label);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.res th {
text-align: left;
font-size: 9.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
padding: 0 14px 9px 0;
white-space: nowrap;
}
.res td {
padding: 10px 14px 10px 0;
color: var(--ds-color-fg-default);
white-space: nowrap;
}
.res .pl {
width: 44px;
color: var(--ds-color-fg-muted);
font-weight: 700;
}
.res .pn {
color: var(--ds-color-fg-heading);
font-weight: 600;
font-size: 13px;
}
/* The winner's line, in the brand red. It is the one row anybody looks for. */
.res tr.p1 .pl, .res tr.p1 .pn {
color: var(--ds-color-brand-primary);
}
.toggle {
background: transparent;
cursor: pointer;
font-family: var(--ds-font-label);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
padding: 6px 10px;
transition: 0.15s;
border: 1px solid rgba(var(--ds-color-channel-paper), 0.42);
}
.toggle:hover {
color: var(--ds-color-brand-accent);
border-color: var(--ds-color-brand-accent);
}
/* Inline SVG, not U+25BE. Neither licensed face carries a triangle, so a
literal caret falls back to a system font inside a button - which reads as a
slightly wrong glyph rather than as an error. Same measurement that put the
strip's arrow in SVG. */
.tgl-i {
width: 0.62em;
height: 0.62em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
transition: transform 0.18s ease;
}
.tr.show .toggle .tgl-i {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.tgl-i {
transition: none;
}
}
/* ---------- the empty state ----------------------------------------------- */
.empty {
padding: 38px 22px;
text-align: center;
font-family: var(--ds-font-label);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
display: none;
}
.empty.on {
display: block;
}
@media (max-width: 820px) {
.tr-top {
grid-template-columns: 1fr;
gap: 14px;
}
.tr-side {
align-items: flex-start;
text-align: left;
}
.tr-links {
justify-content: flex-start;
}
}
/* ---------- figure tables ------------------------------------------------- */
/* THE ALIGNMENT RULES, and they load last on purpose - they are the correction
the page ships, not the port's first draft. Seed and Record are figures and
go right; Pl is a figure with a suffix and goes right; Player and Team are
words and stay left. `table-layout:fixed` is what stops a long team name
pulling the numeric columns out from under their headings. */
.res th:nth-child(n+4), .res td:nth-child(n+4) {
text-align: right;
}
.res {
table-layout: fixed;
}
.res th, .res td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.res .pl {
width: 72px;
text-align: right;
padding-right: 20px;
}
.res th:nth-child(3), .res td:nth-child(3) {
width: 26%;
}
.res th:nth-child(4), .res td:nth-child(4) {
width: 84px;
}
.res th:nth-child(5), .res td:nth-child(5) {
width: 96px;
}
/* ===========================================================================
SHARED SUB-PAGE CHROME - see note 2. Not portfolio-specific.
=========================================================================== */
/* The page header band. Identical in the About, Partners, Portfolio, Contact,
News and Accademy prototypes, down to the clamps.
PURE black, not the brand near-black, for the same reason `.nav` is: this band
butts against the nav and #0a0a0a would read as a seam across the top of every
sub-page. */
.phead {
position: relative;
background: rgb(var(--ds-color-channel-shadow));
overflow: hidden;
padding: clamp(46px, 7vw, 92px) 0 clamp(40px, 6vw, 76px);
}
/* The copy column owns its rhythm: a flex column on a 16px gap. Core's flow
layout also writes `margin-block-start:var(--wp--style--block-gap)` onto every
child of a group block, through `:root :where(.is-layout-flow) > *`, and on a
flex container those margins ADD to the gap rather than collapsing into it.
Same bridge, same reason, as `.sec-h > *` in _sections.scss. */
.phead .shell > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* The breadcrumb stays at --tx-3 on every sub-page. The documented rule that
#868686 cannot hold 4.5:1 over artwork was measured against event logos under
a light scrim; here the ground is L=.0044 and it measures 5.30:1. Re-measure
if the scrim over the backdrop is ever weakened. */
.crumb {
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
.crumb a:hover {
color: var(--ds-color-brand-accent);
}
/* ===========================================================================
THE PORTFOLIO PAGE
=========================================================================== */
/* THE BAND SEAMS ARE NOT FIXED HERE, and the rule that used to be was inert.
`pg-portfolio` is a BODY class - `ugcza_page_body_class()` emits it from the
page slug - so `.pg-portfolio>*` selects `.wp-site-blocks` and never a band.
The bands are children of `.entry-content`, two levels further in, and
`_chrome.scss` already zeroes core's flow gap on them site-wide with
`.entry-content:has(> .sec) > *`. This file has never been live until now, so
the wrong selector had never been exercised; it is recorded rather than
quietly deleted because the same mistake is one page slug away at any time.
See the `ugcza-rendered-dom-chain` note and PORT-40.
For the bands' own contents. `margin-block-end` is deliberately NOT reset
here: `.sec-h` carries a measured bottom margin and this selector outranks
it. */
.pg-portfolio .shell > * {
margin-block-start: 0;
}
/* ---------- the sub-page type scale (see note 2) ---------- */
/* One step down from the homepage's, and consistently: `.sec` 50/7vw/96 against
52/7.5vw/102, h1 74 against 80, h2 48 against 52, the section header's gap 42
against 44. Six sub-page prototypes agree; the homepage is the outlier. */
.pg-portfolio .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-portfolio h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-portfolio h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-portfolio .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
/* 62ch rather than the homepage's 58: this page's lede is the longest on the
site and the header column is full width rather than a hero's half. */
.pg-portfolio .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 62ch;
}
/* ---------- the page header, portfolio only ---------- */
/* THE BACKDROP IS THE NEWEST UPLOAD ACROSS THE THREE PLAYLISTS, so this header
re-dresses itself every time the client adds a video - no image to export,
nothing to brief. `ugcza_render_portfolio_header_bg()` supplies the file and
nothing else; everything measured is here.
PORTFOLIO ONLY. `.phead` is shared chrome across twelve sub-pages, so this
rule and its markup are deliberately not in the others.
Blurred to 32px: enough shape survives to read as a photograph, not enough to
identify the frame. That is the property to preserve if the number is ever
tuned - this is an unattended feed, and whatever the client uploads next lands
behind the page title without anyone vetting it. The source is 960px wide
BECAUSE the blur is 32px; at 60px nothing above ~500px was visible and the
file was 560px. The two track each other, so change them together.
Contrast does NOT depend on the blur: the copy sits on the .phead::after
scrim, and every value from 24px to 60px measures within half a point.
Dial it freely on taste; re-measure only if the SCRIM moves.
inset:-88px is structural, not decorative - blur() samples beyond the element
box, so without the bleed the wash fades out at its own edges. `.phead`
already clips. */
.pg-portfolio .phead-bg {
position: absolute;
inset: -88px;
z-index: 0;
pointer-events: none;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(32px) saturate(0.72) brightness(0.5);
}
/* THE Z-INDEXES ARE LOAD-BEARING, not tidiness. A ::before with `z-index:auto`
paints BEFORE the element's own children, so the backdrop above would cover
the orange spotlight entirely. Stack: backdrop 0, spotlight 1, scrim 2,
copy 3. */
.pg-portfolio .phead::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(60% 90% at 80% 18%, rgba(var(--ds-color-channel-accent), 0.44), transparent 62%), radial-gradient(52% 80% at 6% 100%, rgba(var(--ds-color-channel-alt), 0.9), transparent 62%);
}
/* Scrim strengthened from .92/.70/.30 across, which is what the other sub-pages
carry: it now has a photograph under it rather than flat black, and it is what
holds the copy at its contrast floor. Measured on the shipped render, against
the brightest 0.5% of the copy column: h1 19.30:1, lede 9.52:1, breadcrumb
5.30:1, eyebrow orange 5.64:1. DO NOT WEAKEN IT without re-measuring all four.
Pure black through the shadow channel, not the brand near-black: the gradient
has to reach the header's own ground and #0a0a0a would leave an edge. */
.pg-portfolio .phead::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(90deg, rgba(var(--ds-color-channel-shadow), 0.94) 0%, rgba(var(--ds-color-channel-shadow), 0.82) 46%, rgba(var(--ds-color-channel-shadow), 0.55) 100%);
}
.pg-portfolio .phead .shell {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 16px;
}
/* The two calls under the lede. A length in block markup is a design value
living under wp-content, which the token gate forbids, so the row is a class
and its geometry is here - the same move `.props-h` and `.hcta` already make. */
.pg-portfolio .phead-cta {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 8px;
}
/* ---------- playlist cards: the portfolio's dress ---------- */
/* The shared component does the work; these four are what the portfolio
prototype changes and says it changes. The card is wider here (268 against
258) because there are three across a full-width shell rather than three in a
band, and the title is 28px against 26 - the floor is 3:1 either way, since
both are large text. */
.pg-portfolio .plists {
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.pg-portfolio .pthumb {
padding: 16px;
}
.pg-portfolio .pthumb b {
font-size: 28px;
line-height: 1.02;
text-shadow: 0 2px 16px rgba(var(--ds-color-channel-shadow), 0.8);
}
.pg-portfolio .pbody {
padding: 17px 18px 19px;
}
/* THE BADGE IS THE ONE THING THIS PAGE ADDS. It carries the real video count,
pulled from the playlist feed, where the homepage card prints the plain
"YouTube playlist" label in its foot. Above the frame's grey overlay
(z-index 1) or it disappears under it. */
.pg-portfolio .pthumb .cnt {
position: absolute;
z-index: 2;
right: 12px;
top: 12px;
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(var(--ds-color-channel-shadow), 0.75);
padding: 5px 8px;
color: var(--ds-color-fg-default);
}
/* The foot becomes a two-part row - source on the left, the fact that it keeps
itself up to date on the right - because the count has moved to the badge. */
.pg-portfolio .pbody .n {
padding-top: 13px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.pg-portfolio .pbody .n em {
font-style: normal;
color: var(--ds-color-brand-accent);
}
/* ---------- event property tiles ---------- */
/* EXPLICIT COLUMN COUNTS, NOT THE HOMEPAGE'S auto-fit minmax(166px). Same
treatment, different arithmetic: there are SEVEN tiles here against the
homepage's six, and auto-fit resolves to six columns at most desktop widths,
which strands the seventh alone beside five empty cells. These counts divide
seven without an orphan row wider than a third of the grid.
The widest step takes the count from the block rather than a literal 7, so an
eighth property - allowed by decision, client 2026-08-13 - lands in the same
row instead of starting a second one. `--prop-count` is written by
`ugcza_render_properties()`; the fallback is what the prototype shows.
`margin-top:0` because this grid sits directly under `.sec-h`, whose measured
bottom margin is the gap. The homepage's copy sits under a heading of its own
and carries 22px for it. */
.pg-portfolio .props {
margin-top: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
.pg-portfolio .props {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.pg-portfolio .props {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1320px) {
.pg-portfolio .props {
grid-template-columns: repeat(var(--prop-count, 7), minmax(0, 1fr));
}
}
/* THE ONE RULE HERE THAT IS NOT SCOPED TO THIS PAGE, and it is here to prevent a
regression rather than to style anything. Publishing CREW gives the tile set
seven members, and every band that shows them draws from the same post type -
so the homepage's auto-fit grid would strand the seventh tile the moment this
page's content landed. `:has()` means the rule engages only once there IS a
seventh tile: with six the selector does not match and the homepage's grid is
byte-identical to what it was. */
@media (min-width: 1320px) {
.props:has(> :nth-child(7)) {
grid-template-columns: repeat(var(--prop-count, 7), minmax(0, 1fr));
}
}
/* Negative delays start each tile mid-cycle - without them the tiles breathe in
lockstep, which reads as a glitch rather than as life. The design system
carries two through six on a 4s ladder; these continue it for the seventh and
for an eighth, rather than restating the prototype's own 3s ladder, which
would fork a shared component to no visible end. */
.prop:nth-child(7) .pbgi {
animation-delay: -25s;
}
.prop:nth-child(8) .pbgi {
animation-delay: -29s;
}
/* ---------- the events table ---------- */
/* Scrolls rather than shrinks. A five-column table of dates and figures has a
width below which it stops being readable, and `min-width` plus this is what
keeps a narrow screen scrolling one element instead of the page. */
.pg-portfolio .tw {
overflow-x: auto;
}
/* `table-layout:fixed` with the three widths below is the same contract the
standings table uses: the event name is the only elastic column, so it is the
one that ellipsises when the rest have had their share. */
/* `line-height:normal`, EXPLICITLY, AND IT IS NOT A TIDY-UP. The prototype sets no
line-height on this table at all and its cells compute to `normal`; the built
page's inherit the body's 1.65, which made every row 7px taller and the whole
table 39px - right content, right widths, right padding, wrong box.
The cause is not in either stylesheet. THE PROTOTYPE FILES CARRY NO DOCTYPE -
they open on `` - so a browser renders them in QUIRKS MODE, where
tables do not inherit font properties from the body. WordPress emits
`<!DOCTYPE html>`, so the build is in standards mode and the table inherits.
Two renders of identical CSS, differing on a rule neither file contains.
Reproducing the design therefore means saying `normal` out loud, which lets
each face's own metrics decide the leading exactly as they do over there -
19px TGS Perfect Condensed and 10px Aloevera do not resolve to the same
ratio, so a number here would have to be two numbers and both would be wrong
the moment a face changed.
ON THE TABLE, NOT ON `th, td`, so the cells INHERIT it - which is the same
thing the prototype's own cells are doing, and it means the table element
itself compares equal too rather than being the one box left carrying 1.65.
EVERY OTHER TABLE ON THIS SITE HAS THE SAME PROBLEM WAITING - the standings
table on Tournaments, and anything the press kit grows. See PORT-56. */
.pg-portfolio table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: 14.5px;
table-layout: fixed;
line-height: normal;
}
.pg-portfolio th {
text-align: left;
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
padding: 13px 15px;
background: var(--ds-color-bg-subtle);
white-space: nowrap;
}
.pg-portfolio td {
padding: 14px 15px;
color: var(--ds-color-fg-default);
vertical-align: middle;
}
.pg-portfolio tr:last-child td {
border-bottom: 0;
}
.pg-portfolio tr:hover td {
background: rgba(var(--ds-color-channel-light), 0.03);
}
.pg-portfolio td.ev {
font-family: var(--ds-font-heading);
font-size: 19px;
font-weight: 600;
color: var(--ds-color-fg-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* RIGHT-ALIGNED, and that is a typographic requirement rather than a taste.
Neither licensed face carries tabular figures and neither exposes a `tnum`
feature, so a column of counts cannot align on its digits - right-aligning
puts the ragged edge on the left, where the eye does not track it. The
`font-variant-numeric` below is the prototype's and is a no-op on these faces;
it is kept so the two renders compare identically. */
.pg-portfolio td.num {
text-align: right;
font-family: var(--ds-font-label);
font-variant-numeric: tabular-nums;
color: var(--ds-color-brand-accent);
font-weight: 600;
white-space: nowrap;
}
.pg-portfolio td.dt {
font-family: var(--ds-font-label);
font-size: 12px;
color: var(--ds-color-fg-muted);
white-space: nowrap;
}
.pg-portfolio .gt {
display: inline-block;
font-family: var(--ds-font-label);
font-size: 9.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
padding: 3px 7px;
margin: 2px 3px 2px 0;
white-space: nowrap;
}
.pg-portfolio td.dt, .pg-portfolio th:nth-child(2) {
width: 190px;
}
.pg-portfolio th:nth-child(3), .pg-portfolio td:nth-child(3) {
width: 150px;
}
.pg-portfolio table th:last-child, .pg-portfolio table td:last-child {
width: 110px;
text-align: right;
}
/* ---------- the case study ---------- */
.pg-portfolio .cs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(24px, 3.6vw, 50px);
align-items: start;
}
.pg-portfolio .cs > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* The plate the event photography goes into. The picture is the tournament's
own, layered in as an `<img>` by the shared rule in `_tiles.scss`; until
there is one the plate is the brand's two warms crossed at 155deg, which
reads as a designed ground rather than as a missing image - the same call the
coverage tiles make.
THE GRADIENT STAYS UNDER THE PICTURE rather than being switched off by it.
It is what shows while a lazily-loaded image is still in flight and behind
anything transparent, so the plate is never briefly empty and never has to
pick between two grounds. The stack is ground 0, picture 1, caption 2 - and
the picture needs its `z-index` said out loud: `::before` and `<img>` are
both positioned at `auto`, so they would paint in tree order, which is an
ordering that a later edit to the markup could silently reverse. */
.pg-portfolio .csimg {
position: relative;
aspect-ratio: 4/3;
background: var(--ds-color-bg-lift);
overflow: hidden;
}
.pg-portfolio .csimg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(155deg, rgba(var(--ds-color-channel-key), 0.6), rgba(var(--ds-color-channel-alt), 0.95));
}
.pg-portfolio .csimg > img {
z-index: 1;
transform: scale(1);
transition: transform 0.5s cubic-bezier(0.2, 0.72, 0.24, 1);
}
/* The overlay, and it is NOT decoration alone - it is what keeps the caption
readable now that the ground is a photograph instead of a flat gradient.
MEASURED, NOT CHOSEN, per the project's scrim rule: the floor is the ground
the scrim replaced, which is a harder bar than 4.5:1 and the right one, since
the plate must not get worse for having gained a picture. The caption on the
old two-warm gradient measures 6.77:1 at its worst pixel. On the bare
photograph it collapses to 1.52:1 - the bottom left of this crop holds a lit
desk - so the pair below was swept until it cleared the floor, landing 7.05:1.
TWO STOPS BECAUSE THERE ARE TWO JOBS. The first is a bottom-weighted neutral
that restores the caption band; at .80 over the lowest third it is still
LIGHTER than `.tile-art`, which runs to .93 at 50% and .96 at 100% for the
same reason. The second is the brand's own 155deg diagonal, the decoration,
at the strength where it reads as a treatment rather than as mud - .50 was
measured too, and flattened the photograph's colour without buying contrast
the foot was not already providing.
`:has(>img)` is the gate, the same one `.tile-art` uses: a plate with no
photograph generates no ::after box at all, so the empty state stays the
designed gradient ground rather than a darkened empty box.
It sits at z-index 1 alongside the picture and above it regardless, because
`::after` is by definition the last child and nothing an editor does to the
markup can reorder it. The caption stays at 2 and is untouched. */
.pg-portfolio .csimg:has(> img)::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(0deg, rgba(var(--ds-color-channel-shadow), 0.8) 0%, rgba(var(--ds-color-channel-shadow), 0) 34%), linear-gradient(155deg, rgba(var(--ds-color-channel-key), 0.21), rgba(var(--ds-color-channel-alt), 0.38));
}
/* Zoom the picture, never the plate. `.csimg` carries `overflow:hidden`
already, so the scale is clipped by the frame it is drawn in.
`:hover` ALONE, with no `:focus-visible`, and that is deliberate rather than
an omission. The plate is a plain `div` - unlike the coverage tiles and
playlist cards, which are links and are focusable, so their zoom has a
keyboard equivalent to honour. Adding one here would style a state this
element can never enter. */
.pg-portfolio .csimg:hover > img {
transform: scale(1.07);
}
/* AFTER the rules it disables. Media queries add no specificity, so with equal
selectors source order is the only thing deciding - PORT-05, which has failed
three times on this project. `.csimg` is also added to the MOTION list in
`tools/check-reduced-motion.mjs`; that list is explicit, so motion on a new
selector is unverified until it is named there. */
@media (prefers-reduced-motion: reduce) {
.pg-portfolio .csimg > img {
transition: none;
}
.pg-portfolio .csimg:hover > img {
transform: none;
}
}
.pg-portfolio .csimg span {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 16px 17px;
background: linear-gradient(0deg, rgba(var(--ds-color-channel-shadow), 0.9), transparent);
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
}
.pg-portfolio .csgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 14px;
margin-top: 20px;
}
.pg-portfolio .csgrid > * {
margin-block-start: 0;
margin-block-end: 0;
}
.pg-portfolio .csn {
background: var(--ds-color-bg-subtle);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-portfolio .csn > * {
margin-block-start: 0;
margin-block-end: 0;
}
.pg-portfolio .csn b {
font-family: var(--ds-font-heading);
font-size: 30px;
font-weight: 600;
color: var(--ds-color-brand-primary);
line-height: 1;
}
.pg-portfolio .csn span {
font-family: var(--ds-font-label);
font-size: 9.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 600;
}
/* The five-part capture checklist. Every past event gets the same template, so a
gap is obvious rather than absent. */
.pg-portfolio .cslist {
margin: 20px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.pg-portfolio .cslist li {
background: var(--ds-color-bg-subtle);
padding: 13px 16px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--ds-color-fg-default);
}
.pg-portfolio .cslist li b {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
font-weight: 700;
margin-left: auto;
white-space: nowrap;
}
.pg-portfolio .cslist li b.yes {
color: var(--ds-color-brand-accent);
}
.pg-portfolio .cslist li b.no {
color: var(--ds-color-fg-muted);
}
/* The case-study copy sits on the teal band, where --tx-2 is too dark to hold
its floor: white at .82 measures 9.6:1 on #1e3a38 where #b6b6b6 manages 4.1.
The prototype carries this as an inline style on each paragraph; a colour in
block markup is exactly what the token gate forbids, so it is a class. */
.pg-portfolio .cscopy {
color: rgba(var(--ds-color-channel-light), 0.82);
line-height: 1.75;
}
.pg-portfolio .cscopy + .cscopy {
margin-top: 16px;
}
.pg-portfolio .csh {
margin-top: 26px;
color: var(--ds-color-brand-accent);
}
.pg-portfolio .csbtns {
display: flex;
gap: 11px;
flex-wrap: wrap;
margin-top: 22px;
}
/* ---------- the showreel ---------- */
/* SAME POSTER AND SAME VEIL AS THE HOMEPAGE, and a different scrim on purpose.
This box carries one line of 11px meta rather than the homepage's headline, so
the scrim is a shallow foot rather than that page's tall ramp: it holds
--tx-2 over the worst row of the real frame and gives the picture back the
rest of the box. The frame is also far bigger here - full shell width against
seven columns of twelve - which is why the play control is a fixed 82px rather
than the homepage's clamp. */
.pg-portfolio .reel::after {
background: linear-gradient(0deg, rgba(var(--ds-color-channel-scrim), 0.92) 0%, rgba(var(--ds-color-channel-scrim), 0.88) 16%, rgba(var(--ds-color-channel-scrim), 0.45) 28%, transparent 46%);
}
.pg-portfolio .reel .play {
width: 82px;
height: 82px;
}
/* PURE white, not the brand's #f9fafa, which is what the shared rule paints.
The prototype sets this triangle `#fff` and the two are 6/255 apart - small
enough to look like a fold and large enough for a computed-style comparison to
report it, which is exactly the case PORT-08 says to decide rather than tidy.
The channel token is what PORT-07 reserves for true white. */
.pg-portfolio .reel .play::after {
border-left: 22px solid rgb(var(--ds-color-channel-light));
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
margin-left: 6px;
}
/* The caption, where the homepage's reel carries its watch call. Absolutely
positioned rather than placed in the grid, because the disc is centred in the
whole frame here and there is no second row for this to sit in. */
.pg-portfolio .reel .cap {
position: absolute;
z-index: 3;
left: 17px;
bottom: 15px;
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
}
/* ---------- motion ---------- */
/* MUST SIT AFTER EVERY RULE IT DISABLES. Media queries add no specificity, so
with equal selectors source order is what decides, and a reduce block placed
above the rules it turns off silently does nothing while the page keeps
animating for people who asked it not to. That has failed three times on this
project and no visual check catches it - verify with Playwright's
newContext({ reducedMotion: 'reduce' }), never by reading the CSS.
The shared components disable themselves in their own partials; what is left
here is the seventh and eighth property tiles' drift, which this file is the
one that starts. */
@media (prefers-reduced-motion: reduce) {
.prop:nth-child(7) .pbgi, .prop:nth-child(8) .pbgi {
animation: none;
}
}
/* ---------- the page's scale ----------
See the header. These five are the whole of the difference between this page
and the design system's defaults, and they are the prototype's own numbers. */
.pg-press-kit .sec {
padding: clamp(48px, 6.6vw, 92px) 0;
}
.pg-press-kit .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-press-kit h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-press-kit h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-press-kit .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 62ch;
}
/* The lede on the teal band. `fg-default` is drawn for the ink grounds and goes
flat over teal; the prototype writes `rgba(255,255,255,.75)` inline on that one
paragraph, which is a colour living in markup. It is the rule rather than the
markup that carries it here, and it is the pure-white channel because that is
what the prototype names - the brand near-white is 6/255 away and a
computed-style comparison reports the fold (PORT-08). */
.pg-press-kit .sec.teal .lede {
color: rgba(var(--ds-color-channel-light), 0.75);
}
/* ---------- the page header ----------
The band itself is `_about-page.scss`'s, unscoped, and stays that way - every
page opens with one. What differs here is the two pools over it: this page
throws the red higher and wider (92% tall at 16% down, against About's 90% at
20%) and takes the teal harder into the bottom-left corner. Pseudo-elements,
so no computed-style probe can reach them - the pixel diff is the only thing
that can see this rule, which is why it is written from the prototype's own
values rather than approximated from About's. */
.pg-press-kit .phead::before {
background: radial-gradient(60% 92% at 82% 16%, rgba(var(--ds-color-channel-key), 0.46), transparent 62%), radial-gradient(52% 80% at 4% 100%, rgba(var(--ds-color-channel-alt), 0.9), transparent 62%);
}
.pg-press-kit .phead::after {
background: linear-gradient(90deg, rgba(var(--ds-color-channel-shadow), 0.93) 0%, rgba(var(--ds-color-channel-shadow), 0.72) 46%, rgba(var(--ds-color-channel-shadow), 0.3) 100%);
}
/* The two calls under the lede. The prototype writes this as an inline
`style="display:flex;gap:11px;flex-wrap:wrap;margin-top:8px"` on the wrapper,
which is four design values living in markup - the token gate forbids that
under wp-content, so the class carries them and the pattern names the class. */
.pact {
display: flex;
gap: 11px;
flex-wrap: wrap;
}
/* THE 8px LEAD HAS TO OUTRANK THE BLOCK-GAP RESET, and it did not at first.
`_about-page.scss` zeroes `.phead .shell>*` at (0,2,0) to strip core's flow
margin off every child of the page header - correct, and it also killed a
plain `.pact{margin-top:8px}` at (0,1,0). The band came out EIGHT PIXELS
SHORT at both widths, which then reported as `starts -8.00px` on all eleven
bands below it and made the page look like it had a systemic offset rather
than one wrong rule. Naming the child beats the reset at (0,3,0). */
.phead .shell > .pact {
margin-block-start: 8px;
}
/* THE GAP HAS TO OUTRANK CORE'S OWN FLEX LAYOUT, which is the whole difficulty.
`.pact` lands on a `wp:buttons` block, and core ships
`.wp-block-buttons.is-layout-flex{gap:var(--wp--style--block-gap)}` at (0,2,0)
- so a sensible-looking `.pact{gap:11px}` at (0,1,0) loses outright and the
two calls sit a 26px block gap apart while the stylesheet reads as correct.
Naming the block and its layout class alongside ours is (0,3,0) and wins on
specificity rather than on load order, which is the same call `.fsoc` makes in
_tiles.scss against core's social-link palette. */
.pact.wp-block-buttons.is-layout-flex {
gap: 11px;
}
/* Core's button block nests the clickable element inside a wrapper, and the base
layer pins that wrapper to `--ds-control-height`. `_wp-bridge.scss` gives the
LINK `height:auto` so its own padding, border and leading decide its size;
without the same for the wrapper a 58px link sits in a 50px box. The identical
one-line fix `.sp .go` and `.hcta` already carry, for the identical reason. */
.pact .wp-block-button.btn {
height: auto;
}
/* ---------- the jump bar ----------
A second sticky rail under the nav, so the nine bands of a long reference page
stay one press away wherever you are in it.
`top` IS THE NAV'S OWN HEIGHT and the two are a pair: the nav is 74px and
sticks at 0, this sticks directly under it. The prototype restates 74px inside
its own `@media (max-width:880px)` block, which changes nothing - the nav does
not resize there, only `.menu` is hidden - so that rule is not ported.
`overflow-x:auto` with `min-width:max-content` on the row is what makes nine
labels survive a 390px viewport: the rail scrolls sideways rather than
wrapping to three lines and pushing the page down. */
.jump {
position: sticky;
top: 74px;
z-index: 60;
background: var(--ds-color-bg-subtle);
overflow-x: auto;
}
/* AND EVERY DESTINATION THIS RAIL POINTS AT CLEARS BOTH BARS. `_sections.scss`
gives `.sec` a 74px `scroll-margin-top` for the nav alone; this rail is 47px
more, stuck directly under it, so all nine sections landed 73px of content
behind the pair. Tapping "Brand assets" put the reader in the middle of a
sentence with the eyebrow, the heading and the download button above the
fold. Measured at 390, and the number is the stack, not a guess: nav 74 +
rail 47. BUILD-DECISIONS 25.4. */
.pg-press-kit .sec {
scroll-margin-top: 121px;
}
.jump .shell {
display: flex;
gap: 0;
min-width: max-content;
}
.jump a {
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
padding: 14px 18px 13px;
border-bottom: 2px solid transparent;
white-space: nowrap;
font-weight: 700;
}
.jump a:hover {
color: var(--ds-color-fg-heading);
border-color: var(--ds-color-brand-primary);
}
/* ---------- the facts table ---------- */
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.fact {
background: var(--ds-color-bg-subtle);
padding: 19px 20px;
display: flex;
flex-direction: column;
gap: 5px;
}
.fact span {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
}
/* The BODY face at 16.5px, not the heading face: these are values to be read and
copied, some of them long enough to wrap, and the condensed heading face is
drawn for short lockups. */
.fact b {
font-size: 16.5px;
font-weight: 600;
color: var(--ds-color-fg-heading);
font-family: var(--ds-font-body);
line-height: 1.4;
}
.fact b a {
color: var(--ds-color-brand-accent);
}
/* ---------- the stat row, in this page's dress ----------
The component is `_about.scss`'s and the artwork layer, the drift and the
reduced-motion guard all stay there. Three things differ and all three are the
prototype's own:
1. THE GROUND IS `alt-lift`, because this band sits on the teal section rather
than on the homepage's ink one. A tile carrying `subtle` here would read as
a hole in the band.
2. THE FIGURE IS WHITE, not brand red. Red on teal is the one pairing the
palette does not hold: #ea3700 has luminance .20 and tops out at 5.04:1 on
pure black, so over a scrimmed photograph on a teal plate it has nothing
left. The prototype paints `#fff` here and that is the channel token, not
the brand near-white - the two are 6/255 apart and a computed-style
comparison reports the fold (PORT-08).
3. THE SCRIM IS HEAVIER: .89/.91/.95/.95 against the homepage's
.84/.86/.93/.93. Measured, not chosen - the label sits at 10.5px over
photography and the homepage's floor was set against a red figure that is
not here.
The sub-label goes to `fg-default` for the reason `_about.scss` states at its
own `.stat em`: `fg-muted` (#868686) at 10.5px cannot clear 4.5:1 over
anything lighter than about #1a1a1a, so the ground was never the fixable
part. */
.pg-press-kit .stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 14px;
margin-top: 0;
}
.pg-press-kit .stat {
background: var(--ds-color-bg-alt-lift);
padding: 24px 20px;
gap: 5px;
position: relative;
overflow: hidden;
}
.pg-press-kit .stat > b, .pg-press-kit .stat > span, .pg-press-kit .stat > em {
position: relative;
z-index: 2;
}
.pg-press-kit .stat b {
font-size: clamp(34px, 4.4vw, 50px);
color: rgb(var(--ds-color-channel-light));
}
.pg-press-kit .stat > span, .pg-press-kit .stat > em {
color: var(--ds-color-fg-default);
}
.pg-press-kit .stat::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--ds-color-channel-scrim), 0.89) 0%, rgba(var(--ds-color-channel-scrim), 0.91) 40%, rgba(var(--ds-color-channel-scrim), 0.95) 66%, rgba(var(--ds-color-channel-scrim), 0.95) 100%);
}
/* A sixth tile, continuing the 5s ladder `_about.scss` runs to five. Without it
the sixth breathes in lockstep with the first, which reads as a glitch. */
.pg-press-kit .stat:nth-child(6) .stat-bg {
animation-delay: -25s;
}
/* ---------- the boilerplate ---------- */
.boiler {
display: flex;
flex-direction: column;
gap: 14px;
}
.bl {
background: var(--ds-color-bg-subtle);
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 11px;
}
.bl .top {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.bl .top b {
font-family: var(--ds-font-heading);
font-size: 21px;
font-weight: 600;
}
.bl .top span {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
}
/* The copy control takes the hero slider arrows' treatment - outline only, a
hairline rule rather than a filled button - because it is a utility beside the
text and not a call to action. `channel-paper` rather than `channel-light`:
the prototype rules it in the brand's near-white, and this hairline sits on a
flat plate rather than over photography, which is the case `_ugcza.scss`
reserves pure white for. */
.bl .top .copy {
margin-left: auto;
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-color-fg-heading);
padding: 9px 14px;
background: transparent;
border: 1px solid rgba(var(--ds-color-channel-paper), 0.5);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.bl .top .copy:hover {
border-color: var(--ds-color-fg-heading);
background: rgba(var(--ds-color-channel-paper), 0.1);
}
.bl p {
color: var(--ds-color-fg-default);
line-height: 1.72;
font-size: 15.5px;
}
/* The long entry runs to two paragraphs. `wpautop()` emits them as siblings with
no margin of their own, and the prototype spaces the second with an inline
`margin-top:12px` - a design value in markup, so it lives here instead. The
`.bl` flex gap is 11px and governs the gap under `.top`, which is why this is
a margin on the paragraph rather than a change to that gap. */
.bl p + p {
margin-top: 12px;
}
/* ---------- the asset checklist ---------- */
.assets {
display: flex;
flex-direction: column;
gap: 14px;
}
.as {
background: var(--ds-color-bg-subtle);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
transition: background 0.15s;
}
.as:hover {
background: var(--ds-color-bg-muted);
}
/* The format chip. `flex:none` so a four-letter format does not squash it, and a
fixed square so the column reads as a column down nine rows of varying height. */
.as .ic {
width: 44px;
height: 44px;
flex: none;
background: var(--ds-color-bg-lift);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ds-font-label);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ds-color-fg-muted);
}
.as .ic.on {
background: var(--ds-color-brand-primary);
color: rgb(var(--ds-color-channel-light));
}
.as .t {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 180px;
flex: 1;
}
.as .t b {
font-family: var(--ds-font-heading);
font-size: 19px;
font-weight: 600;
}
.as .t span {
font-family: var(--ds-font-label);
font-size: 11px;
color: var(--ds-color-fg-muted);
letter-spacing: 0.04em;
}
.as .st {
font-family: var(--ds-font-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
background: rgba(var(--ds-color-channel-light), 0.09);
white-space: nowrap;
}
/* Ready is quiet and pending is loud, which is the right way round: three of the
nine are waiting on the client and the page's job is to say so plainly. */
.as .st.ready {
color: var(--ds-color-fg-default);
}
.as .st.need {
color: var(--ds-color-brand-primary);
}
/* A row becomes a link the day a file is attached to it - see
`ugcza_render_press_assets()`. The anchor must not pick up a link colour or an
underline: the row's own type is already coloured by the three rules above. */
.as[href] {
color: inherit;
text-decoration: none;
}
/* ---------- palette and type specimens ----------
THE SIX CHIPS ARE PAINTED FROM THE DESIGN SYSTEM'S OWN TOKENS, never from the
hex the caption beside them quotes. That is the whole point of the band: if
the swatch and the site ever disagree, the swatch is wrong and this way it
cannot be. It also keeps six colour literals out of pattern markup, which the
token gate forbids under wp-content. The captions are writing and live in the
pattern; they are the brand bible's own hex and CMYK builds. */
.sw {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
}
.swc {
background: var(--ds-color-bg-subtle);
}
.swc i {
display: block;
height: 74px;
}
.swc.c-red i {
background: var(--ds-color-brand-primary);
}
.swc.c-orange i {
background: var(--ds-color-brand-accent);
}
.swc.c-grey i {
background: var(--ds-color-bg-muted);
}
.swc.c-teal i {
background: var(--ds-color-bg-alt);
}
.swc.c-black i {
background: var(--ds-color-bg-subtle);
}
.swc.c-white i {
background: var(--ds-color-bg-inverse);
}
.swc b {
display: block;
font-family: var(--ds-font-heading);
font-size: 17px;
font-weight: 600;
padding: 11px 13px 2px;
}
/* `u` carries no underline here - it is the prototype's element for the spec
line and the browser default would read as a link. */
.swc u {
display: block;
font-family: var(--ds-font-label);
font-size: 11px;
text-decoration: none;
color: var(--ds-color-fg-muted);
padding: 0 13px 13px;
}
.types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 20px;
}
.ty {
background: var(--ds-color-bg-subtle);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ty span {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
font-weight: 700;
}
/* The specimen is set IN THE FACE IT DESCRIBES, which is the only honest way to
show a typeface. 34px is large enough to read the drawing of it. */
.ty .spec {
font-family: var(--ds-font-heading);
font-size: 34px;
font-weight: 600;
line-height: 1.05;
}
.ty .spec.b {
font-family: var(--ds-font-body);
font-size: 17px;
font-weight: 400;
color: var(--ds-color-fg-default);
line-height: 1.6;
}
.ty em {
font-style: normal;
font-family: var(--ds-font-label);
font-size: 12px;
color: var(--ds-color-brand-accent);
}
/* ---------- spokespeople ----------
A square plate rather than the About page's 4:5 - this band is three cards
across a full-width grid where that one is a portrait wall, and a square holds
a video still as readily as a face. `.pp` is the third component to want a
card surface on the ink band; `subtle-lift` is the token that was missing. */
.people {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
}
.pp {
background: var(--ds-color-bg-subtle-lift);
display: flex;
flex-direction: column;
overflow: hidden;
}
.pp .por {
aspect-ratio: 1/1;
position: relative;
background: var(--ds-color-bg-lift);
background-image: var(--pi);
background-size: cover;
background-position: 50% 50%;
}
/* THE WASH IS THE PLACEHOLDER, NOT A TREATMENT OVER THE PHOTOGRAPH, and `:has`
is what tells them apart. The prototype inlines a different flat gradient on
each of the three cards, at full cover, because none of them had a picture -
painted over a real portrait it would hide it completely. So the gradient is
gated on the pending caption being present, which is the same switch
`.tile-art:has(>img)::after` uses one file over: the presence of the content
decides, and it cannot be set to a state the markup contradicts.
The three gradients themselves are design rather than content - the prototype
writes them three times in markup - so they are here, addressed positionally. */
.pp .por:has(> span)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(var(--ds-color-channel-key), 0.55), rgba(var(--ds-color-channel-portrait), 0.95));
}
.pp:nth-child(2) .por:has(> span)::before {
background: linear-gradient(160deg, rgba(var(--ds-color-channel-alt), 0.9), rgba(var(--ds-color-channel-portrait), 0.95));
}
.pp:nth-child(3) .por:has(> span)::before {
background: linear-gradient(160deg, rgba(var(--ds-color-channel-accent), 0.26), rgba(var(--ds-color-channel-alt), 0.95));
}
.pp .por span {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 14px 15px;
background: linear-gradient(0deg, rgba(var(--ds-color-channel-shadow), 0.9), transparent);
font-family: var(--ds-font-label);
font-size: 9.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
/* THE THIRD PLATE IS A VIDEO STILL AMONG PHOTOGRAPHS, and it is graded here so
it joins the row rather than interrupting it. Measured on the centre square
each plate actually renders, the two portraits average 48/60/77 and 19/29/39
- blue running 1.61 and 2.02 times red - and the still averages 89/89/86,
which is 0.97. So the still is NOT warm, it is dead neutral, and it only
reads warm because both its neighbours are cool. Grading it is a tint job,
not a desaturation.
`color` IS THE MODE, not `overlay` or an alpha wash: it takes hue and
saturation from this layer and luminosity from the photograph, which is what
a grade is. An alpha wash would flatten the still toward one colour instead.
THIS VALUE IS NOT THE MEASURED CAST, AND THE DIFFERENCE IS THE DECISION.
The founder shoot's own cast is hsl(215, 23%, 25%); this is hsl(215, 41%,
33%) at .66 strength, which lands blue:red at 1.30 against Junayd's 1.61,
p95 at 204 against 139 and p50 at 66 against 48. It harmonises rather than
matches, ON PURPOSE. Matching needs the framing moved off the burned-in
title card - about a fifth of this plate is above L200, and a near-white
pixel cannot hold a cast at any tint - and the only framings that clear it
are zooms past `cover` that sample a ~280px strip of a 1280x720 source. That
was weighed and refused: the plate keeps its resolution and its composition,
and the card is allowed to read as footage rather than as a third face.
DO NOT REACH FOR BRIGHTNESS TO CLOSE THE REMAINING GAP. Filters run AFTER
the blend and scale all three channels together, so brightness leaves the
ratio untouched - measured invariant from 1.0 down to 0.45. Contrast does
move it, and only by flattening it back toward neutral, which is why the
figures here are mild. The gap closes by changing the frame or the frame's
source, not by another filter.
Gated on the pending caption being ABSENT, the same switch the placeholder
gradient above uses and for the same reason: over the pending wash this
would grade a colour that was already chosen. `isolation` is redundant while
a filter is present, since a filter makes its own stacking context, and
stays so that removing the filter cannot leak the blend onto the card. */
.pp .por--reel:not(:has(> span)) {
isolation: isolate;
filter: contrast(0.84) brightness(0.91);
}
.pp .por--reel:not(:has(> span))::after {
content: "";
position: absolute;
inset: 0;
background: rgb(var(--ds-color-channel-portrait-grade));
mix-blend-mode: color;
opacity: 0.66;
}
.pp .b {
padding: 16px 17px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pp .b h4 {
font-size: 22px;
}
.pp .b h4 a:hover {
color: var(--ds-color-brand-accent);
}
.pp .b .role {
font-family: var(--ds-font-label);
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-brand-accent);
}
.pp .b p {
font-size: 14px;
color: var(--ds-color-fg-default);
line-height: 1.5;
}
/* ---------- coverage, as the complete record ----------
Not `.press`/`.pr`, which is the marketing grid on the homepage and About.
Same records, different columns: this one prints the outlet, the FULL
published headline and the date, and carries no excerpt - see
`ugcza_render_coverage_list()` for why that is two components rather than one
in two dresses. The artwork backing is the shared `.tile-art`, so the scrim,
the hover zoom and the reduced-motion guard are all `_tiles.scss`'s. */
.cov {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
gap: 14px;
}
.cv {
background: var(--ds-color-bg-muted);
padding: 20px 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
transition: background 0.15s;
}
.cv:hover {
background: var(--ds-color-bg-lift);
}
.cv .out {
font-family: var(--ds-font-label);
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-brand-accent);
font-weight: 700;
}
.cv .hd {
font-family: var(--ds-font-heading);
font-size: 19px;
font-weight: 600;
line-height: 1.15;
}
.cv .dt {
font-family: var(--ds-font-label);
font-size: 11px;
color: var(--ds-color-fg-muted);
white-space: nowrap;
}
/* A tile carrying artwork grows to hold it and bottom-anchors its type into the
strong end of the scrim. The ground goes back to ink so the picture is not
sitting on grey at its edges. */
.cv.tile-art {
background: var(--ds-color-bg-subtle);
min-height: 252px;
justify-content: flex-end;
}
.cv.tile-art:hover {
background: var(--ds-color-bg-subtle);
}
/* `fg-muted` cannot reach 4.5:1 over artwork at any usable scrim - the same
failure the event property labels hit. Over a picture the date steps up. */
.cv.tile-art .dt {
color: var(--ds-color-fg-default);
}
/* ---------- partner quotes, stacked ---------- */
.quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
gap: 18px;
}
/* THE 16/40 MARGIN IS THE USER-AGENT DEFAULT AND IT IS DELIBERATE THAT IT
SURVIVES. The prototype resets `p` and `h1`-`h4` to `margin:0` and never
touches `blockquote`, so every browser's own `margin:1em 40px` stays on these
three cards - measured, not assumed: 16px top and bottom, and the card 298.7px
wide inside a 378.7px grid track at 1440.
That is almost certainly an oversight in the prototype rather than a design
intent - no other card grid on the site is inset - but rule 1 is that the
build matches the prototype and that exceptions are raised and agreed rather
than taken. Resetting it to `margin:0` cost the band 82px at 1440 and 221px at
390, because narrower cards wrap more text: it read as 27% and 39% of the band
differing, which looks like a broken component and was one declaration.
Written out rather than left to the browser, so it cannot vary between
engines. Raised as a backlog row; one line to change when it is answered. */
.qt {
background: var(--ds-color-bg-subtle);
border-left: 4px solid var(--ds-color-brand-primary);
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
margin: 16px 40px;
}
.qt p {
font-size: 15.5px;
line-height: 1.62;
color: var(--ds-color-fg-default);
}
/* `margin-top:auto` is what lines the three attributions up along one baseline
when the quotes run to different lengths. */
.qt .who {
display: flex;
align-items: baseline;
gap: 11px;
flex-wrap: wrap;
margin-top: auto;
}
.qt .who b {
font-family: var(--ds-font-heading);
font-size: 20px;
font-weight: 600;
color: var(--ds-color-brand-accent);
}
.qt .who span {
font-family: var(--ds-font-label);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
/* ---------- event properties, at seven ----------
EXPLICIT COLUMN COUNTS, NOT `_tiles.scss`'s auto-fit minmax(166px). Same
treatment, different arithmetic: there are seven tiles here against the
homepage's six, and auto-fit resolves to six columns at most desktop widths,
which strands the seventh alone beside five empty cells. These counts divide
seven without an orphan row wider than a third of the grid.
The widest step takes the count from the block rather than a literal seven, so
the eighth property BUILD-DECISIONS section 3.2 allows for lands in the same
row instead of starting a second one. `--prop-count` is written by
`ugcza_render_properties()` and the fallback is what the prototype draws.
`_portfolio-page.scss` carries the identical block for the identical reason
and is not yet compiled; when it is, the two should become one modifier rather
than three copies. Recorded as a backlog row rather than done here, because
that file is another session's. */
.pg-press-kit .props {
margin-top: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
.pg-press-kit .props {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.pg-press-kit .props {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1320px) {
.pg-press-kit .props {
grid-template-columns: repeat(var(--prop-count, 7), minmax(0, 1fr));
}
}
/* THE SEVENTH TILE'S DRIFT DELAY IS NOT HERE, and its absence is deliberate.
`_portfolio-page.scss` already carries `.prop:nth-child(7) .pbgi` unscoped,
continuing the design system's 4s ladder, and that file entered the build on
2026-08-14 (PORT-50). A scoped copy of the same value would be two places to
change one ladder. If that rule ever moves, this page loses its stagger and
the seventh tile breathes in lockstep with the third - which is visible, and
is what this comment is for.
The heading over the grid. The prototype writes both of these inline on the
`<h3>`, which is two design values in markup. `_tiles.scss` already owns
`.props-h` at the homepage's clamp; this page's is a step wider and carries
its own gap under it, so it is scoped rather than folded. */
.pg-press-kit .props-h {
margin-top: clamp(38px, 5vw, 58px);
margin-bottom: 18px;
}
/* ---------- the showreel, in this page's dress ----------
THE THIRD FORK OF THE SAME THREE RULES, and saying so is the point. The
homepage's `.reel` sets a two-row "Press play." call into a tall scrim with
the disc clamped to the frame; About and this page both carry the older
arrangement - one 80px disc centred in the whole frame and an 11px caption
bottom-left. `_about-page.scss` forked it, `_portfolio-page.scss` forked it
again, and this is the third. That is a component wanting a modifier
(`.reel--centred`) rather than three page scopes, and it is a backlog row
rather than a change made here: two of those three files belong to work in
flight in another session, and a shared refactor landed from outside is the
race the record protocol exists to avoid.
The caption's offsets are this prototype's own - 17/15 against About's 16/14. */
.pg-press-kit .reel {
display: grid;
grid-template-rows: none;
place-items: center;
}
.pg-press-kit .reel .play {
grid-row: auto;
grid-column: auto;
width: 80px;
height: 80px;
}
.pg-press-kit .reel .cap {
position: absolute;
z-index: 3;
left: 17px;
bottom: 15px;
font-family: var(--ds-font-label);
font-size: 11px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-default);
}
/* ---------- the two closing panels ---------- */
.contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.ct {
background: var(--ds-color-bg-subtle-lift);
padding: clamp(26px, 4vw, 42px);
display: flex;
flex-direction: column;
gap: 13px;
}
.ct.hot {
background: var(--ds-color-brand-primary);
}
/* `:not(.eyebrow)` is a bridge, not a design change, and it is the same one
`.sp` carries in _tiles.scss. The prototype's eyebrow is a `<span>`, so a bare
`.ct p` could never reach it; core's paragraph block can only emit `<p>`, and
`.ct p` at (0,1,1) outranks `.eyebrow` at (0,1,0) - so without this the orange
eyebrow renders body grey and the 42ch measure lands on a two-word label. */
.ct p:not(.eyebrow), .ct .li {
color: var(--ds-color-fg-default);
max-width: 42ch;
}
.ct.hot p:not(.eyebrow), .ct.hot .li {
color: rgba(var(--ds-color-channel-light), 0.92);
}
.ct.hot .eyebrow {
color: rgba(var(--ds-color-channel-light), 0.88);
}
/* The prototype writes this lead-in as an inline `margin-top:6px` on the address
block - a design value in markup. It has to beat the block-gap reset at the
foot of this file, which it does on specificity, (0,2,0) against that rule's
(0,1,0), and not on source order. */
.ct .li {
font-size: 15px;
margin-top: 6px;
}
.ct .li a {
color: var(--ds-color-brand-accent);
}
/* Underlined on the red plate and nowhere else: the accent orange that carries
these links elsewhere has nothing left over brand red, so the underline is
what marks them as links rather than a colour change. */
.ct.hot .li a {
color: rgb(var(--ds-color-channel-light));
text-decoration: underline;
}
.ct .go {
margin-top: auto;
padding-top: 8px;
}
.ct .go .wp-block-button.btn {
height: auto;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` onto every child
of a group block through `:root :where(.is-layout-flow) > *`. On a flex or
grid container those margins ADD to the gap instead of collapsing into it, so
every container above would run its own measured gap plus 26px. The selectors
below are (0,1,0), equal to core's, and win on source order because ugcza.css
is enqueued after global-styles-inline-css - the same fix `.sec-h>*` carries
in _sections.scss and `.split>*,.sp>*` in _tiles.scss.
EVERY NEW CONTAINER ON THIS PAGE IS IN THIS LIST. One left out is 26px of band
that no probe measures and that the pixel diff reports as a height difference
with no obvious cause - which is exactly how the About page's nine bands went
wrong at once.
`.quotes>*` IS DELIBERATELY NOT IN IT, and this is the other half of the same
lesson: a reset is not free. `.qt` declares `margin:16px 40px` because the
prototype inherits the user-agent's blockquote margin (see that rule), and
`.quotes>*` is (0,1,0), ties with it, and wins from the foot of the file -
zeroing the block axis while leaving the inline axis alone. The cards came out
the right size in the right grid with 32px missing from the band, which read
as 14% of it differing. `.quotes` is a plain `<div>` emitted by
`ugcza_render_quote_cards()` and carries no `is-layout-*` class, so core never
writes a block gap onto its children and the reset had nothing to reset. The
rule for the rest of this list: a container needs a line here only if it is a
CORE layout group. The others are defensive and cost nothing, but a defensive
reset over a declared margin costs 32px. */
.jump .shell > *,
.facts > *, .fact > *,
.boiler > *, .bl > *, .bl .top > *,
.assets > *, .as > *, .as .t > *,
.sw > *, .swc > *, .types > *, .ty > *,
.people > *, .pp > *, .pp .b > *,
.cov > *, .cv > *,
.qt > *, .qt .who > *,
.contact > *, .ct > *,
.pact > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* And the bands themselves. Each sits directly under `.sec-h`, whose own
margin-bottom is the measured gap; core's block gap on top of it would add a
second one. `.props` and `.stats` are not in this list because both declare
their own margin-top above, which outranks core's rule on specificity. */
.facts, .boiler, .assets, .sw, .people, .cov, .quotes, .contact {
margin-block-start: 0;
}
/* The jump bar itself. It is a top-level child of the content wrapper, so it
takes the block gap that `.entry-content:has(> .sec) > *` zeroes for sections
but not for a div.
THE PAGE HEADER'S CHILDREN ARE NOT IN THIS LIST, and leaving them out is the
fix rather than an omission. `_about-page.scss` already zeroes
`.phead .shell>*` at (0,2,0), so a copy here was redundant - and it was worse
than redundant: scoped it became (0,3,0), which TIED with
`.phead .shell>.pact{margin-block-start:8px}` and won on source order, since
this block sits at the foot of the file. The 8px lead under the lede
disappeared, the band came out 8px short at both widths, and eleven bands
below it reported `starts -8.00px` - which reads as a systemic page offset
rather than as one redundant selector. */
.pg-press-kit .jump {
margin-block-start: 0;
}
/* ---------- the page's scale ----------
See the header. These five are the whole of the difference between this page
and the design system's defaults. They are the prototype's own numbers, and
they are About's numbers, and those two facts were checked separately. */
.pg-contact .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-contact .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-contact h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-contact h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-contact .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the enquiry form ----------
THE ONE PLACE THIS DESIGN KEEPS A HAIRLINE, which is the prototype's own
comment above these rules and worth carrying over: `_ugcza.scss` states that
separation is by surface tone and gap, and reserves 1px rules for focus rings
and control outlines. A text input is the case that reservation was written
for - a field has to advertise where it starts and ends before it is touched,
and a tone step alone does not do that at 15px.
`.form` is a generic-looking name and it is the prototype's. It is safe
unscoped because it only ever matches an element that carries `class="form"`,
which no core block emits - core's own search and comment forms carry
`wp-block-search__*` and `comment-form`. */
.form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
/* `min-width:0` is what stops a long placeholder or a wide select from blowing
the grid track past its 1fr share: a flex item's automatic minimum size is
its content, not zero. */
.field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.field.wide {
grid-column: 1/-1;
}
.field label {
font-family: var(--ds-font-label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
/* The ground is PURE black at .34, not the brand near-black, and not a surface
token. It is a well cut into whatever band the form sits on, so it has to go
darker than the ground beneath it wherever that ground lands - a flat token
would read as a plate on the ink band and as a hole on the grey one. The
hairline is the brand near-white at .42, which is the identical rule `.tbtn`
draws in _brands.scss; the two are the same hairline and should stay the same
number. `.fsoc` was the third until 2026-08-14, when the client moved that row
onto the hero slider arrow's treatment and its hairline opened to .5 with it -
do not pull this one along to match. Measured anchors: the prototype
writes rgba(0,0,0,.34) and rgba(249,250,250,.42), and #f9fafa is the brand
white, so `channel-paper` is the triplet and not `channel-light` (PORT-08). */
.field input, .field select, .field textarea {
font-family: var(--ds-font-body);
font-size: 15px;
color: var(--ds-color-fg-heading);
background: rgba(var(--ds-color-channel-shadow), 0.34);
border: 1px solid rgba(var(--ds-color-channel-paper), 0.42);
padding: 12px 14px;
width: 100%;
transition: border-color 0.15s, background 0.15s;
}
/* `resize:vertical` rather than the browser default `both`: a textarea dragged
wider escapes its grid track and takes the layout with it. */
.field textarea {
min-height: 132px;
resize: vertical;
}
.field input:hover, .field select:hover, .field textarea:hover {
border-color: rgba(var(--ds-color-channel-paper), 0.7);
}
/* Focus removes the outline and answers it with the accent rule plus a deeper
well, which is the prototype's treatment. It is a real focus indicator and
not a bare `outline:none`: the border goes from a .42 white hairline to solid
accent orange, which is both a colour change and a contrast change. */
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--ds-color-brand-accent);
background: rgba(var(--ds-color-channel-shadow), 0.5);
}
/* SCOPED TO `.field`, AND THAT IS THE PROTOTYPE'S OWN RULE RATHER THAN A
TIGHTENING OF IT. There are two `.hint` spans on the page: "optional" inside
the organisation field's label, which this reaches, and "Or just email us"
beside the submit button in `.form-go`, which it does not - so that second
one renders at body size in the prototype too, not at 12.5px muted. Left
exactly as drawn: the pixel diff compares against the prototype's render, so
widening this to a bare `.hint` would introduce a difference rather than fix
one. It is a question for the client's designer and a backlog row, not a
change made silently here. */
.field .hint {
font-size: 12.5px;
color: var(--ds-color-fg-muted);
}
.consent {
grid-column: 1/-1;
display: flex;
gap: 11px;
align-items: flex-start;
font-size: 13.5px;
color: var(--ds-color-fg-default);
line-height: 1.55;
}
/* `flex:none` so the box does not shrink against two lines of consent text, and
`margin-top:2px` to sit it on the first line's cap height rather than its
box top. `accent-color` is brand RED here and not the accent orange, which
reads backwards until you look at the page: this is the only checkbox on the
site and red is the brand's own affirmative mark. The prototype names it. */
.consent input {
width: 17px;
height: 17px;
flex: none;
margin-top: 2px;
accent-color: var(--ds-color-brand-primary);
}
.form-go {
grid-column: 1/-1;
display: flex;
gap: 13px;
align-items: center;
flex-wrap: wrap;
}
/* THE SUBMIT IS THE ONLY REAL `<button class="btn">` ON THIS SITE, and it is the
one control the three existing `height:auto` fixes do not reach - they are all
written against `.wp-block-button.btn`, which is core's wrapper, and this is
not a block button because a block button renders an `<a>` and an `<a>` cannot
submit a form.
`_base.scss` sets `.btn{height:var(--ds-control-height)}`, and that token STEPS
at 768px: 50px above, 46px below (`$control-mobile`, "a touch target is not a
fluid quantity"). The prototype's `.btn` sets no height at all, so its button
is content-sized - 13+13 padding, 2+2 border, and a `<button>`'s UA
`line-height:normal` rather than the body's 1.65, which lands it at 50.4px.
So the two agreed at 1440 BY COINCIDENCE, 50 against 50, and disagreed by 4px
at 390 where the token steps and the prototype does not. That 4px was the last
thing wrong with this page: `#enquiry` read 0.1% at 1440 and 0.9% with a -4px
height at 390, and the three bands below it inherited the offset. A control
that matches at one width because two unrelated numbers happen to be equal is
the exact hazard PORT-48 is about.
`height:auto` hands the size back to padding, border and leading, which is what
the prototype does. Same one-line fix, same reason, as `.pact`, `.sp .go` and
`.hcta` - see PORT-27 and PORT-32. Scoped, because a site-wide `.btn{height:
auto}` would undo the design system's deliberate touch-target step everywhere
else.
AND THE LEADING WITH IT, "both, or neither works", which is PORT-27 word for
word. `height:auto` alone took the button to 47px, three short at BOTH widths
this time - a new number, not the old one, which is the tell that a second
cause was underneath the first. `_base.scss` sets `.btn{line-height:1}` and
that is 17px here; the prototype's `<button>` sets no line-height and takes
the UA's form-control `normal`, about 20px.
`normal`, NOT the body's 1.65 that `_wp-bridge.scss` restates for the core
button link. The two really are different: an `<a class="btn">` inherits the
body's leading and measures 58.05px in the prototype, and a `<button
class="btn">` does not inherit at all because the UA resets form controls, so
it measures 50.40px. Both numbers are in this page's prototype, on the same
screen - the four `.go` anchors at 58.05 and this submit at 50. Restating
1.65 here would fix the arithmetic and draw the wrong control. */
/* AND THE LABEL COLOUR, for the same reason and from the same blind spot.
`_wp-bridge.scss` line 58 paints core's button link
`rgb(var(--ds-color-channel-light))` - PURE white, not the brand's #f9fafa -
with a comment saying the prototype paints button labels #fff and that folding
the two showed up in the visual comparison as a 6/255 drift. Every button on
the site takes that, because every other button on the site is a core button
block. This one is not, so it kept `.btn{color:var(--ds-color-fg-on-accent)}`
from `_controls.scss` and was the one control still carrying the fold -
`proto rgb(255,255,255) / built rgb(249,250,250)`, found by the probe suite
and by nothing else, because 6/255 is far under the pixel diff's threshold
(PORT-52) and a band can read 0.1% with it present.
Fixed HERE rather than by changing `--ds-color-fg-on-accent`, which would
repaint every button on every page and put five signed-off pages back in the
queue for a difference only this one has. PORT-08: a fold is a decision. */
.pg-contact .form-go .btn {
height: auto;
line-height: normal;
color: rgb(var(--ds-color-channel-light));
}
/* ---------- the states the prototype could not draw ----------
The three blocks below have no prototype counterpart, and that is not a
divergence: the prototype is a static preview whose own `.note` says "in this
preview the form doesn't send". The build's form does send, stores a record
and validates - see `contact.php` - so it has states a preview never had to
express. AT REST NONE OF THEM RENDER: `.fmsg` and `.err` need markup the
server only emits after a submit, `.field.bad` needs a class only validation
adds, and `.hp` is out of flow by definition. So none of them can move a
pixel in `visual-diff.mjs`, which is what makes it legitimate to add them to
a file that otherwise ports one-for-one.
THE BANNER IS `.fmsg`, NOT `.note`. It wants `.note`'s exact proportions - a
4px left rule, 16px 19px of padding, 14px text on a .07 wash of its own hue -
and it must not have `.note`'s NAME, because `visual-diff.mjs` fails the
whole page at 100% on any PROTOTYPE_ONLY match and `.note` is on that list.
Same drawing, different name, and the name is the load-bearing part.
Orange for success and red for failure is the palette's own vocabulary: the
brand bible carries no green, and `_ugcza.scss` maps `state.success` onto the
accent for exactly this reason. `.ok` and `.bad` therefore differ only in
hue, so the two read as one object in two states rather than two objects. */
/* `scroll-margin-top` IS THE WHOLE POINT OF THE BANNER WORKING. The handler
redirects to `#contact-result` and the banner focuses itself, so the browser
scrolls it to viewport top - underneath the 74px sticky nav. Measured at 390:
the banner is 122px tall and the bar covered the top 74px of it, which is the
entire "Thank you - your message is with us." heading. What a visitor saw
after sending a message was a clipped half-sentence above an empty form.
90px, matching `_article.scss` and `_legal-page.scss`, and NOT `.sec`'s bare
74px: this is not a band, it has 16px of padding rather than 52, so it needs
the same 16px of clearance a heading does.
NO GATE THAT WALKS LINKS COULD HAVE FOUND THIS. Nothing on the page has an
href pointing at `#contact-result` - it is reached by a redirect. It was
found by submitting the form on a phone. BUILD-DECISIONS 25.4. */
.fmsg {
border-left: 4px solid transparent;
padding: 16px 19px;
font-size: 14px;
line-height: 1.6;
color: var(--ds-color-fg-default);
margin: 0 0 14px;
scroll-margin-top: 90px;
}
.fmsg.ok {
border-left-color: var(--ds-color-brand-accent);
background: rgba(var(--ds-color-channel-accent), 0.07);
}
.fmsg.bad {
border-left-color: var(--ds-color-brand-primary);
background: rgba(var(--ds-color-channel-key), 0.07);
}
/* The banner leads with a bold sentence and follows it with a plain one -
`ugcza_contact_banner()` emits `<b>heading</b> detail` - which is `.note`'s
own shape, and `.note b` takes the rule's colour there for the same reason it
does here: the bold half IS the answer and the rest is explanation. Two rules
rather than one on `.fmsg b`, because the hue has to follow the state. */
.fmsg.ok b {
color: var(--ds-color-brand-accent);
}
.fmsg.bad b {
color: var(--ds-color-brand-primary);
}
/* The banner is drawn as a sibling ABOVE the form, which is why it carries its
own bottom margin. If it is ever moved inside the form instead it has to span
the grid or it opens a half-width track beside the first field, and its
margin has to go or it doubles the 14px gap. Both are covered here so the
placement decision cannot silently break the layout. */
.form .fmsg {
grid-column: 1/-1;
margin-bottom: 0;
}
/* The per-field error, at `.hint`'s scale so the two occupy the same slot under
a control. No margin: `.field` is a flex column with a 7px gap, which is the
same gap that already sits under the label. */
.field .err {
font-size: 12.5px;
color: var(--ds-color-brand-primary);
line-height: 1.5;
}
/* THE `:not(:focus)` IS THE WHOLE POINT OF THIS RULE and is not decoration.
Written plainly, `.field.bad input` is (0,2,1) - the same weight as both
`.field input:hover` and `.field input:focus` - so which colour an invalid
field shows would be decided by source order alone, and the answer would be
wrong at one end whichever order was chosen. Excluding focus lifts it to
(0,3,1), so it beats hover unconditionally (an invalid field stays red under
the pointer) and yields to focus unconditionally (a field being corrected
still shows it has the caret). Order-independent, which is what stops the
next edit to this file changing behaviour by moving a block. */
.field.bad input:not(:focus),
.field.bad select:not(:focus),
.field.bad textarea:not(:focus) {
border-color: var(--ds-color-brand-primary);
}
/* The honeypot wrapper. Positioned off-canvas rather than hidden, and both
halves of that are deliberate:
- NOT `display:none` and not `visibility:hidden`. A bot that parses CSS
skips fields it can see are hidden, which defeats the trap; a bot that
fills every input it finds walks into it.
- NOT the `.screen-reader-text` idiom either, even though the geometry is
close. That idiom exists to hide something FROM SIGHT but keep it for
assistive technology - the exact opposite of what is wanted, because this
field carries `aria-hidden` and a screen-reader user who filled it would
be scored as spam. Off-canvas leaves it in the accessibility tree only if
the markup puts it there, and the markup deliberately does not.
`overflow:hidden` and the 1px box keep it from extending the scrollable area
at the left edge, which is the one way an off-canvas element can be felt. */
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------- contact detail rows ----------
`232px` rather than the form's 260px: these hold an address or a phone
number, not a labelled control, and the narrower minimum keeps four rows on
one line at container width instead of orphaning the fourth. Prototype
values, both numbers its own. */
.deets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: 14px;
}
.deet {
background: var(--ds-color-bg-subtle);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 7px;
}
.deet .k {
font-family: var(--ds-font-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ds-color-brand-accent);
}
/* The link and the plain value take the SAME treatment, which is the point of
the pair: whether a row is a mailto, a tel or a street address is a property
of the record, not a change of type. `word-break:break-word` because an email
address is one unbreakable token and a long one would otherwise overflow a
232px track rather than wrap. */
.deet a, .deet .v {
font-family: var(--ds-font-heading);
font-size: 19px;
font-weight: 600;
color: var(--ds-color-fg-heading);
line-height: 1.2;
word-break: break-word;
}
.deet a:hover {
color: var(--ds-color-brand-accent);
}
.deet .sub {
font-size: 13px;
color: var(--ds-color-fg-muted);
line-height: 1.5;
}
/* ---------- the four panel buttons carry an arrow ----------
THIS PAGE'S ONE DIFFERENCE FROM THE HOMEPAGE'S IDENTICAL-LOOKING PANEL, and
it was measured rather than inherited. `.split`/`.sp`/`.go` are `_tiles.scss`'s
and shared, so the easy assumption is that the shared component already
covers the button - it does not, and the difference is not visible in the
CSS at all. It is in the markup.
Grepped against both prototypes rather than eyeballed: `ugcza-contact.html`
carries four `class="arw"` and ALL FOUR sit inside
`<div class="go"><a class="btn ...">Label<svg class="arw">` - one in the
`.sp.hot` panel and three in plain `.sp` panels. `ugcza-homepage-brief.html`
carries ten, and not one of them is in a `.sp .go` button: its two panel
buttons, "Download press kit" and "Join our community", are label-only. So
`patterns/home-cta.php` is right to have no arrow, this page needs one, and
inheriting the shared component would have shipped four buttons about 18px
short - the same .72em glyph plus .34em clearance that `_tiles.scss` records
measuring twice on `.more` links.
THE SCOPE IS LOAD-BEARING. The homepage's other four `.go` elements are the
start.gg cards' `<span class="go">Results` inside `.gg-foot`, and those DO
carry the glyph in markup already. A rule keyed on `.go` alone would double
the arrow there. `.pg-contact .sp .go` cannot reach them.
A PSEUDO-ELEMENT, NOT MARKUP, for the reason `_tiles.scss` sets out at length
above its own `.more` rule: core's `createFromElement()` in
wp-includes/js/dist/rich-text.js keeps an empty element only as
`{type, attributes}`, so an inline `<svg>`'s `<path>` child is dropped on the
editor's round-trip and the block then fails validation the first time the
client retypes the label. The glyph, the viewBox, the 1.7 stroke and the mask
treatment are that block's, character for character - one arrow, one data
URI, `currentColor` deciding the colour so hover follows the button.
The pseudo goes on the LINK, not on the block wrapper: `_wp-bridge.scss`
states that a component class set on a button block lands on the wrapper
while the treatment belongs to `.wp-block-button__link`, and that link is the
`inline-flex` box with the 9px gap. `margin-left:.34em` is kept ON TOP of
that gap, exactly as `.arw` and the `.more` rule both do: the prototype's
spacing between label and glyph is the 9px flex gap PLUS 5.78px of margin at
17px, not one or the other, and dropping either closes it by a third. */
.pg-contact .sp .go .wp-block-button.btn > .wp-block-button__link::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` onto every child
of a group block through `:root :where(.is-layout-flow) > *`. On a flex or
grid container those margins ADD to the gap instead of collapsing into it, so
every container above would run its own measured gap plus 26px. The selectors
below are (0,1,0), equal to core's, and win on source order because ugcza.css
is enqueued after global-styles-inline-css - the same fix `.sec-h>*` carries
in _sections.scss and `.split>*,.sp>*` in _tiles.scss.
EVERY NEW CONTAINER ON THIS PAGE IS IN THIS LIST. One left out is 26px of
band that no probe measures and that the pixel diff reports as a height
difference with no obvious cause - which is exactly how the About page's nine
bands went wrong at once. `.field` is here twice over: it is a flex column
whose label, control and hint would otherwise stack 26px apart instead of
7px, which is the single most visible way this page could go wrong. */
/* `.consent > *` IS DELIBERATELY NOT IN THIS LIST, and leaving it in cost 1.08px
of band. The consent row is a flex container whose checkbox keeps the UA's own
`margin: 3px 3px 3px 4px`, which the prototype overrides on the TOP edge only -
`margin-top:2px` - so the box occupies 2 + 17 + 3 = 22px and the row is 22px
tall rather than the 20.92px its text needs. Zeroing `margin-block-end` here
takes that 3px away and the row measured 20.92 against the prototype's 22.00.
Nothing needed the reset: core's block gap only reaches direct children of an
element carrying `is-layout-flow` or `is-layout-constrained`, and `.consent` is
a plain `<label>` emitted by `ugcza_contact_consent()` inside a plain `<form>` -
neither carries a layout class, so core never had a rule here to beat. */
.form > *, .field > *, .form-go > *,
.deets > *, .deet > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* AND THE BAND CONTENT ITSELF, STRUCTURALLY RATHER THAN BY NAME. This started as
`.form,.deets{margin-block-start:0}` and `.split` was left out of it, which is
the omission the paragraph above warns about happening in the same file that
warns about it. What it cost is worth writing down, because the shape recurs:
`.sec-h` sets `margin-bottom:clamp(24px,3.4vw,42px)` and core sets
`margin-block-start:26px` on the next child. Adjacent flow margins collapse to
the LARGER, so at 1440 the design's 42 wins and the band is exact, and at 390
the design's 24 loses to core's 26 and the band is 2px tall. `#doors` read
0.0% at 1440 and 4.5% at 390 with every single element inside it measuring
identical to 0.01px - the whole difference was one collapsed margin at the top
of the band, pushing everything below it 2px out of sub-pixel phase.
A BAND THAT PASSES AT ONE WIDTH AND FAILS AT THE OTHER IS THIS, USUALLY. The
clamp crosses core's fixed 26px somewhere in the middle of the range, so the
defect exists only below that crossover - here at 765px, where 3.4vw = 26.
PORT-48 is the standing instruction never to accept it as noise.
Structural, so it cannot be left incomplete: every direct child of a `.shell`
on this page, whatever a later band puts there. (0,4,0) against core's (0,1,0),
so it wins on specificity rather than on the enqueue order the list above
relies on. `.sec-h`'s own margin-BOTTOM is untouched and stays the gap. */
.pg-contact .sec > .shell > * {
margin-block-start: 0;
}
/* THE FORM'S BOTTOM MARGIN IS A QUIRKS-MODE UA DEFAULT, and reproducing it is a
decision rather than an oversight either way, so here is the measurement.
NO PROTOTYPE PAGE DECLARES A DOCTYPE - checked all four of the built ones -
so every one of them renders in BackCompat, where Chrome's `quirks.css` gives
`form{margin-bottom:1em}` and standards mode gives none. Measured directly:
no doctype compatMode=BackCompat form margin-bottom=16px
<!doctype html> compatMode=CSS1Compat form margin-bottom=0px
the built page compatMode=CSS1Compat
That 16px is the whole of the `#enquiry` band's height difference once the
1.08px above is accounted for, and it is invisible in the prototype as drawn
because the `.note` under the form carries `margin-top:22px` and the two
collapse to 22. Strip the note - which the build must, and which the harness
does - and the 16px is the last thing in the band.
It is reproduced because the client reviewed the prototype AS RENDERED, and
written as `1em` rather than `16px` because that is literally the UA rule
being restated, not a spacing value this design chose. Scoped to this page so
the next form on the site does not silently inherit a quirks-mode default.
The build cannot simply drop its own doctype: WordPress emits it and standards
mode is not optional. See PORTING-PLAYBOOK PORT-63. */
.pg-contact .form {
margin-block-end: 1em;
}
/* The page header's own children, as on every other page partial. */
.pg-contact .phead .shell > * {
margin-block-start: 0;
}
/* ---------- the page's scale ----------
THE DESIGN SYSTEM SHIPS THE HOMEPAGE'S SCALE, and every sub-page steps down
from it. Leaving these out is not a subtle difference: it cost 18px on EVERY
band of this page on the first run - `worked-with` 914 against 896 - and
because a band inherits the offset of everything above it, the last section
started 70px low and the whole page read 11.4% differing pixels with no single
band obviously at fault. That is the signature: a UNIFORM height error on
every `.sec` and an offset that compounds down the page.
The numbers are this prototype's own, read out of its `<style>` block, and
they are also About's and Contact's - two facts checked separately:
node tools/prototype-style-diff.mjs ugcza-about.html ugcza-partners.html \
".sec,.sec-h,h1,h2,h3,h4,.lede,.phead,.crumb,.split,.sp,.eyebrow,.btn,.shell,.vals,.val,.who,.go,.arw"
-> shared 53, differ 0
`h3` and `h4` are deliberately NOT in the list. The prototype sets them to
clamp(20px,2.3vw,27px) and 19px/1.18, which is what `_primitives.scss` already
ships, so a line here would restate a value rather than change one - and this
page has an `<h3>` in the red panel that would then have two definitions.
WHY THESE FIVE ARE DUPLICATED rather than written `.pg-about, .pg-contact,
.pg-partners`: each page states its own numbers because the prototypes are
standalone HTML files that drift independently. Three pages agreeing today is
a fact about today, not a rule. `_contact-page.scss` carries the full argument.
The duplication is real and tracked as B-123. */
.pg-partners .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-partners .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-partners h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-partners h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-partners .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the stacked partner quotes ----------
THE ONE COMPONENT THIS PAGE BRINGS THAT THE BUILD DID NOT HAVE. Everywhere
else on the site a testimonial is a `.tslide` in a crossfade carousel running
the ABRIDGED copy; here they are the quotes as supplied and they stack.
The prototype says why, and it is a layout fact rather than a preference: a
carousel sizes its cell to the longest slide, and rAge runs five paragraphs
against Mirage's four lines, so the two short ones would each sit on half a
screen of dead space. It is also the reason the testimonial CPT carries two
text fields rather than one body - see `ugcza_testimonial_text()`.
.45 rather than the carousel's .3, and the prototype measured it: on the
`grey` band the 10.5px uppercase role label reads 4.09:1 at .3 and 4.54:1 at
.45, so the lighter scrim misses the 4.5 floor. The panels sit RECESSED
against the lifted ground (31 against 56), which is the opposite of every
other card on the site and is deliberate. */
.tq {
display: flex;
flex-direction: column;
gap: clamp(14px, 2vw, 20px);
}
.tqc {
background: rgba(var(--ds-color-channel-shadow), 0.45);
border-left: 4px solid var(--ds-color-brand-primary);
padding: clamp(24px, 4vw, 42px);
margin: 0;
}
/* The first paragraph carries the display size and the rest step down, so a
five-paragraph quote stays readable rather than shouting for its whole
length. `:first-of-type` and not `:first-child`: the build's `<p>` elements
are emitted by `ugcza_render_partner_quotes()` and are the only children, but
an editor who adds anything above them in the block editor must not silently
move the display size onto it. */
.tqc p {
font-size: 16.5px;
line-height: 1.68;
color: var(--ds-color-fg-default);
margin: 0 0 15px;
max-width: 76ch;
}
.tqc p:first-of-type {
font-size: clamp(17px, 2vw, 22px);
line-height: 1.62;
color: var(--ds-color-fg-heading);
}
.tqc p:last-of-type {
margin-bottom: 0;
}
/* The attribution line. NOT `.tslide .who`, which is 20px of margin and no
rule: the stacked panel is taller and carries a hairline above the mark, and
the two live side by side on this site - the homepage and About render the
carousel, this page renders these.
The hairline is the brand near-white at .16, so `channel-paper` and not
`channel-light`: 249,250,250 against 255,255,255 is the 6/255 fold that a
computed-style comparison reads and reports (PORT-08). */
.tqc .who {
margin-top: 24px;
padding-top: 19px;
border-top: 1px solid rgba(var(--ds-color-channel-paper), 0.16);
display: flex;
align-items: baseline;
gap: 13px;
flex-wrap: wrap;
}
.tqc .who b {
font-family: var(--ds-font-heading);
font-size: 22px;
font-weight: 600;
color: var(--ds-color-brand-accent);
}
.tqc .who span {
font-family: var(--ds-font-label);
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ds-color-fg-muted);
}
/* ---------- the figures, which are the homepage's tiles on a different ground
The five records are the SAME five the homepage's `#about` band reads - same
figures, same labels, same order, verified against the prototype rather than
assumed - so the block takes no `scope` and the tiles need no new content.
What differs is the treatment, and it differs in three measurable ways that
are all scoped here because `#about` and `.pg-press-kit` already own their
own versions of the same three rules:
1. THE TILE GROUND. `.stat{background:var(--grey)}` unscoped in the prototype,
which the build's own `.stats` rule in _about.scss already gives on a plain
`.sec`. Nothing owed - stated because the homepage's `#about .stat` paints
`bg-subtle` instead and reading that rule is how you would conclude this
page owes one.
2. THE SCRIM IS HEAVIER HERE: .89/.91/.95/.95 against the homepage's
.84/.86/.93/.93. Measured in the prototype, not chosen, and the direction
makes sense - these tiles sit on #383838 where the homepage's sit on
#0a0a0a, so the same photograph has less ground helping it.
3. THE LABEL IS ONE STEP BRIGHTER. `--tx-2` here against the homepage's
`--tx-3`, which is the same lift the press kit takes and for the same
reason its own comment records: #868686 at 10.5px cannot clear 4.5:1 over
anything lighter than about #1a1a1a, so the ground was never the fixable
part. On this page it is #383838, which is very much lighter.
`em` is in the z-index list for the reason _about.scss records: a tile may
carry an optional third line, and an element left out of it sits at z-index
auto, which is UNDERNEATH the scrim at z-index 1 - text that is stored,
rendered and invisible. No tile on this page has one today. */
.pg-partners .stat {
position: relative;
overflow: hidden;
}
.pg-partners .stat > b, .pg-partners .stat > span, .pg-partners .stat > em {
position: relative;
z-index: 2;
}
.pg-partners .stat > span, .pg-partners .stat > em {
color: var(--ds-color-fg-default);
}
.pg-partners .stat::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--ds-color-channel-scrim), 0.89) 0%, rgba(var(--ds-color-channel-scrim), 0.91) 40%, rgba(var(--ds-color-channel-scrim), 0.95) 66%, rgba(var(--ds-color-channel-scrim), 0.95) 100%);
}
/* ---------- both panel buttons carry an arrow ----------
THE SAME DIFFERENCE THE CONTACT PAGE HAS FROM THE HOMEPAGE, and it was grepped
in the prototypes rather than inherited from that finding. `ugcza-partners.html`
carries three `class="arw"`: one in the featured Acer card's caption, which
`ugcza_render_brands()` emits in markup already, and one in EACH of this
band's two `.go` buttons - "Read the full story" in the plain `.sp` and "Start
a conversation" in the `.sp.hot`. `ugcza-homepage-brief.html` carries ten and
not one of them is in a `.sp .go`, which is why `patterns/home-cta.php` is
right to have none and why this rule cannot lose its page scope: the homepage's
two panel buttons are label-only, and a rule keyed on `.sp .go` alone would put
an arrow on both of them.
A PSEUDO-ELEMENT, NOT MARKUP, and the reason is core rather than taste:
`createFromElement()` in wp-includes/js/dist/rich-text.js keeps an empty
element only as `{type, attributes}`, so an inline `<svg>`'s `<path>` child is
dropped on the editor's round-trip and the block fails validation the first
time the client retypes the label. The glyph, the viewBox, the 1.7 stroke and
the mask are `_tiles.scss`'s `.arw`, character for character, with
`currentColor` so hover follows the button. `margin-left:.34em` sits ON TOP of
the link's own 9px flex gap, which is what the prototype measures.
THE SECOND CONSUMER OF A RULE THAT IS NOW WRITTEN TWICE. `_contact-page.scss`
has the identical declaration under `.pg-contact`, and the two want to fold
into one multi-scope selector in `_tiles.scss` beside the `.more` arrow, which
already lists six page scopes for exactly this reason. Not done here because
that file is being edited by another session as this lands, and a duplicated
data URI is a smaller problem than a raced stylesheet. B-140. */
.pg-partners .sp .go .wp-block-button.btn > .wp-block-button__link::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` onto every child
of a group block through `:root :where(.is-layout-flow) > *`. Structural
rather than a list of names, for the reason `_contact-page.scss` sets out at
length: a named list is one omission away from 26px of band that no probe
measures, and `.split` was left out of that page's list in the same file that
warns about it. (0,3,0) against core's (0,1,0), so it wins on specificity
rather than on enqueue order.
`.sec-h`'s own margin-BOTTOM is untouched and stays the gap between a
section's head and its content. */
.pg-partners .sec > .shell > * {
margin-block-start: 0;
}
/* AND THE ONE CHILD THAT MUST GET ITS MARGIN BACK. `.stats` is the only band
content on this page that declares a top margin of its own - clamp(30px,4vw,
46px), in _about.scss, ported from the prototype - and the structural rule
above outranks it (0,3,0 against 0,1,0), so without this line the figures
band would lose 30px at 390 and 46px at 1440.
It is NOT the same value as core's block gap and the two are not
interchangeable: adjacent flow margins collapse to the LARGER, so the
prototype's own gap here is max(sec-h bottom, stats top) = 30 at 390 and 46 at
1440, and core's flat 26 would be swallowed by neither. Measured on the built
page: `.stats` computes margin-top 46px at 1440 and 30px at 390.
IT WINS ON SPECIFICITY, NOT ON SOURCE ORDER - (0,4,0) against the reset's
(0,3,0) - so it stays correct wherever it sits in this file. Written after the
reset because that is the order a reader needs, not because the cascade needs
it. `_about-page.scss` reaches the same outcome by leaving `.taglines` OUT of
a named list; this page's list is structural, so the exception has to be
written rather than omitted. */
.pg-partners .sec > .shell > .stats {
margin-block-start: clamp(30px, 4vw, 46px);
}
/* ---------- the pages' scale ----------
The five lines every sub-page partial carries, at these prototypes' own
numbers - which are the contact page's numbers, and those two facts were
checked separately with the tool quoted in the header. A partial without
them inherits the HOMEPAGE's scale from the design system and every band on
the page comes out ~18px tall with a compounding document-top offset, which
is PORT-83 and cost the About page nine bands at once.
Scoped by the body class `ugcza_page_body_class()` emits from the page slug,
never by page id: the id differs between this install, staging and
production, so an id-keyed stylesheet stops applying on the host and reads as
a deployment fault.
`.sec-h` AND `h2` ARE STATED THOUGH NO CURRENT BAND USES THEM. These pages
are a header and one section of prose - there is no section head and no h2
anywhere in the three patterns. They are here because the scale is the PAGE's
and a partial that states it in part is a partial that forks the moment
somebody adds a band: the next h2 on this page would silently take the
homepage's `clamp(28px,4.4vw,52px)`. Nothing probes them, because a probe on
an absent element cannot pass. */
.pg-privacy .sec, .pg-terms .sec, .pg-cookies .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-privacy .sec-h, .pg-terms .sec-h, .pg-cookies .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-privacy h1, .pg-terms h1, .pg-cookies h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-privacy h2, .pg-terms h2, .pg-cookies h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-privacy .lede, .pg-terms .lede, .pg-cookies .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the jump list ----------
A grid rather than a row, so eight or nine section names wrap into as many
210px columns as the shell affords instead of scrolling sideways. `auto-fit`
means the fold is driven by what a label needs rather than by a breakpoint
invented here - at 390 that is one column, at 1440 it is five.
THE ANCHORS ARE THE GRID ITEMS, WHICH IS WHY THE PATTERNS USE `core/html`.
The 7px padding and the hairline below belong to the `<a>`, so the rule has
to span the whole track: wrap an anchor in core's paragraph block and the
track holds a `<p>` while the border underlines only the width of the words.
No core block emits a bare anchor, which is the same reason
`page-press-kit.php` renders its `.jump` rail as raw HTML.
THE HAIRLINE IS PURE WHITE AT .09, NOT THE BRAND NEAR-WHITE. The prototype
writes `rgba(255,255,255,.09)`, and #f9fafa at that alpha reads warm against
the ink ground - the same distinction `_ugcza.scss` records when it derives
`channel-light` from pure white rather than folding it onto `channel-paper`
(PORT-08). It is also a different rule from the .42 hairline the contact
form's controls carry: this one separates list items, that one advertises
where a field starts.
`--ds-font-label` is the prototype's `--data` face. The two are the same
family as `--body` in this brand, and the token name is what carries the
intent, so a future label face changes this list and not the prose. */
.toc {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px 22px;
}
.toc a {
font-family: var(--ds-font-label);
font-size: 12.5px;
color: var(--ds-color-fg-default);
padding: 7px 0;
border-bottom: 1px solid rgba(var(--ds-color-channel-light), 0.09);
}
.toc a:hover {
color: var(--ds-color-brand-accent);
}
/* The list's own two margins are set in the core block bridge at the foot of
this file, because both have to outrank a core rule to survive. */
/* ---------- the notice itself ----------
74ch, and the measure is the whole typographic argument of the page: this is
the only band on the site that is continuous reading rather than panels and
tiles, so it is capped narrower than the 1172px shell around it. It is a
`ch` because the cap has to follow the body face's own width, not a pixel
count that goes wrong when the face changes.
THE COLUMN IS LEFT-ALIGNED AND CORE WOULD HAVE CENTRED IT. `is-layout-
constrained` emits `margin-left:auto !important;margin-right:auto !important`
onto every child, which is a no-op for a full-width child and moves a
max-width one to the middle - about 286px right at 1440 here. That is why the
three patterns give the section's `.shell` FLOW layout rather than the
constrained layout `page-contact.php` uses: that page has no max-width child,
so the difference never showed there. `!important` means no rule in this file
could have won it back (PORT-22's shape, from the layout engine rather than
from a preset). */
.legal {
max-width: 74ch;
}
/* `clamp(21px,2.4vw,27px)` is NOT the design system's `h3`, which is
`clamp(20px,2.3vw,27px)` - one pixel at the floor and .1vw through the middle.
Both are in the prototype, the base rule and this override, so the difference
is the design's and restating it is the port rather than a correction.
`scroll-margin-top:90px` is what stops the sticky 74px nav covering a heading
the jump list just moved to; the extra 16px is the prototype's clearance. */
.legal h3 {
font-size: clamp(21px, 2.4vw, 27px);
margin-top: clamp(34px, 4vw, 52px);
scroll-margin-top: 90px;
}
/* The first heading opens the band, so it takes the section's padding as its
space rather than adding to it. This also stops the margin collapsing out of
`.legal` and pushing the whole column down, which is what it would do
otherwise - `.legal` has no padding or border of its own. */
.legal h3:first-child {
margin-top: 0;
}
/* 1.75 leading rather than the body's 1.65: the one place on the site with
paragraphs long enough for the extra line spacing to be worth the height. */
.legal p {
color: var(--ds-color-fg-default);
line-height: 1.75;
margin-top: 13px;
}
.legal ul {
margin: 13px 0 0;
padding-left: 19px;
color: var(--ds-color-fg-default);
line-height: 1.75;
}
/* AN ADDRESS IN THIS COLUMN IS ONE UNBREAKABLE TOKEN.
`POPIAComplaints@inforegulator.org.za` is 287px wide with nowhere to wrap,
and inside a list item indented 19px it pushed `/privacy/` to 322px at a
320px viewport - the whole page scrolling sideways for one word.
`_contact-page.scss` ruled this for `.deet a` when the contact page was
built, in the same words and for the same reason. Carried across rather than
re-derived; `word-break:break-word` to match that declaration exactly, so
the two places that solve this problem solve it identically.
CLEAN AT 390 AND AT EVERY WIDTH THE PIXEL DIFF MEASURES. Overflow lives in
the last 70px, which is why `tools/mobile-audit.mjs` sweeps 320 separately.
BUILD-DECISIONS 25.5. */
.legal a {
word-break: break-word;
}
.legal li {
margin-top: 7px;
}
/* The marker is the only accent in the column, and `::marker` is the property
that carries it - colouring the `<li>` instead would take the text with it. */
.legal li::marker {
color: var(--ds-color-brand-accent);
}
/* `strong` steps UP to the heading white from the body's muted grey, which is
what makes the cookie categories read as a list of names rather than four
sentences. Weight 600 rather than the UA's 700, because the body face's bold
is heavier than this design uses anywhere else. */
.legal strong {
color: var(--ds-color-fg-heading);
font-weight: 600;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` - a FIXED 26px -
onto every child of a group block through `:root :where(.is-layout-flow) > *`,
and `margin-block-end:0` alongside it. Both have to be dealt with here, and
the two halves need different weights.
STRUCTURAL, NOT A LIST OF CONTAINER NAMES. `.pg-x .sec>.shell>*` is (0,3,0)
against core's (0,1,0) and reaches every direct child of the band's shell,
whatever a later edit puts there. The list version is how the same collision
got into `_contact-page.scss` in the same file that warns about it, and what
it costs is a band that is EXACT AT ONE WIDTH AND 2px OUT AT THE OTHER with
every child measuring identical to 0.01px: `.toc`'s own margin is a clamp,
core's is a constant, adjacent flow margins collapse to the larger, and a
clamp crosses a constant somewhere in the middle of the range. PORT-64. */
.pg-privacy .sec > .shell > *,
.pg-terms .sec > .shell > *,
.pg-cookies .sec > .shell > * {
margin-block-start: 0;
}
/* AND THE JUMP LIST'S OWN TWO MARGINS PUT BACK, at (0,4,0) so they beat the
reset above rather than depending on where in this file they sit.
The 26px top is the PROTOTYPE'S INLINE STYLE - `<div class="toc"
style="margin-top:26px">` - moved into the component layer where it belongs.
An inline style is invisible to a CSS port because it is not in the
stylesheet, and inexpressible in a markup port because a length in block
markup is a raw value the token gate forbids under `wp-content`: it falls
through both routes silently and the band inherits core's own gap instead
(PORT-30). That it happens to equal core's 26px block gap is a COINCIDENCE
and is exactly why it is stated rather than left to fall through - the two
numbers have nothing to do with each other and either can move.
It survives the harness's edit, which is the reason it matters. The
scaffolding `.note.warn` above the list is stripped from the prototype render
by `visual-diff.mjs`, so this margin becomes the first thing in the band on
both sides; `.shell` has no padding-top, so it collapses out through the
shell and lands inside `.sec`'s padding in both renders alike.
The bottom is the gap to the notice - the prototype's
`clamp(30px,4vw,46px)` - restated here rather than left on `.toc` because
core's `margin-block-end:0` is (0,1,0), the same weight a bare `.toc` rule
would carry, and a tie decided by enqueue order is a tie waiting to be
lost. */
.pg-privacy .sec > .shell > .toc,
.pg-terms .sec > .shell > .toc,
.pg-cookies .sec > .shell > .toc {
margin-block-start: 26px;
margin-block-end: clamp(30px, 4vw, 46px);
}
/* THE NOTICE'S OWN CHILDREN, AND THIS ONE IS DELIBERATELY UNSCOPED AND WEAK.
`.legal>*` is (0,1,0) - a universal selector contributes nothing - so it ties
with core's rule and wins on source order (ugcza.css is enqueued after
global-styles-inline-css), while LOSING to every one of this file's own
`.legal h3`, `.legal p` and `.legal ul` rules at (0,1,1). That is the exact
behaviour wanted: any child type nobody has written a rule for falls back to
the prototype's zero instead of taking a 26px gap, and the three types that
do have rules keep their measured 13px and clamp.
A SCOPED VERSION OF THIS LINE WOULD BREAK THE PAGE. `.pg-privacy .legal>*` is
(0,2,0), which beats `.legal p` at (0,1,1) on class count and would zero
every paragraph's 13px lead-in - the notice would set solid. The weaker
selector is the correct one here, which is the opposite of the rule above it,
and the difference is that this one has to lose to something. */
.legal > * {
margin-block-start: 0;
}
/* ---------- the page's scale ----------
See the header. These five are the whole of the difference between this page
and the design system's defaults, and they are the prototype's own numbers.
`h3` and `h4` are NOT here because the two sheets already agree on them. */
.pg-news .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-news .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-news h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-news h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-news .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the one value the prototype wrote inline ----------
PORT-30: an inline style is invisible to a CSS port - it is not in the
stylesheet - and inexpressible in a markup port, because a clamp has no
block-supports form. So it falls through both routes silently and the band
inherits nothing. `ugcza-news.html` carries exactly two `style=` attributes
that are not artwork, and this is the structural one:
<div class="sec-h" style="margin-top:clamp(30px,4vw,46px)">
THIS IS A JUDGEMENT CALL AND IT IS MADE IN THE OPEN, because the space it
holds belongs to an element the build does not have. In the prototype the
band opens with a `.note` and this margin separates that note from the
section head. Strip the note - which the build must, and which
`visual-diff.mjs` does to the prototype before measuring it - and the margin
is left standing as the first thing inside the band.
Reproduced, on two pieces of evidence rather than on the gate alone:
1. The margin is declared on `.sec-h`, an element the build keeps, and the
SAME FILE shows the designer's other habit one band further down -
`<div class="note" style="margin-top:22px">` puts the spacing on the
note when the spacing belongs to the note. Here it is not on the note.
2. Measured in the stripped prototype render rather than argued from the
CSS: dropping it leaves band 1 at 527.66px against 573.66px at 1440 and
889.28 against 919.28 at 390 - 46px and 30px out, where the gate is 8.
If it is ever decided that the gap died with the note, this rule is the one
line to delete and the band will report -46/-30 for that reason and no other.
THE SPECIFICITY IS THE POINT OF THE ID. The structural bridge at the foot of
this file zeroes `margin-block-start` on every direct child of a `.shell` at
(0,3,0); `.pg-news #outline .sec-h` is (1,2,0) and outranks it, so the two
rules cannot be reordered into each other's way. */
.pg-news #outline .sec-h {
margin-block-start: clamp(30px, 4vw, 46px);
}
/* ---------- the two panel buttons carry an arrow ----------
Grepped against the prototype rather than eyeballed: `ugcza-news.html` carries
exactly two `class="arw"`, one in the `.sp` panel and one in the `.sp.hot`
panel, both inside `<div class="go"><a class="btn ...">Label<svg class="arw">`.
The shared `.split`/`.sp`/`.go` component in `_tiles.scss` does NOT supply it
- the difference between this page's panel and the homepage's is in the
markup, not in the CSS - so inheriting the component alone would ship two
buttons about 18px short, which is the same .72em glyph plus .34em clearance
`_tiles.scss` records measuring twice on `.more`.
A PSEUDO-ELEMENT, NOT MARKUP, for the reason `_tiles.scss` sets out above its
own `.more` rule: core's `createFromElement()` in
wp-includes/js/dist/rich-text.js keeps an empty element only as
`{type, attributes}`, so an inline `<svg>`'s `<path>` child is dropped on the
editor's round-trip and the block then fails validation the first time the
client retypes the label. The glyph, the viewBox, the 1.7 stroke and the mask
treatment are that block's, character for character - one arrow, one data
URI, `currentColor` deciding the colour so hover follows the button.
THE SCOPE IS LOAD-BEARING, exactly as `_contact-page.scss` records: a rule
keyed on `.go` alone would double the arrow on the homepage's start.gg cards,
whose `<span class="go">Results` already carries the glyph in markup.
`.pg-news .sp .go` cannot reach them, and this page has no other `.go`.
The pseudo goes on the LINK, not on the block wrapper: `_wp-bridge.scss`
states that a component class set on a button block lands on the wrapper
while the treatment belongs to `.wp-block-button__link`, and that link is the
`inline-flex` box with the 9px gap. `margin-left:.34em` is kept ON TOP of that
gap, exactly as `.arw` and the `.more` rule both do: the prototype's spacing
between label and glyph is the 9px flex gap PLUS 5.78px of margin at 17px, not
one or the other, and dropping either closes it by a third. */
.pg-news .sp .go .wp-block-button.btn > .wp-block-button__link::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` - a FIXED 26px -
onto every child of a group block through `:root :where(.is-layout-flow) > *`.
On a flex or grid container those margins ADD to the gap instead of collapsing
into it, and on a flow child they collapse with the design's own margin to the
LARGER of the two, which is where this bites.
STRUCTURAL RATHER THAN A LIST OF CONTAINER NAMES, and that choice is PORT-64.
The list version cannot be checked for completeness: `_contact-page.scss`
carries a comment reading "EVERY NEW CONTAINER ON THIS PAGE IS IN THIS LIST"
directly above a list that `.split` was missing from. `.sec-h` sets
`margin-bottom:clamp(24px,3.4vw,42px)` and core sets 26px on the next child,
so above the width where the clamp crosses 26 the design wins and the band is
exact, and below it core wins and the band is 2px tall - the crossover for
this clamp is 26 / 0.034 = 765px, which is why such a band reads 0.0% at 1440
and several percent at 390 with every child measuring identical to 0.01px.
(0,3,0) against core's (0,1,0), so it wins on specificity rather than on the
enqueue order. Every direct child of a `.shell` on this page, whatever a later
band puts there - `.sec-h`, `.vals`, `.press` and `.split` today. `.sec-h`'s
own margin-BOTTOM is untouched and stays the gap.
The containers INSIDE those children are already covered unscoped and are
deliberately not restated: `.sec-h>*` in _sections.scss, `.vals>*` and
`.val>*` in _about-page.scss, `.split>*` and `.sp>*` in _tiles.scss. `.pr`'s
three children need nothing at all - the tile is emitted whole by
`ugcza_render_news_index()` inside a plain `<a>`, so no element in it carries
a layout class and core never had a rule there to beat. */
.pg-news .sec > .shell > * {
margin-block-start: 0;
}
/* The page header's own children. `_about-page.scss` already states this
unscoped, so this line is insurance rather than necessity - it removes a
cross-file dependency on a rule that lives in a partial named after a
different page, and it is what every other page partial does. */
.pg-news .phead .shell > * {
margin-block-start: 0;
}
/* ---------- photographic ground on the four outline cards ----------
B-228, client instruction 2026-08-15: monochrome photographs from the event
gallery behind the four `#outline` cards, graded onto the teal.
SCOPED TO `.pg-news #outline`, AND THAT IS LOAD-BEARING RATHER THAN TIDY.
`.val` is shared by three pages and two record types - PORT-58 states it:
About renders it from `ugcza_value`, Partners from `ugcza_inclusion`, and
News is the only one that is pattern markup. An unscoped `.val::before` would
put a photograph behind every value on About and every inclusion on Partners,
on bands that are signed off at 0.0%, and the pixel diff for THIS page would
still be green. The `#outline` half narrows it again so a future `.vals` band
elsewhere on News is unaffected.
`mix-blend-mode:multiply` IS THE WHOLE CONTRAST ARGUMENT, and it is a proof
rather than a measurement. The scrim floor rule is that a photographic layer
may never leave the ground LIGHTER than the flat colour it replaced - the
type's contrast was set against that flat colour, so anything lighter takes
contrast away, and the answer is never to re-derive an alpha per photograph.
Multiply cannot go lighter: the result is `ground x art / 255` per channel,
which is <= ground for every possible input, and equals it exactly where the
art is pure white. `opacity` then interpolates between that result and the
untouched ground, so it stays on the safe side of the floor at every value.
The consequence is the property `blocks-about.php` prizes about the section
wash, in its words: the treatment stays in CSS and is not baked into the file,
so the floor holds over whatever is put here next rather than over these four
crops alone. A pure white photograph lands exactly on the teal and every
darker one lands below it. Nothing has to be re-measured when the pictures
change, which is the failure mode a per-image alpha guarantees.
MEASURED ON THE BUILT PAGE, not argued from the model - the type is hidden so
the ground under it is sampled directly, and the worst (lightest) pixel in
each of the four cards is taken, because that is the pixel that decides the
floor:
flat #28504d worst pixel, all four cards
h4 heading 8.56:1 8.56:1
body copy 5.35:1 5.35:1
.num accent 2.62:1 2.62:1
IDENTICAL, to the last measurable step, on every card. That is the multiply
floor doing exactly what it promises rather than approximately: the lightest
pixel a photograph can produce IS the ground, reached where the art is white,
and every other pixel is darker than it. The first draft of this comment
predicted three improved ratios and all three were wrong - the improvement is
not in the floor, it is in everything above it. Median luminance across the
four cards lands at 0.031 to 0.033 against the ground's 0.067, so the typical
pixel is about twice as dark as the flat card and the type reads BETTER over
the artwork than without it, while never reading worse.
THE ACCENT IS BELOW 4.5:1 IN BOTH COLUMNS AND THIS CHANGE DOES NOT MOVE IT.
`.num` is the 11px letterspaced label the design has always drawn in orange on
this teal card, so 2.62:1 is what the card has always been; it is not
introduced here and it is not improved here either. B-229 tracks it, and it
belongs to the card rather than to the photograph - which is why it is stated
here rather than quietly absorbed into a change that had nothing to do with
it.
`isolation:isolate` CONFINES THE BLEND TO THE CARD. Without it the multiply
composites against everything painted below in the stacking context - the
band's own ground and whatever sits under that - so the card would darken the
page rather than itself, and the effect would change depending on what band
preceded it. It is one word and it is the difference between a treatment and
an accident.
THE GRADE IS `grayscale(1)` FIRST, then a flattened tone curve. The client
asked for monochrome and the multiply supplies the teal, so any colour left in
the file fights the ground - `contrast(.42)` pulls the range toward the middle
so the darkest parts do not crush to black under the multiply, and
`brightness(1.5)` lifts that compressed range back up so the card still reads
as teal rather than as a dark plate. Neither is fixing a cast, which is the
one thing this pair cannot do. */
.pg-news #outline .val {
position: relative;
isolation: isolate;
overflow: hidden;
}
.pg-news #outline .val-art::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--ds-outline-art);
background-size: cover;
background-position: center;
filter: grayscale(1) contrast(0.42) brightness(1.5);
mix-blend-mode: multiply;
opacity: 0.62;
z-index: -1;
}
/* NO `position:relative` ON THE CHILDREN, AND THAT ABSENCE IS LOAD-BEARING.
This block used to lift `.val>*` to `z-index:1` over an artwork layer at 0.
It worked, and it silently broke the whole-card link added below: an
absolutely positioned `::after` resolves against its nearest POSITIONED
ancestor, so with the `h4` relative the overlay covered the heading text
instead of the card, and only the words were clickable. The card looked
correct and a click landed nowhere - found by driving a real click at the
card's bottom corner rather than by reading the CSS.
The artwork sits at `z-index:-1` instead. A negative-z-index child paints
ABOVE its parent's own background and BELOW the parent's in-flow content, so
the teal ground, then the photograph, then the type is the natural order and
nothing has to be lifted at all. `isolation:isolate` on `.val` keeps the -1
inside the card rather than letting it fall behind the band, and the multiply
still blends against the card's own background because that is what the
isolated stacking context contains. */
/* One class per card, naming the CATEGORY rather than the position, so the four
can be reordered in the pattern without the pictures following the slots. The
URL is relative to the built stylesheet at `assets/css/ugcza.css`. */
/* ---------- each card opens its category archive ----------
B-234. The four category archives rendered correctly and NOTHING ON THE SITE
POINTED AT ANY OF THEM - `archive.html` was reachable only by typing a URL.
These four cards are the route in from the index; the article head's category
eyebrow is the route in from an article.
THE HEADING CARRIES THE LINK AND THE `::after` CARRIES THE CARD. The whole
card is clickable, but the anchor's TEXT is "Event recaps" rather than an
empty box, so the accessible name is the category name and the link is
announced as one item rather than as a bare region. Wrapping the card's three
children in an `<a>` would have been the other way to do it and is not
available here: a group block cannot be an anchor, and nesting the number, the
heading and the paragraph inside one would put block markup inside a link that
the editor then has to round-trip.
THE OVERLAY RESOLVES AGAINST `.val`, AND THAT IS THE FRAGILE PART. An
absolutely positioned `::after` uses its nearest POSITIONED ancestor, so this
only covers the card while nothing between it and `.val` is positioned. The
first version of this shipped with `.val>*{position:relative}` still in the
block above and the overlay covered the heading text alone - the card looked
right and a click on it did nothing. If a rule ever gives the `h4` or its
ancestors a position, this breaks the same way and just as quietly.
`check-article-page.mjs` now drives a click at the card's bottom corner,
which is the only thing that catches it.
THE KNOWN COST IS TEXT SELECTION. An overlay across the card means the copy
underneath cannot be selected with a mouse. That is the accepted trade for a
whole-card target and it is why the overlay is not used on the article tiles,
which are already anchors in their own right.
FOCUS RINGS THE CARD, NOT THE WORDS. `:focus-visible` on an inline anchor
would draw a box around the heading text alone, which is a poor signal for a
target this size; the ring goes on the `::after` so it traces what actually
responds to Enter. `outline-offset` is negative because `.val` is
`overflow:hidden` for the artwork and a positive offset would be clipped. */
.pg-news #outline .val h4 a {
color: inherit;
text-decoration: none;
}
.pg-news #outline .val h4 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.pg-news #outline .val:hover h4 a,
.pg-news #outline .val h4 a:focus-visible {
color: var(--ds-color-brand-accent);
}
.pg-news #outline .val h4 a:focus-visible::after {
outline: 2px solid var(--ds-color-brand-accent);
outline-offset: -3px;
}
.pg-news #outline .val-art--recaps {
--ds-outline-art:url("../img/outline/recaps.webp");
}
.pg-news #outline .val-art--features {
--ds-outline-art:url("../img/outline/features.webp");
}
.pg-news #outline .val-art--production {
--ds-outline-art:url("../img/outline/production.webp");
}
.pg-news #outline .val-art--announcements {
--ds-outline-art:url("../img/outline/announcements.webp");
}
/* ---------- the page's scale ----------
See the header. These five are the whole of the difference between this page
and the design system's defaults, which ship the HOMEPAGE's numbers. They are
the prototype's own, and they are About's and Contact's, and those facts were
checked separately. Prototype values beside each: `.sec` is
clamp(52px,7.5vw,102px) by default, `.sec-h` clamp(26px,3.6vw,44px), h1
clamp(38px,7vw,80px), h2 clamp(29px,4.4vw,52px), `.lede`
clamp(16.5px,1.6vw,19px)/1.62/58ch - every one of them a step ABOVE what this
page asks for, which is why a missing scale block reads as "uniformly, very
slightly too big" rather than as a fault. */
.pg-info-hub .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-info-hub .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-info-hub h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-info-hub h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-info-hub .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the contents list ----------
`auto-fit` at a 210px floor, so six links run as one row of six at 1440 and
reflow to one column at 390 with no media query - which is why this grid is
safe on a prototype page whose stylesheet was cut down (PORT-81 is about the
grids that are NOT).
THE TWO GAP VALUES ARE DIFFERENT ON PURPOSE and both are the prototype's: 10px
between rows, 22px between columns. The rows are separated by each link's own
hairline as well, so they need less air than two columns of running text do.
`.toc` IS ONE LETTER FROM `.todo`, which is on `visual-diff.mjs`'s
PROTOTYPE_ONLY list and fails the page at 100% if the build matches it. The
selector is an exact class match, so `.toc` cannot match `.todo` and vice
versa - but a future rule written as `[class^="to"]` would, and this is the
page where somebody might. */
.toc {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px 22px;
margin-bottom: clamp(30px, 4vw, 46px);
}
/* The hairline is PURE white at .09, not the brand near-white: it is a rule over
a `bg-muted` band rather than a control's own edge, and at 9% the two are 0.5
of one part in 255 apart while `channel-light` says what the prototype says.
The prototype writes rgba(255,255,255,.09) here and rgba(249,250,250,.42) on
its form controls, so the distinction is the designer's and is kept (PORT-08).
`padding:7px 0` with no left padding, so the link's text starts on the shell's
own gutter and the rules below the six links form one continuous baseline. */
.toc a {
font-family: var(--ds-font-label);
font-size: 12.5px;
color: var(--ds-color-fg-default);
padding: 7px 0;
border-bottom: 1px solid rgba(var(--ds-color-channel-light), 0.09);
}
.toc a:hover {
color: var(--ds-color-brand-accent);
}
/* ---------- the reference sections ----------
`74ch` is a reading measure and it is wider than the `.lede`'s 60ch on
purpose: a lede is a short standfirst set large, and this is several hundred
words of reference text a player scans for one clause.
`scroll-margin-top:90px` is what stops the sticky nav covering a heading
somebody has just followed a contents link to. The bar is 74px, so 90 leaves
16px of clearance. It only works because the scroll target is the `<h3>`
itself - `ugcza_render_info_sections()` puts the id on the heading and not on
a wrapper, which is also what keeps the id where the record can own it. */
.legal {
max-width: 74ch;
}
/* The heading steps DOWN from the design system's h3 at the small end and meets
it at the large - clamp(21px,2.4vw,27px) against clamp(20px,2.3vw,27px) - so
it has to be restated rather than inherited. The prototype's own numbers. */
.legal h3 {
font-size: clamp(21px, 2.4vw, 27px);
margin-top: clamp(34px, 4vw, 52px);
scroll-margin-top: 90px;
}
/* The first heading sits directly under `.toc`'s own bottom margin, so its
top margin would double the gap. `:first-child` rather than `:first-of-type`,
which is the prototype's, and correct here because the block emits the
heading first with nothing before it. */
.legal h3:first-child {
margin-top: 0;
}
.legal p {
color: var(--ds-color-fg-default);
line-height: 1.75;
margin-top: 13px;
}
/* `padding-left:19px` rather than the UA's 40px, which is the one place on this
page a UA default is being overridden rather than inherited - so it is the
one place quirks mode could have differed, and it cannot, because both
documents take this value. `document.compatMode` is BackCompat in the
prototype and CSS1Compat in the build on every page of this build (PORT-56,
PORT-63); this page carries no `<table>` and no `<form>`, which are the two
elements where that difference is known to bite. */
.legal ul {
margin: 13px 0 0;
padding-left: 19px;
color: var(--ds-color-fg-default);
line-height: 1.75;
}
.legal li {
margin-top: 7px;
}
/* `::marker` takes the accent while the text stays `fg-default`. It is the only
list on the site drawn with real markers - `.vc li` in _about-page.scss uses a
7px rule instead, because neither licensed face carries a disc that sits on
that baseline. Here the marker is the browser's, so the face never enters it. */
.legal li::marker {
color: var(--ds-color-brand-accent);
}
.legal strong {
color: var(--ds-color-fg-heading);
font-weight: 600;
}
/* ---------- both panel buttons carry an arrow ----------
MEASURED RATHER THAN INHERITED, the same way `_contact-page.scss` records it.
`.split`/`.sp`/`.go` are `_tiles.scss`'s and shared, so the easy assumption is
that the shared component already covers the button - it does not, and the
difference is not visible in the CSS at all. It is in the markup.
Grepped against the prototypes rather than eyeballed: `ugcza-info-hub.html`
carries exactly two `class="arw"` and BOTH sit inside
`<div class="go"><a class="btn ...">Label<svg class="arw">` - one in the plain
`.sp` panel and one in the `.sp.hot` one. `ugcza-homepage-brief.html` carries
ten and not one of them is in a `.sp .go` button, so `patterns/home-cta.php`
is right to have no arrow and this page needs one. Inheriting the shared
component would have shipped two buttons about 18px short - the .72em glyph
plus its .34em clearance, which `_tiles.scss` records measuring twice on
`.more` links.
A PSEUDO-ELEMENT, NOT MARKUP, for the reason `_tiles.scss` sets out above its
own `.more` rule: core's `createFromElement()` in
wp-includes/js/dist/rich-text.js keeps an empty element only as
`{type, attributes}`, so an inline `<svg>`'s `<path>` child is dropped on the
editor's round-trip and the block then fails validation the first time the
client retypes the label. The glyph, the viewBox, the 1.7 stroke and the mask
treatment are that block's, character for character - one arrow, one data
URI, `currentColor` deciding the colour so hover follows the button.
The pseudo goes on the LINK, not on the block wrapper: `_wp-bridge.scss`
states that a component class set on a button block lands on the wrapper
while the treatment belongs to `.wp-block-button__link`, and that link is the
`inline-flex` box with the 9px gap. `margin-left:.34em` is kept ON TOP of
that gap, exactly as `.arw` and the `.more` rule both do: the prototype's
spacing between label and glyph is the 9px flex gap PLUS 5.78px of margin at
17px, not one or the other, and dropping either closes it by a third.
THE SCOPE IS LOAD-BEARING. The homepage's other `.go` elements are the
start.gg cards' `<span class="go">Results` inside `.gg-foot`, and those DO
carry the glyph in markup already. A rule keyed on `.go` alone would double
the arrow there. `.pg-info-hub .sp .go` cannot reach them. */
.pg-info-hub .sp .go .wp-block-button.btn > .wp-block-button__link::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` onto every child
of a group block through `:root :where(.is-layout-*) > *`. `.shell` is a
constrained group here, so every band's content takes a fixed 26px it did not
ask for.
STRUCTURAL RATHER THAN A LIST OF CONTAINER NAMES, which is PORT-64's whole
point: `.pg-info-hub .sec>.shell>*` at (0,4,0) cannot be left incomplete,
where a list can - and the list version is how the Contact page shipped two
bands 2px tall, in a file that carried a comment reading "EVERY NEW CONTAINER
ON THIS PAGE IS IN THIS LIST" with `.split` not in it.
WHY IT MATTERS AT ONE WIDTH ONLY, which is the part that makes it hard to
see: `.sec-h` sets `margin-bottom:clamp(24px,3.4vw,42px)` and core sets a flat
26px on the next child. Adjacent flow margins collapse to the LARGER, so above
the width where the clamp crosses 26 the design wins and the band is exact,
and below it core wins and the band is 2px tall. This clamp's `vw` term equals
26px at 26 / 0.034 = 765px, so 1440 is clean and 390 is not. A band that is
0.0% at one width and several percent at the other with every child measuring
identical is this, and PORT-48 is the standing instruction never to file it as
noise. */
.pg-info-hub .sec > .shell > * {
margin-block-start: 0;
}
/* AND THE TWO THE PROTOTYPE SETS INLINE, restated at the same (0,4,0) and after
the reset so they win on source order.
THESE ARE PORT-30 EXACTLY and they are the one thing on this page that BOTH
kinds of port drop silently. `ugcza-info-hub.html` carries
`<div class="split" style="margin-top:22px">` and
`<div class="toc" style="margin-top:26px">` - inline styles, so a CSS port
never sees them (they are not in the stylesheet) and a markup port cannot
express them (a group block has no margin-top support that emits a bare px).
They fall through both routes and the band inherits core's 26px instead: 4px
wrong on `.split` and 0px wrong on `.toc` above 765px, which is exactly small
enough to be attributed to something else.
Written as `margin-block-start` rather than `margin-top` so the property being
contested is the same one core writes - a physical/logical pair cascades
together, but naming the same property keeps the winner obvious to a reader.
`.toc`'s 26px still COLLAPSES with `.sec-h`'s clamp above it, to the larger of
the two, exactly as it does in the prototype. */
.pg-info-hub .sec > .shell > .split {
margin-block-start: 22px;
}
.pg-info-hub .sec > .shell > .toc {
margin-block-start: 26px;
}
/* The page header's own children, as on every other page partial. */
.pg-info-hub .phead .shell > * {
margin-block-start: 0;
}
/* ---------- the page's scale ----------
See the header. These five are the whole of the difference between this page
and the design system's defaults, which are the HOMEPAGE's. Leaving them out
is not subtle: PORT-83 measures it at 18px on every band, compounding down the
page, with no single band obviously at fault. They are the prototype's own
numbers, and they are About's, Contact's and Partners' numbers, and those
facts were checked separately.
`h3` and `h4` are deliberately NOT in the list. The prototype sets them to
clamp(20px,2.3vw,27px) and 19px/1.18, which is what `_primitives.scss` already
ships, so a line here would restate a value rather than change one - and this
page has an `<h3>` in the red panel and four `<h4>` in the routes that would
then each have two definitions. */
.pg-accademy .sec {
padding: clamp(50px, 7vw, 96px) 0;
}
.pg-accademy .sec-h {
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.pg-accademy h1 {
font-size: clamp(38px, 6.6vw, 74px);
}
.pg-accademy h2 {
font-size: clamp(28px, 4.2vw, 48px);
}
.pg-accademy .lede {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.6;
max-width: 60ch;
}
/* ---------- the figures, in this page's dress ----------
The component is `_about.scss`'s and the artwork layer, the drift and the
reduced-motion guard all stay there. This page's prototype had NO `.stat`
rules of its own until `tilebg.py` supplied them, and that file records why:
the generated-pages builder never emitted any, so the tiles rendered as
unstyled divs and the grid and type were copied in from the Partners page.
That is why the three overrides below are Partners' three, character for
character, rather than a set derived here:
node tools/prototype-style-diff.mjs ugcza-partners.html ugcza-accademy.html \
".stats,.stat,.stat-bg"
-> shared 14, differ 3
and all three "differences" are whitespace inside a declaration block, except
`.stat span`, where Partners writes `color:var(--tx-3)` and this page omits it.
Both pages then override it to `--tx-2` on the child selector below, so the two
compute identically - which is the only thing that matters, and is why this
file states the override rather than the base.
1. THE TILE GROUND IS OWED NOTHING. `.stat{background:var(--grey)}` unscoped in
the prototype, and `_about.scss`'s own unscoped `.stat` already paints
`bg-muted` on a plain `.sec`. Stated because the homepage's `#about .stat`
paints `bg-subtle` instead, and reading that rule is how you would conclude
this page owes one.
2. THE SCRIM IS HEAVIER THAN THE HOMEPAGE'S: .89/.91/.95/.95 against
.84/.86/.93/.93. Measured in `tilebg.py` against the brightest 0.5% of
pixels in these crops, not chosen, and the direction makes sense - these
tiles sit on #383838 where the homepage's sit on #0a0a0a, so the same
photograph has less ground helping it. Brand red is the binding constraint
either way: #ea3700 has luminance .20 and tops out at 5.04:1 even on pure
black.
3. THE LABEL IS ONE STEP BRIGHTER, `--tx-2` against the homepage's `--tx-3`,
which is the same lift the press kit and Partners both take. #868686 at
10.5px cannot clear 4.5:1 over anything lighter than about #1a1a1a, so the
ground was never the fixable part, and here it is #383838.
`em` is in the z-index list for the reason `_about.scss` records: a tile may
carry an optional third line, and an element left out of it sits at z-index
auto, which is UNDERNEATH the scrim at z-index 1 - text that is stored,
rendered and invisible. No tile on this page has one, and the block will emit
one the moment somebody types a sub-label into wp-admin. */
.pg-accademy .stat {
position: relative;
overflow: hidden;
}
.pg-accademy .stat > b, .pg-accademy .stat > span, .pg-accademy .stat > em {
position: relative;
z-index: 2;
}
.pg-accademy .stat > span, .pg-accademy .stat > em {
color: var(--ds-color-fg-default);
}
.pg-accademy .stat::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--ds-color-channel-scrim), 0.89) 0%, rgba(var(--ds-color-channel-scrim), 0.91) 40%, rgba(var(--ds-color-channel-scrim), 0.95) 66%, rgba(var(--ds-color-channel-scrim), 0.95) 100%);
}
/* ---------- every panel button carries an arrow ----------
THE SAME DIFFERENCE THE CONTACT AND PARTNERS PAGES HAVE FROM THE HOMEPAGE, and
it was grepped in this prototype rather than inherited from those findings.
`ugcza-accademy.html` carries FIVE `class="arw"` and all five sit inside
`<div class="go"><a class="btn ...">Label<svg class="arw">` - one per panel
across all four bands, in `.btn`, `.btn.line` and `.btn.alt` alike.
`ugcza-homepage-brief.html` carries ten and not one of them is in a `.sp .go`,
which is why `patterns/home-cta.php` is right to have none and why this rule
cannot lose its page scope: a rule keyed on `.sp .go` alone would put an arrow
on the homepage's two label-only panel buttons.
THE SCOPE IS LOAD-BEARING FOR A SECOND REASON. The homepage's other four `.go`
elements are the start.gg cards' `<span class="go">Results` inside `.gg-foot`,
and those DO carry the glyph in markup already, so an unscoped rule would
double the arrow there.
A PSEUDO-ELEMENT, NOT MARKUP, and the reason is core rather than taste:
`createFromElement()` in wp-includes/js/dist/rich-text.js keeps an empty
element only as `{type, attributes}`, so an inline `<svg>`'s `<path>` child is
dropped on the editor's round-trip and the block fails validation the first
time the client retypes the label. The glyph, the viewBox, the 1.7 stroke and
the mask are `_tiles.scss`'s `.arw`, character for character, with
`currentColor` so hover follows the button.
`margin-left:.34em` sits ON TOP of the link's own 9px flex gap, not instead of
it: the prototype's spacing between label and glyph is the gap PLUS 5.78px of
margin at 17px, and dropping either closes it by a third. `_tiles.scss` records
measuring exactly that on the `.more` links twice.
THE THIRD CONSUMER OF A RULE NOW WRITTEN THREE TIMES. `_contact-page.scss` and
`_partners-page.scss` carry the identical declaration under their own scopes,
and the three want to fold into one multi-scope selector in `_tiles.scss`
beside the `.more` arrow, which already lists six page scopes for exactly this
reason. Not done here because that file is shared with three sessions building
three other pages as this lands, and a duplicated data URI is a smaller problem
than a raced stylesheet. B-140 is the row. */
.pg-accademy .sp .go .wp-block-button.btn > .wp-block-button__link::after {
content: "";
width: 0.72em;
height: 0.72em;
display: inline-block;
flex: none;
vertical-align: -0.02em;
margin-left: 0.34em;
background: currentColor;
--ds-arw-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 1l4 4-4 4M11 5H1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask: var(--ds-arw-glyph) center/contain no-repeat;
mask: var(--ds-arw-glyph) center/contain no-repeat;
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` - a FIXED 26px -
onto every child of a group block through `:root :where(.is-layout-flow) > *`.
Structural rather than a list of names, for the reason `_contact-page.scss`
sets out at length: a named list is one omission away from 26px of band that no
probe measures, and `.split` was left out of that page's list in the same file
that warns about it. (0,3,0) against core's (0,1,0), so it wins on specificity
rather than on enqueue order.
THIS PAGE IS THE EXACT SHAPE PORT-64 IS ABOUT. `.sec-h` sets
`margin-bottom:clamp(24px,3.4vw,42px)` and adjacent flow margins collapse to
the LARGER of the two, so above the width where the clamp crosses 26px the
design wins and the band is exact, and below it core wins and the band is 2px
tall. The crossover is 26 / 0.034 = 765px, which is why a page can read 0.0% at
1440 and several percent at 390 with every element inside it identical to
0.01px. All four bands here open with a `.sec-h`, so all four would do it.
`.sec-h`'s own margin-BOTTOM is untouched and stays the gap between a section's
head and its content. */
.pg-accademy .sec > .shell > * {
margin-block-start: 0;
}
/* AND THE ONE CHILD THAT MUST GET ITS MARGIN BACK. `.stats` is the only band
content on this page that declares a top margin of its own -
clamp(30px,4vw,46px), in _about.scss, ported from the prototype - and the
structural rule above outranks it (0,3,0 against 0,1,0), so without this line
the figures would sit 30px high at 390 and 46px high at 1440.
It is NOT core's block gap by another name and the two are not
interchangeable. `.stats` follows `.split` here rather than `.sec-h`, so the
collapse is max(0, 30..46) and the prototype's own gap is the clamp outright -
core's flat 26 would be swallowed at 1440 and would win at 390, which is a 4px
difference at one width only and is PORT-64 again from the other side.
IT WINS ON SPECIFICITY, NOT ON SOURCE ORDER - (0,4,0) against the reset's
(0,3,0) - so it stays correct wherever it sits in this file. `_partners-page.scss`
carries the identical line for the identical reason, which is the second
instance and is what makes it a property of the `.stats` band rather than of
that page. */
.pg-accademy .sec > .shell > .stats {
margin-block-start: clamp(30px, 4vw, 46px);
}
/* The page header's own children, as on every other page partial. `.phead` is
not a `.sec`, so the structural rule above cannot reach it. */
.pg-accademy .phead .shell > * {
margin-block-start: 0;
}
/* AND THE GRID AND FLEX CONTAINERS INSIDE THE BANDS. On a flow container core's
margins collapse; on a flex or grid container they ADD to the gap instead, so
every one of these would run its own measured gap PLUS 26px. `.split>*` and
`.sp>*` are already zeroed in `_tiles.scss` and `.vals>*`/`.val>*` in
`_about-page.scss`, so what is left is the figures band - `.stats` is a grid
with a 14px gap and `.stat` a flex column with a 4px one, and the four tiles
are emitted by `ugcza_render_about_stats()` inside a `.shell` that carries
`is-layout-constrained`. */
.pg-accademy .stats > *, .pg-accademy .stat > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* ---------- the featured image ----------
Core's `wp:post-featured-image` emits `<figure class="wp-block-post-featured-image
artfig"><img>`, and the figure is what needs the gap - `_primitives.scss`
already caps the image at `max-width:100%` and core's own stylesheet sizes it.
`display:block` on the img kills the inline-baseline gap under it, which would
otherwise put 4px of figure below a picture that looks like it ends at its own
edge.
The gap to the prose below is the design's own band rhythm rather than a new
number: `clamp(24px,3.4vw,42px)` is `.sec-h`'s margin-bottom on this page, which
is what every other band on the site puts between a head and its content. */
.artfig {
margin: 0 0 clamp(24px, 3.4vw, 42px);
}
.artfig img {
display: block;
width: 100%;
height: auto;
}
/* ---------- the prose ----------
74ch, and the measure is the whole typographic argument, exactly as
`_legal-page.scss` states it: this and the legal notices are the only bands on
the site that are continuous reading rather than panels and tiles, so the
column is capped far narrower than the 1172px shell around it. A `ch` rather
than a pixel count so the cap follows the body face's own width.
THE COLUMN IS LEFT-ALIGNED AND CORE WOULD HAVE CENTRED IT. `single.html` gives
the band's `.shell` FLOW layout, not constrained, for the reason
`_legal-page.scss` records: `is-layout-constrained` emits
`margin-left:auto !important;margin-right:auto !important` onto every child,
which is a no-op for a full-width child and moves a max-width one to the
middle - about 286px right at 1440. No rule in this file could win that back. */
.article {
max-width: 74ch;
}
/* `h2` IS THE SUBHEADING AN EDITOR ACTUALLY TYPES, and it cannot take the page's
own `h2` - that is `clamp(28px,4.2vw,48px)`, a band heading, and it would set a
subheading inside a 74ch column at half the column's width per line. It takes
`.legal h3`'s `clamp(21px,2.4vw,27px)` instead, which is the design's ONLY
measured in-prose heading size and is why that number is here rather than one
invented for this file. `h3` steps down to the design system's own `h4`.
`scroll-margin-top:90px` is what stops the sticky 74px nav covering a heading
an in-page link just moved to; the extra 16px is the clearance `.legal h3`
already uses. */
.article h2 {
font-size: clamp(21px, 2.4vw, 27px);
margin-top: clamp(34px, 4vw, 52px);
scroll-margin-top: 90px;
}
.article h3 {
font-size: 19px;
line-height: 1.18;
margin-top: clamp(26px, 3vw, 38px);
scroll-margin-top: 90px;
}
/* The first block opens the band, so it takes the section's padding as its space
rather than adding to it. This also stops the margin collapsing out of
`.article` and pushing the whole column down, which is what it would do
otherwise - `.article` has no padding or border of its own. */
.article > :first-child {
margin-top: 0;
}
/* 1.75 leading rather than the body's 1.65, for the reason `.legal p` gives: the
only paragraphs on the site long enough for the extra line spacing to earn its
height. */
.article p {
color: var(--ds-color-fg-default);
line-height: 1.75;
margin-top: 13px;
}
.article ul, .article ol {
margin: 13px 0 0;
padding-left: 19px;
color: var(--ds-color-fg-default);
line-height: 1.75;
}
.article li {
margin-top: 7px;
}
/* The marker is the only accent in the column, and `::marker` is the property
that carries it - colouring the `<li>` would take the text with it. */
.article li::marker {
color: var(--ds-color-brand-accent);
}
/* `strong` steps UP to the heading white from the body's muted grey, at 600
rather than the UA's 700 because the body face's bold is heavier than this
design uses anywhere else. */
.article strong {
color: var(--ds-color-fg-heading);
font-weight: 600;
}
/* A quotation is the one prose element the legal pages never carry, so it has no
measured form. It is composed from two things that are already the design's:
the accent rule is the same colour and the same 1px hairline weight as
`.pr span` and `_legal-page.scss`'s list separator, and the indent is the list
indent. Deliberately NOT a type-size change - a pull quote that also resizes is
a second decision, and this one is a blockquote in an editor. */
.article blockquote {
margin: clamp(26px, 3vw, 38px) 0 0;
padding-left: 19px;
border-left: 2px solid var(--ds-color-brand-accent);
color: var(--ds-color-fg-heading);
}
.article blockquote p {
color: inherit;
}
/* ---------- the archive's pagination ----------
THE DESIGN HAS NO PAGINATION COMPONENT AND THIS IS NOT A PORT. No prototype
page paginates anything, so the rules below are composed from the type and
colour tokens the rest of the design already uses - `.pr span`'s label face and
tracking, `.toc a`'s hairline treatment. Said plainly because a reader who
finds these in a file full of measured numbers should know which kind they are.
IT DOES NOT RENDER TODAY. Nine articles across four categories against a
`posts_per_page` of ten means `max_num_pages` is 1 on every archive the site
currently has, and `paginate_links()` returns null there. The first time this
is seen is after the client has been writing for a year, which is exactly when
nobody will remember it was never looked at. */
/* Kept as the component's own statement of the gap; the rule that actually wins
is the scoped pair at the foot of this file. */
.pager {
margin-top: clamp(30px, 4vw, 46px);
}
.pager ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.pager a, .pager span {
display: inline-block;
font-family: var(--ds-font-label);
font-size: 12.5px;
letter-spacing: 0.06em;
padding: 9px 14px;
color: var(--ds-color-fg-default);
border: 1px solid rgba(var(--ds-color-channel-light), 0.09);
}
.pager a:hover {
color: var(--ds-color-fg-heading);
border-color: var(--ds-color-brand-accent);
}
/* The current page is not a link, so it gets the accent as a statement of place
rather than as an affordance. Core emits it as `<span class="page-numbers current">`. */
.pager .current {
color: var(--ds-color-fg-on-accent);
background: var(--ds-color-brand-accent);
border-color: var(--ds-color-brand-accent);
}
/* ---------- the way back off an archive ----------
B-237. An archive is the one page on this site a reader can reach with no
route onward: the four `#outline` cards and every article's category eyebrow
lead INTO it, its tiles lead to articles, and the only exit was the crumb -
12.5px of text at the top, above a grid the reader has just scrolled past.
THE SAME `clamp` AS `.pager`, because this sits directly under whichever of
the two is last and the gap above it should not change depending on whether
the archive happens to paginate. With nine articles across four categories
`paginate_links()` returns null on every current archive, so today this
follows the grid and tomorrow it follows the pager, at the same distance.
The button itself needs nothing here: `.btn.line` is the design's secondary
action, styled in `_base.scss` on the class rather than on a wrapper, so a
bare anchor in a render callback takes it whole.
THE MARGIN HAS TO OUTRANK THE BLOCK BRIDGE, and the first version of this did
not. `_news-page.scss` carries `.pg-news .sec>.shell>*{margin-block-start:0}`
at (0,3,0) - the structural reset PORT-64 argues for - and the archive wears
`pg-news`, so a bare `.archive-back{margin-top:...}` at (0,1,0) lost outright
and the button rendered FLUSH against the grid. Measured, not guessed: the
link's top and the grid's bottom were both 735, exactly equal, which is what
sent the gate's "below the grid" row red on a page that looked almost right.
`.pager` HAD THE SAME BUG AND NOBODY HAD SEEN IT, because
`paginate_links()` returns null on every archive this site currently has, so
the element never renders. It is fixed here rather than left for the day the
client has written enough to paginate - which is precisely when nobody will
remember this rule exists. Same cause, same weight, one line each. */
.pg-news .sec > .shell > .archive-back {
margin-block-start: clamp(30px, 4vw, 46px);
}
.pg-news .sec > .shell > .pager {
margin-block-start: clamp(30px, 4vw, 46px);
}
/* ---------- core block bridge ----------
Core writes `margin-block-start:var(--wp--style--block-gap)` - a FIXED 26px -
onto every child of a flow container through `:root :where(.is-layout-flow)>*`.
THE BAND-LEVEL RESET IS ALREADY DONE AND IS DELIBERATELY NOT RESTATED HERE.
`_news-page.scss` carries `.pg-news .sec>.shell>*` and `.pg-news .phead .shell>*`
at (0,3,0), and these two pages wear `pg-news`, so `.artfig`, `.article`,
`.sec-h`, `.press` and `.pager` are all covered by rules that already exist. A
second copy here would be a second place to make the same edit, and the first
person to change one and not the other would get a band that is exact at one
width and 2px out at the other (PORT-64).
WHAT IS *NOT* COVERED IS INSIDE `.article`, because `wp:post-content` is its
own flow container: the paragraphs are children of `.entry-content`, not of
`.shell`. This line is UNSCOPED AND WEAK ON PURPOSE, exactly as `.legal>*` is.
`.article>*` is (0,1,0) - a universal selector contributes nothing - so it ties
with core and wins on source order, while LOSING to `.article p`, `.article h2`
and `.article ul` at (0,1,1). Any block type nobody has written a rule for
falls back to zero instead of taking a 26px gap; the ones that have rules keep
their measured numbers.
A SCOPED VERSION OF THIS LINE WOULD BREAK THE PAGE. `.pg-news .article>*` is
(0,2,0), which beats `.article p` at (0,1,1) on class count and would zero
every paragraph's 13px lead-in - the article would set solid. The weaker
selector is the correct one here, which is the opposite of the rule directly
above it in `_news-page.scss`, and the difference is that this one has to lose
to something. */
.article > * {
margin-block-start: 0;
}
@font-face {
font-family: "TGS Perfect Condensed";
src: url("../fonts/tgs-perfect-condensed.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Aloevera Display UGC";
src: url("../fonts/aloevera-display-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Aloevera Display UGC";
src: url("../fonts/aloevera-display-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Aloevera Display UGC";
src: url("../fonts/aloevera-display-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}