/* layout.css — shared structure across all design-system options; visual
decoration (color, font, radius, shadow) is supplied by the theme skin
file (theme-established-athletic.css) via custom properties. This file
makes no palette/type decisions.
Extended by design-motion beyond the original 3-option preview scope
to cover every template in the site (About team grid, homepage
Instagram placeholder, Contact intro, 404, footer contact/social) —
additions are grouped at the bottom, structure-only as with the rest
of this file. */
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
background: var(--color-bg);
color: var(--color-text);
/* Sticky footer (2026-07-23): column flexbox + min-height: 100vh so
#site-footer (margin-top: auto, see footer rules) is pushed to the
bottom of the viewport on short-content pages instead of sitting
wherever the content ends. */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 92%;
max-width: var(--container-max, 1200px);
margin-inline: auto;
}
/* header
2026-07-21: header roughly doubled in size (padding var(--space-4) ->
var(--space-6), logo 48px -> 96px — see the header-logo override in
theme-established-athletic.css) so the wordmark reads as the header's
dominant element. flex-wrap here is what lets the header drop to a
two-row layout (logo, then actions) at narrow widths instead of
overflowing/squashing — see the 700px breakpoint below. */
#site-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-6) 5%;
}
#site-branding img { height: var(--logo-height, 40px); width: auto; }
/* header-actions: social icon pair + the nav pill, grouped as one
right-aligned block inside the header bar (not a separate floating
element). Social icons read as clearly secondary — smaller, to the
left of the pill, which stays the primary/rightmost target. Gap
between the icon group and the pill tightened twice (2026-08-22,
per direction): var(--space-5)/24px -> var(--space-3)/12px ->
var(--space-2)/8px — kept matching #header-social's own
icon-to-icon gap below at each step, so LinkedIn, Instagram and the
pill keep reading as one evenly-spaced cluster rather than two
loosely-related groups. */
#header-actions { display: flex; align-items: center; gap: var(--space-2); }
/* Icon-to-icon gap tightened alongside the above, same two steps
(2026-08-22): var(--space-3)/12px -> var(--space-2)/8px ->
var(--space-1)/4px. */
#header-social { display: flex; align-items: center; gap: var(--space-1); }
#header-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
transition: transform 200ms ease;
}
#header-social a:hover, #header-social a:focus-visible { transform: scale(1.08); }
#header-social img { width: 34px; height: 34px; display: block; border-radius: 7px; }
@media (prefers-reduced-motion: reduce) {
#header-social a { transition: none; }
#header-social a:hover, #header-social a:focus-visible { transform: none; }
}
/* nav pill — single retractable component used at every viewport
(replaces the old always-inline nav + the old "hidden below 760px"
mobile gap). #primary-navigation is the positioning context for the
absolutely-positioned dropdown panel. */
#primary-navigation { position: relative; }
.nav-pill-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border-radius: 999px;
}
.nav-pill-trigger-icon { position: relative; width: 18px; height: 14px; flex: none; }
.nav-pill-trigger-icon .bar {
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 1px;
background: currentColor;
transform-origin: center;
}
.nav-pill-trigger-icon .bar-top { top: 0; }
.nav-pill-trigger-icon .bar-mid { top: 6px; }
.nav-pill-trigger-icon .bar-bottom { top: 12px; }
/* icon morphs hamburger -> X to mirror the open/closed state; purely
decorative (aria-expanded on the button itself is the real state
carried to assistive tech). Duration/collapse under
prefers-reduced-motion is handled by reset.css's global transition
collapse — no separate rule needed here. */
.nav-pill-trigger[aria-expanded="true"] .bar-top { transform: translateY(6px) rotate(45deg); }
.nav-pill-trigger[aria-expanded="true"] .bar-mid { opacity: 0; }
.nav-pill-trigger[aria-expanded="true"] .bar-bottom { transform: translateY(-6px) rotate(-45deg); }
/* Panel stays in the DOM at all times (simpler + more robust than
toggling the `hidden` attribute for an animated show/hide): closed
state uses opacity+transform for the fade, and `visibility` (delayed
on close, immediate on open) so the links are genuinely unreachable
by keyboard/AT while closed, not just invisible. JS only toggles
`.is-open` + aria-hidden/aria-expanded. */
.nav-pill-menu {
position: absolute;
top: calc(100% + var(--space-3));
right: 0;
min-width: 220px;
padding: var(--space-3);
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.nav-pill-menu.is-open {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}
/* The global prefers-reduced-motion collapse in reset.css shrinks the
opacity/transform durations to ~0ms but doesn't touch transition-
delay, so without this the closed-panel's links would stay focusable
for ~200ms after an instant-looking fade. Zeroing the delay here
keeps the toggle genuinely instant end-to-end for reduced-motion
users, per the brief's explicit requirement. */
@media (prefers-reduced-motion: reduce) {
.nav-pill-menu { transition-delay: 0s; }
}
.nav-pill-menu ul { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-pill-menu a { display: block; padding: var(--space-2) var(--space-3); }
#primary-navigation a {
position: relative;
font-family: var(--font-nav);
font-size: var(--text-nav);
font-weight: var(--weight-nav);
letter-spacing: var(--tracking-nav, normal);
text-transform: var(--case-nav, none);
}
/* hero
2026-07-21: the player carousel (rotating represented-player image)
moved into this section from its own standalone #player-carousel
block below it — see front-page.php's docblock and
design-system.md's dated addendum. `.hero-inner` is now a two-column
flex row (`.hero-media` + `.hero-content`) instead of a single
text-only column; `.hero-content` keeps the old single-column
text-width/alignment rules (`--hero-max`/`--hero-align`) unchanged.
Desktop source/visual order is media-then-content (image left, text
right — matches the old cloverockdesign `.home-bar` layout this
steer came from); `order` is flipped at the stacking breakpoint so
mobile always reads heading/copy/CTA first, image second — the
headline and CTA shouldn't sit below a ~full-width square image on a
phone.
2026-07-21 (later same day) — image sized up 1.5x per user request
(measured previous rendered width: 440px desktop). This is a genuine
sizing change, not just one bumped number — see the dated addendum
in design-system.md for the full before/after measurements and the
reasoning below in brief:
- `.hero-media`'s `flex-basis` is intentionally left at the
original 300px (not scaled) — only `max-width` (440px -> 660px,
the literal 1.5x target) and `flex-grow` (1 -> 2.4, so the media
column actually claims the freed-up space toward that cap instead
of splitting it evenly with `.hero-content`) changed. Keeping
flex-basis low keeps the *flex-wrap trigger point* (which reacts
to basis, not final grown/shrunk size) close to where it always
was, so the two-column row keeps working down to roughly the same
width margin above the stacking breakpoint as before scaling —
confirmed empirically (not by hand-calculating flexbox math) by
measuring both columns' rendered bounding boxes across a sweep of
viewport widths from 640px to 1920px before shipping this.
- `.hero-inner`'s max-width grew from the shared `--container-max`
token (1240px) to a hero-specific 1320px so the now-larger media
column has room to actually reach its new 660px cap on wide
desktop viewports instead of being squeezed by the old shared
container ceiling. This only widens the hero row itself — the
shared `--container-max` variable is untouched, so no other
section is affected.
- Stacking breakpoint raised 860px -> 900px. With the media column
now claiming more of the row, the point where the two columns can
no longer both fit (and would otherwise wrap awkwardly in their
*desktop* order, image-on-top-full-width/text-below, before the
intentional order-flip below gets a chance to kick in) moved up
from ~760px to ~810-820px. 900px keeps a comparable safety margin
above that natural wrap point to what the original 860px
breakpoint had above its ~760px natural wrap point. */
#hero {
padding: var(--space-hero, 120px) 5% var(--space-9);
text-align: var(--hero-align, left);
}
#hero .hero-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-8);
max-width: 1320px; /* hero-specific, intentionally wider than the shared --container-max (1240px) — see comment above */
margin-inline: auto;
}
#hero .hero-content {
flex: 1 1 360px;
max-width: var(--hero-max, 720px);
order: 1; /* 2026-07-21: flipped — text left, carousel right on desktop (was order 2) */
}
#hero .hero-media {
flex: 2.4 1 300px; /* grow 2.4 (was 1), shrink 1, basis 300px unchanged — see comment above */
max-width: 660px; /* was 440px — the requested 1.5x */
width: 100%;
margin-inline: auto;
order: 2; /* 2026-07-21: flipped — text left, carousel right on desktop (was order 1) */
}
#hero h1 { font-size: var(--text-hero); line-height: 1.05; margin-bottom: var(--space-5); }
#hero p { font-size: var(--text-lg); max-width: 54ch; margin-bottom: var(--space-6); }
#hero .hero-cta { display: inline-block; }
@media (max-width: 900px) {
#hero .hero-content { order: 1; }
#hero .hero-media {
order: 2;
/* Full viewport-width bleed rather than a literal 1.5x number
(380px -> 570px would be impossible to render cleanly: at a
true 375px phone width the image was already rendering at
~337.5px, constrained by #hero's 5% side padding, not by the
old 380px cap — there was no room for that cap to matter, and
570px would overflow the viewport outright. The maximum
*clean* increase available at phone widths is to bleed the
image edge-to-edge past the section's side padding, which
takes it from ~337.5px to the full device width (~375px on a
375px-wide phone) — noticeably bigger and still fully
contained, just short of a literal 1.5x on the very narrowest
viewports. See design-system.md's dated addendum. */
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* photo-grid pillar teasers (Talent / Careers) — replaces the old
#pillar-teasers two-card layout, 2026-07-22. Reverted 2026-07-22 (v3)
to distinct, uncropped photos + a separate text card, then rebuilt
2026-07-22 (v4) to bring back a glass card, then (v5) into a stacked
multi-row layout: `.photo-grid-section` is a flex column of "rows" —
currently a photo row (`.pg-photos`) and a text row (`.pg-text`),
both full width, stacked with no gap between them so the text row
reads as sitting directly between photo rows rather than floating
over one. Two more photo rows are expected once 2 more photos are
sourced (a matched pair to fill what's currently a single-column,
2-row-tall gap) — each new photo becomes its own full-width row,
same pattern as `.pg-photos`, bringing the section to 4 rows total.
`.pg-photos` is a "justified gallery" row: every photo in the row
renders at the SAME height, at its own natural (uncropped) width, so
differently-shaped photos fill the row's width exactly with zero
gap/whitespace between them (`gap: 0` — the "border spacing" the
2026-07-22 instruction asked to eliminate) — the classic photo-
gallery technique, done in pure CSS. Each `.pg-cell.pg-photo` carries
a `--ar` custom property (its own width/height ratio, computed from
attachment metadata in front-page.php) and gets `flex: var(--ar) 1
0`, so flexbox distributes each photo's share of the row width
proportional to its own ratio. The row's own height is set by
`aspect-ratio` on `.pg-photos` (also computed in front-page.php, as
the SUM of the row's photo ratios) — the one number that makes the
flex-distributed widths come out matching each photo's true ratio
rather than stretching/squashing it. Side padding on the wrap
dropped to 0 (was 3%) so photos render as large as the shared
--container-max allows. See design-system.md's 2026-07-22 addenda
for the full history. */
.photo-grid-wrap { padding: var(--space-9) 0; }
.photo-grid-section {
display: flex;
flex-direction: column;
/* Full-bleed rather than capped at --container-max (1240px): on a
wide/fullscreen monitor that cap left ~340px of empty margin on
each side (reported 2026-07-22). Capped at 2600px rather than
true unlimited 100vw growth — checked each of the 6 photos'
native upload resolution against how wide this row's flex-basis
math would render them at increasing row widths, and every photo
would still be at or under its own native pixel width up to
~2750-2870px (varies per section); 2600px stays under that on
both, so photos only ever get bigger, never softened by
upscaling past their real resolution, even on ultra-wide/high-res
displays. */
width: 100vw;
max-width: 2600px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
@media (min-width: 2600px) {
.photo-grid-section { margin-inline: auto; }
}
.pg-photos {
display: flex;
gap: 0;
}
.pg-cell.pg-photo {
flex: var(--ar, 1) 1 0;
min-width: 0;
overflow: hidden;
}
.pg-cell.pg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-4);
width: 100%;
padding: var(--space-7) 6%;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.pg-text h2 { margin: 0; font-size: var(--text-3xl); }
.pg-text p { margin: 0; font-size: var(--text-lg); max-width: 60ch; }
.pg-text a {
font-family: var(--font-nav);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--text-base);
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 200ms ease, gap 200ms ease;
}
@media (max-width: 720px) {
.photo-grid-section { max-width: 480px; }
.pg-photos { flex-direction: column; aspect-ratio: auto !important; }
.pg-cell.pg-photo { flex: none; }
.pg-cell.pg-photo img { height: auto; }
.pg-text {
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: var(--space-6) var(--space-5);
}
}
@media (prefers-reduced-motion: reduce) {
.pg-text, .pg-text a { transition-duration: 0.001ms !important; }
}
/* "What We Do" homepage overview — added 2026-07-22, sitting between
the Talent and Careers photo-grid sections. Unlike those, this is a
text/icon section, not a photo mosaic, so it stays at the sitewide
--container-max (not full-bleed) with normal side padding — a wide
grid of short text blocks doesn't benefit from edge-to-edge the way
uncropped photos do. Inspired by triplessport.com's services band
(bold color block, 3-column grid, one line-art icon per group) per
that day's reference — kept the 3-column icon-grid structure and
line-art icon style, but per approved direction: white background
(not a bold color block, to stay consistent with the rest of this
homepage) and one icon per item rather than one per column-pair.
Color/icon-tint split by pillar lives in theme-established-athletic.css. */
.what-we-do-wrap { padding: var(--space-9) 5%; }
.what-we-do-inner { max-width: var(--container-max); margin-inline: auto; }
.wwd-heading { text-align: center; font-size: var(--text-3xl); margin: 0 0 var(--space-8); }
.wwd-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-6);
row-gap: var(--space-7);
}
.wwd-item { display: flex; flex-direction: column; gap: var(--space-3); }
.wwd-icon { width: 40px; height: 40px; flex-shrink: 0; }
.wwd-item h3 { margin: 0; font-size: var(--text-xl); }
.wwd-item p { margin: 0; color: var(--color-text-muted); }
@media (max-width: 900px) {
.wwd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.wwd-grid { grid-template-columns: 1fr; }
}
/* process steps (player recruitment / careers) */
#process ol, #how-it-works ol {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
padding: var(--space-8) 5%;
}
#process li, #how-it-works li { padding: var(--space-6); }
#process h3, #how-it-works h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
/* service-card grid (Player Recruitment #process only, 2026-07-28) —
replaces the 2x2-pairs + solo-row layout, which paired steps up two at
a time and dropped any leftover (odd-numbered-out) step into its own
full-width row. All five steps now carry a photo, so that split would
leave one lone half-width row for no reason — this treats all five as
equal-weight cards in one row instead, wrapping to 2 then 1 column on
smaller screens. Higher specificity (plain classes scoped under
#process's markup) than the shared `#process ol, #how-it-works ol`
grid rule above, so it overrides cleanly without touching Careers'
#how-it-works, which keeps the 3-col grid. */
.service-cards {
/* 10% side padding, no max-width cap: the grid's content box is a
flat 80% of viewport width at any desktop size, rather than
capping out at a fixed px width and reading as a smaller fraction
of the page on wide/fullscreen monitors. */
padding: var(--space-9) 10%;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-6);
}
.service-card {
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card-media { aspect-ratio: 3 / 4; overflow: hidden; }
.service-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-card-body { padding: var(--space-6); }
.service-card-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.service-card-body p { margin: 0; font-size: var(--text-base); }
/* half-screen desktop windows (~900-1300px, e.g. two windows tiled side
by side on a 1920px+ monitor) land between the 5-column desktop grid
and the 900px mobile breakpoint below — forcing 5 columns into that
width was squeezing every card down to an oddly narrow sliver. This
tier gives that range 3 columns instead, ordered before the 900px
query so the 900px rule's 2-column override still wins at narrower
widths (same-specificity media queries cascade by source order). */
@media (max-width: 1300px) {
.service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-7) 6%; }
}
@media (max-width: 900px) {
.service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-6) 5%; }
.service-card-body { padding: var(--space-5); }
.service-card-body h3 { font-size: var(--text-lg); }
.service-card-body p { font-size: var(--text-sm); }
}
@media (max-width: 560px) {
.service-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.service-card { transition: none; }
}
/* player journey timeline (Player Recruitment #journey only, 2026-07-28) —
horizontal alternating-stage infographic. Built as a 3-row CSS Grid
(card-above / node / card-below) rather than alternating margin or
transform offsets on flex items, so the node row stays on one straight
line no matter how long any single stage's title/description runs —
a transform-offset approach would need every item the same total
height to keep nodes aligned, which real (variable-length) copy can't
guarantee. Color/background is in theme-established-athletic.css. */
.journey-intro { max-width: 1100px; margin: 0 auto; padding: var(--space-9) 5% 0; text-align: center; }
/* one line always, not var(--text-hero) directly — that clamp's 44px
floor is still wide enough to overflow a narrow phone screen once
white-space:nowrap rules out wrapping to a second line. This clamp's
lower floor (1.5rem) scales the heading down enough to stay on one
line and inside the viewport all the way down, while still reaching
the same ~84px ceiling on desktop. */
.journey-intro h2 { font-size: clamp(1.5rem, 6vw, 5.25rem); white-space: nowrap; margin-bottom: var(--space-8); }
/* no max-width cap, 10% side padding — same 80%-of-viewport formula as
.service-cards, so the infographic matches that section's footprint
instead of capping out narrower at 1400px. */
.journey-grid {
margin: 0 auto;
padding: var(--space-8) 10% 140px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: minmax(90px, auto) auto minmax(90px, auto);
column-gap: var(--space-4);
align-items: center;
}
/* .journey-grid also carries the sitewide `.reveal` class purely so
reveal.js's existing IntersectionObserver picks it up with no JS
changes — but the fade/rise itself needs to happen per-stage
(staggered), not on the grid container as a whole. This cancels the
generic `.reveal` container-level animation (layout.css, "scroll
reveal") so only the nested .journey-node/.journey-card rules below
animate once `.is-visible` lands. */
.journey-grid.reveal { opacity: 1; transform: none; transition: none; }
.journey-cell { position: relative; }
.journey-cell-node { display: flex; align-items: center; justify-content: center; padding: var(--space-3) 0; }
/* the connecting line is drawn per-cell (left/right edge to center) rather
than one absolutely-positioned full-width line, so it naturally spans
however wide the grid actually renders at any viewport, with no
separate JS/resize-driven measurement needed. */
.journey-cell-node::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
transform: translateY(-50%); z-index: 0;
}
.journey-node {
position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg);
opacity: 0; transform: translateY(36px);
transition: opacity 1400ms ease-out, transform 1400ms ease-out;
}
.journey-card { text-align: center; max-width: 210px; margin: 0 auto; opacity: 0; transform: translateY(36px); transition: opacity 1400ms ease-out, transform 1400ms ease-out; }
.journey-card h4 { font-size: var(--text-sm); letter-spacing: 0.02em; margin-bottom: var(--space-2); }
.journey-card p { font-size: var(--text-sm); margin: 0; }
/* stagger: each stage occupies 3 consecutive .journey-cell children
(card/node/empty or empty/node/card), so nth-child groups of 3 map
1:1 to stage index — same technique as the approved mockup. Delays
and the 1400ms duration above both slowed down (from 600ms/90ms
increments) so the rise reads as a slow, deliberate uptick rather
than a quick snap into place. */
.journey-grid .journey-cell:nth-child(-n+3) .journey-node,
.journey-grid .journey-cell:nth-child(-n+3) .journey-card { transition-delay: 0ms; }
.journey-grid .journey-cell:nth-child(n+4):nth-child(-n+6) .journey-node,
.journey-grid .journey-cell:nth-child(n+4):nth-child(-n+6) .journey-card { transition-delay: 200ms; }
.journey-grid .journey-cell:nth-child(n+7):nth-child(-n+9) .journey-node,
.journey-grid .journey-cell:nth-child(n+7):nth-child(-n+9) .journey-card { transition-delay: 400ms; }
.journey-grid .journey-cell:nth-child(n+10):nth-child(-n+12) .journey-node,
.journey-grid .journey-cell:nth-child(n+10):nth-child(-n+12) .journey-card { transition-delay: 600ms; }
.journey-grid .journey-cell:nth-child(n+13):nth-child(-n+15) .journey-node,
.journey-grid .journey-cell:nth-child(n+13):nth-child(-n+15) .journey-card { transition-delay: 800ms; }
.journey-grid.is-visible .journey-node,
.journey-grid.is-visible .journey-card { opacity: 1; transform: translateY(0); }
/* mobile fallback: same pattern as the homepage photo-grid / process
cards — a plain numbered list once there's no room for 5 across. */
.journey-mobile-list { display: none; max-width: 560px; margin: 0 auto; padding: var(--space-6) 5% var(--space-8); list-style: none; }
.journey-mobile-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; }
.journey-mobile-num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; }
.journey-mobile-list h4 { font-size: var(--text-sm); letter-spacing: 0.02em; margin-bottom: var(--space-2); }
.journey-mobile-list p { font-size: var(--text-sm); margin: 0; }
@media (max-width: 900px) {
.journey-grid { display: none; }
.journey-mobile-list { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.journey-node, .journey-card { transition: none; }
}
/* testimonials (Player Recruitment #testimonials only, 2026-08-04 v4
patchwork rebuild) — replaces the v3 flush-crop grid. v3 forced every
photo into a uniform 3:2 box via object-fit: cover; the user asked for
photos at their own natural dimensions instead, patchwork layout if
needed. A plain 2-column CSS Grid can't do that on its own — grid
stretches every cell in a row to match its tallest row-mate, so an
uncropped landscape photo next to an uncropped square one would still
get stretched/misaligned. This uses CSS multi-column (column-count),
the standard CSS-only masonry technique instead: two columns fill
independently top-to-bottom rather than pairing up row-by-row, so
each cell's height is exactly its own photo's natural height at that
column width — nothing stretched, nothing cropped. Still full-bleed
100vw + negative-margin (same trick used elsewhere on this page, e.g.
.intro-split) so the grid runs edge to edge of the viewport.
.testimonial-cell-text is position: absolute per corner/edge (the
--tl/--l/--b/--bl modifiers set in template-player-recruitment.php,
chosen per photo by where the player actually sits in frame) so the
quote itself sits over empty background/kit rather than a face — see
that template's comment for which placement was picked for which
photo and why. The tint itself (color) is a flat full-photo wash,
not shaped to the placement — see theme-established-athletic.css;
this file is layout only. */
.testimonial-grid {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
column-count: 2;
column-gap: 0;
}
.testimonial-cell {
position: relative;
break-inside: avoid;
overflow: hidden;
}
.testimonial-cell-bg { width: 100%; height: auto; display: block; }
.testimonial-cell-tint { position: absolute; inset: 0; }
.testimonial-cell-text { position: absolute; z-index: 1; padding: var(--space-5); }
.testimonial-cell--tl .testimonial-cell-text { top: 0; left: 0; text-align: left; max-width: 70%; }
.testimonial-cell--l .testimonial-cell-text { top: 50%; left: 0; transform: translateY(-50%); text-align: left; max-width: 55%; }
.testimonial-cell--b .testimonial-cell-text { bottom: 0; left: 0; right: 0; text-align: center; }
.testimonial-cell--bl .testimonial-cell-text { bottom: 0; left: 0; text-align: left; max-width: 70%; }
.testimonial-cell .testimonial-quote { font-style: italic; font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.testimonial-cell .testimonial-attribution { margin: 0; font-weight: 600; font-size: var(--text-base); }
.testimonial-cell .testimonial-role { display: block; font-weight: 400; font-size: var(--text-sm); }
@media (max-width: 1024px) {
/* Single column — each photo stacks full-width at its own natural
size, not shrunk down to fit a column. Breakpoint raised from
720px (2026-08-04 v5): at anything narrower than ~1024px each of
the two columns was already tight enough that the quote's fixed
padding/font-size ate up most of a shrunk photo's height — this
stacks to full width, and full-size text, sooner. */
.testimonial-grid { column-count: 1; }
}
/* Careers content, 2026-08-03 v3 — intro (bigger photo + centered,
larger text), 80vw process diagram, testimonials restructured so
the client box matches the candidate box's shape (photo-left,
photo-right, text in the middle) instead of the old
text/photo/quote three-column layout. Colors in
theme-established-athletic.css. */
/* Careers intro band (2026-08-04 v2, replacing the old stadium-photo/
white-panel .careers-intro-split) — the photo is dropped, and the
ACF intro_text (h2 + p) becomes a plain full-bleed band directly
below #careers-photo-grid, same simple-centered-paragraph pattern as
#industries-served further down this page (padding: 8rem 5%, no
width:100vw override needed — #content itself has no default side
constraint, so an unpadded/lightly-padded section is edge-to-edge by
default; #careers-photo-grid above has zero padding since its photos
should touch the edge, this section has 5% padding since its text
shouldn't — both still span the section's full edge-to-edge width as
a box either way). Color (teal on black) in
theme-established-athletic.css. */
#careers-intro { padding: 8rem 5%; }
/* Intro h2/p sized 1.3x the shared --text-2xl/--text-lg tokens
(2026-08-13, per direction — an earlier 3x pass was reverted down to
1.3x same day) — set as literal px here rather than scaling the
tokens themselves, since --text-2xl/--text-lg are reused sitewide
(About page, testimonials, CTAs; see theme-established-athletic.css)
and scaling them would resize unrelated elements. Reverts to the
unscaled tokens below 900px (see mobile override) so the enlarged
size is desktop-only. */
#careers-intro h2 { max-width: 760px; margin: 0 auto var(--space-4); text-align: center; font-size: 42px; }
#careers-intro p { max-width: 760px; margin: 0 auto; text-align: center; font-size: 25px; }
@media (max-width: 900px) {
#careers-intro h2 { font-size: var(--text-2xl); }
#careers-intro p { font-size: var(--text-lg); }
}
/* Process infographic (v5, "simple tabs") — replaces the diamond
("Bold Flow") entirely: a plain horizontal row of numbered circles
connected by one thin line, no absolute-percentage geometry, no
glass/glow/gradient. Click-to-switch between Client and Candidate
panels (assets/js/careers-process-tabs.js) rather than two stacked
diagrams. Row is a fixed 80vw (2026-08-03) rather than a
percentage-of-column width, per direction. */
.diamond-intro { max-width: 1100px; margin: 0 auto; padding: var(--space-9) 5% var(--space-6); text-align: center; }
/* nowrap (2026-08-03) so "How We Work" stays on one line at the doubled
size above; the lower clamp floor (was 4rem) keeps it fitting on
narrow phones instead of overflowing since it can no longer wrap. */
.diamond-intro h2 { font-size: clamp(2.5rem, 8vw, 9rem); white-space: nowrap; }
.hw-tabs { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-7); }
.hw-tab { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm); padding: var(--space-3) var(--space-6); border-radius: 999px; background: none; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.hw-panel { display: none; }
.hw-panel.is-active { display: block; }
.hw-line { width: 80vw; margin: 0 auto; padding: 0 0 var(--space-9); display: flex; gap: var(--space-7); }
.hw-step { position: relative; flex: 1 1 0; text-align: center; }
.hw-step:not(:last-child)::after { content: ""; position: absolute; top: 48px; left: 60%; width: 90%; height: 4px; z-index: 0; }
.hw-node { position: relative; z-index: 1; width: 96px; height: 96px; margin: 0 auto var(--space-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; }
.hw-step h3 { font-size: 2rem; margin-bottom: var(--space-2); }
.hw-step p { font-size: 1.75rem; margin: 0; }
@media (max-width: 800px) {
.hw-line { flex-direction: column; gap: var(--space-6); padding: 0 0 var(--space-8); }
.hw-step:not(:last-child)::after { display: none; }
/* Mobile audit fix (2026-09-02): .hw-node/.hw-step h3/.hw-step p were
never scaled down for mobile — left at their desktop "doubled size"
(96px node, 2rem/1.75rem text), stacked full-width per step once
.hw-line goes to a single column above. That's 2-4x the size of
every comparable step component elsewhere on the site (e.g.
.cs-timeline-node is 44px, .cs-timeline-step h4/p use
var(--text-lg)/var(--text-sm)) — scaled down to match that same
convention here. */
.hw-node { width: 64px; height: 64px; font-size: var(--text-xl); }
.hw-step h3 { font-size: var(--text-lg); }
.hw-step p { font-size: var(--text-sm); }
}
/* Case study (2026-08-13, ground-up rewrite — see template-careers.php
for why this isn't just a restore of the earlier version). Original
generous padding. This originally shipped with a diagonal
corner-stripe accent (.cs-corner-stripes, position: relative +
overflow: hidden on the section to contain it) — removed same day
per direction; CSS dropped alongside the markup rather than left
dead. */
#career-case-study { padding: var(--space-9) 5% var(--space-8); }
.cs-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); align-items: start; max-width: 1300px; margin: 0 auto; }
.cs-eyebrow { margin-bottom: var(--space-5); }
.cs-tag { display: inline-block; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); font-weight: 700; padding: var(--space-2) var(--space-4); border-radius: 999px; margin-bottom: var(--space-5); }
.cs-tag-role { display: inline-block; background: none; padding: 0; margin-left: var(--space-3); border-radius: 0; }
.cs-text h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-6); }
.cs-label { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-2); }
.cs-text > p { margin: 0 0 var(--space-2); }
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.cs-stat { border-top: 3px solid; padding: var(--space-4) var(--space-3) 0; }
.cs-stat-num { display: block; font-size: var(--text-2xl); font-weight: 700; }
.cs-stat-label { display: block; font-size: var(--text-sm); }
.cs-photo { align-self: stretch; }
.cs-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 4px; display: block; }
.cs-timeline { max-width: 1300px; margin: var(--space-9) auto 0; padding-top: var(--space-7); border-top: 1px solid rgba(255,255,255,0.15); }
.cs-timeline-title { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.cs-timeline-row { display: flex; gap: var(--space-6); position: relative; }
.cs-timeline-row::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; background: rgba(255,255,255,0.2); z-index: 0; }
.cs-timeline-step { flex: 1 1 0; position: relative; }
.cs-timeline-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: var(--space-3); }
.cs-timeline-step h4 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.cs-timeline-step p { font-size: var(--text-sm); margin: 0; }
@media (max-width: 900px) {
.cs-inner { grid-template-columns: 1fr; }
.cs-photo img { min-height: 240px; }
.cs-timeline-row { flex-direction: column; gap: var(--space-5); }
.cs-timeline-row::before { display: none; }
}
/* Testimonials (2026-08-04 v8 — brochure-faithful rebuild, replacing
v5/v6/v7). Photo-left/text-right for BOTH cards now (matching the
brochure — v7 mirrored the candidate box to photo-right, which the
brochure doesn't actually do). .ct-box-case (a class the markup
never used — it was always ct-box-client — meant this rule silently
never applied) is gone along with it. */
#careers-testimonials { padding: var(--space-9) 0; }
.ct-heading, .ct-subtext { text-align: center; }
.ct-eyebrow { justify-content: center; }
.ct-heading { max-width: 760px; margin: 0 auto var(--space-4); font-size: var(--text-3xl); }
.ct-subtext { max-width: 640px; margin: 0 auto var(--space-8); font-size: var(--text-lg); }
.ct-box { width: 80vw; margin: 0 auto var(--space-7); padding: var(--space-8); border-radius: 6px; box-sizing: border-box; border-top: 4px solid; }
.ct-box-client, .ct-box-candidate { display: grid; grid-template-columns: 1fr 2.5fr; gap: var(--space-7); align-items: stretch; }
.ct-box-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.ct-logo { height: 22px; width: auto; display: block; }
.ct-kind { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); font-weight: 700; }
.ct-quote { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.ct-name { font-weight: 600; margin: 0; }
.ct-role { margin: 0; font-size: var(--text-sm); }
.ct-photo { min-height: 260px; }
.ct-photo img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; display: block; }
@media (max-width: 900px) {
.ct-box-client, .ct-box-candidate { grid-template-columns: 1fr; }
.ct-box { width: auto; padding: var(--space-6) 5%; }
.ct-photo { min-height: 200px; }
}
/* industries served — list replaced with a single paragraph (v2,
2026-07-28); industries_served ACF data itself is untouched, just no
longer rendered, so the old ul/li rules above are gone with it.
Padding doubled to 8rem (2026-08-03), then cut back to var(--space-8)
(2026-08-13, buffer reduction against #careers-testimonials above
and #enquiry-cta below, per direction); text stays centered,
unchanged. */
#industries-served { padding: var(--space-8) 5%; }
#industries-served p { max-width: 760px; margin: 0 auto; text-align: center; font-size: var(--text-lg); }
/* buttons (shared geometry, themed skin) */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
font-family: var(--font-nav);
font-size: var(--text-sm);
font-weight: var(--weight-nav);
letter-spacing: var(--tracking-nav, normal);
text-transform: var(--case-nav, none);
transition: transform 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.btn:hover { transform: translateY(-2px); }
/* cards */
.card {
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover { transform: translateY(-4px); }
/* scroll reveal */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* footer (structure only — always dark-toned per brand, skinned per
theme). 2026-07-23: the small logo lockup (#site-branding) was
replaced site-wide with a banner band — see the comment in
footer.php. Rebuilt 2026-07-23 (v2) from a flat stretched image
(which hit a resolution ceiling on wide/high-DPI screens) into real
markup: logo + live text + a CSS-drawn stripe graphic, full-bleed
edge to edge (same 100vw technique used elsewhere in this theme)
since it's a wide/short brand band, not body content; everything
below it (#footer-body) keeps the standard side padding. Height is
intrinsic to its content/padding now rather than a fixed image
aspect-ratio — deliberately not forcing the old 4:1 image shape,
which would have been very tall on wide screens for content this
short.
2026-07-23 (v3): `.footer-stripes` ran the full height of
`#site-footer` (was confined to `.footer-banner`'s own height) —
#footer-body/#footer-legal get the same right-side clearance as
.footer-banner so nav/address/contact/legal text can't run under the
stripe graphic even though it's back to banner-only height as of v5
below (kept — cheap insurance, costs nothing if the stripe is short).
2026-07-23 (v5): `.footer-stripes` moved back inside `.footer-banner`
(see footer.php v5 note) so the diagonal graphic ends at the bottom
of the banner band instead of running/bleeding past the full footer.
Also: sticky footer. `body` is now a column flexbox with
`min-height: 100vh` and `#site-footer` gets `margin-top: auto`, so on
short-content pages the footer's own black background is pushed all
the way to the bottom of the viewport instead of ending wherever the
page content stops (leaving a gap of the page's background color
below it). This relies on the theme's actual DOM shape — header,
page content, and footer are all direct children of (no
wrapping div) — so they're all flex items and `margin-top: auto` on
the last one pushes it down correctly.
2026-07-23 (v6): `.footer-stripes` moved back out to be a direct
child of `#site-footer` (see footer.php v6 note) and re-anchored to
the bottom-right corner instead of the top-right/banner. It's now a
small fixed-ish corner box (own width/height, not tied to the
banner's height) sized independently of the rest of the footer.
2026-07-23 (v7): per a full mock-up, back to spanning the full
height of #site-footer (top:0/bottom:0 rather than a fixed corner
box) — the well-known exception in the CSS spec where top:0/bottom:0
resolves to 100% even against an auto-height ancestor, same approach
used pre-v6, just without the v4 scaleY(1.3) bleed (this time it
should end flush at the footer's own bottom edge, not bleed past
it).
2026-07-27 (v11): stripe graphic removed entirely (see footer.php
v11 note). `.footer-banner`'s logo+copy block is now centered as a
unit (justify-content: center) with plain symmetric 5% side padding,
instead of the asymmetric padding that used to reserve clearance on
the right for the stripe. */
#site-footer { position: relative; padding: 0 0 var(--space-6); margin-top: auto; }
.footer-banner-link {
display: block;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* 2026-07-27 (v12): stacked column instead of a centered row — the row
version centered the logo+copy group as a unit, but the logo image
itself wasn't at the true horizontal center (the wider copy block
beside it pushed it left). Stacking puts the logo, then the
headline/pillars below it, each independently centered. */
/* Banner shrunk (2026-08-23), then sized back up (v3, same day, per
direction) — the shrink pass made the whole footer shorter overall,
but flattened the banner (logo/headline/pillars) down to nearly the
same visual weight as the small contact/legal text below it. Banner
is grown again here specifically to emphasize it over that bottom
text; the bottom section (#footer-info/#footer-legal) stays at its
already-tightened size, so the height savings from the shrink pass
mostly hold even though the banner itself is bigger again. */
.footer-banner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
padding: var(--space-6) 5%;
}
.footer-banner-logo { display: block; height: 72px; width: auto; flex-shrink: 0; }
.footer-banner-copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 0; }
.footer-banner-headline {
margin: 0;
font-family: var(--font-heading);
text-transform: none;
font-weight: 700;
font-size: var(--text-3xl);
letter-spacing: -0.01em;
}
/* 2026-07-27 (v13): pillars switched from a flex row to a 3-track grid
(pillar | divider | pillar) with the two pillar tracks forced to equal
width (1fr each). Previously the whole group was centered as one box,
but "Reliance Talent" is narrower text than "Reliance Careers", so the
divider between them (which sits at the boundary of the two pillars'
own content width, not the box's midpoint) landed ~33px left of true
center. Equal-width tracks put the divider exactly at center,
regardless of each side's text length. */
.footer-banner-pillars {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-5);
width: 100%;
max-width: 720px;
margin-inline: auto;
}
.footer-banner-pillar { display: flex; flex-direction: column; gap: 4px; }
.fbp-label {
font-family: var(--font-nav);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--text-sm);
font-weight: 700;
}
.fbp-desc { font-size: var(--text-base); }
.footer-banner-divider { width: 1px; align-self: stretch; }
@media (max-width: 720px) {
.footer-banner { gap: var(--space-3); padding: var(--space-5) 5%; }
.footer-banner-logo { height: 52px; }
.footer-banner-headline { font-size: var(--text-2xl); }
.footer-banner-pillars { grid-template-columns: 1fr; max-width: none; gap: var(--space-3); }
.footer-banner-divider { display: none; }
}
/* bottom section (2026-08-23, replaces the 2026-07-27 v12/v13
3-column grid — info-left/nav-center/legal-right on desktop,
reshuffled to a left-aligned stacked column with its own
mobile-only margins on narrow screens). That grid + its mobile
override is gone: one centered flex column now, same structure at
every viewport, no reshuffle needed — shorter (tight var(--space-3)
gaps instead of var(--space-6)/var(--space-8) grid gaps + mobile
margins stacking on top of each other) and reads as one unified
centered block per direction ("more centralized"). */
#footer-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-6) 5% var(--space-5);
}
#footer-navigation ul { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
/* #footer-info's children (#footer-contact-details, #footer-social,
#footer-text) used to each be a separate stacked block with
var(--space-6) margin-bottom; #footer-address was a third stacked
block, removed entirely 2026-08-23 (v2, per direction — see
footer.php). Now a centered column of short, independently-centered
rows instead of trying to keep everything on one continuous inline
line — that inline-row approach (a #footer-info > * + *::before dot
separator between children) didn't line up correctly once
#footer-social wrapped onto its own line on mobile: the dot rode
along with the wrapped element's own box, landing at the start of
the new line rather than "between" the two rows. Two centered rows
with a plain gap is simpler and can't misalign the same way. */
#footer-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
#footer-legal { text-align: center; font-size: var(--text-xs); opacity: 0.7; }
/* Whatever section happens to be last before the footer (varies by
page — homepage ends in .photo-grid-wrap, other pages in .team-grid,
#cta, etc.) shouldn't carry its usual bottom breathing room into the
footer — the footer is its own visually distinct block and should
butt directly against it, on every page, not just the homepage. */
#content > *:last-child { padding-bottom: 0; }
/* contact form */
form {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 560px;
padding: var(--space-8) 5%;
}
form label { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); display: block; }
/* "How can we help?" label (Contact form, 2026-09-12) — styled as an
uppercase "eyebrow"-style label (same text-transform/letter-spacing
treatment used elsewhere on the site, e.g. .eyebrow-label,
#about-experience h4) to set it apart from the plain Name/Email/
Message labels above it, since it now introduces the grouped
enquiry-type dropdown rather than a single plain field. Source copy
in template-contact.php stays normal sentence case ("How can we
help?") — this is the only thing making it render in caps. */
form label.enquiry-label { text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-nav); }
form input,
form select,
form textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
form textarea { min-height: 140px; resize: vertical; }
/* 2026-08-04: more breathing room above the submit button — it was
sitting right against the message textarea (space-4 flex gap +
space-2 margin only). */
form button[type="submit"] { align-self: flex-start; margin-top: var(--space-7); }
[role="status"], [role="alert"] { margin: var(--space-4) 5%; padding: var(--space-4); font-size: var(--text-sm); }
/* Contact page photo (2026-08-04) — form/intro on the left, photo on
the right. Both children keep their own existing 5% side padding
(now relative to their narrower column), so no extra padding is
added on the grid container itself. */
#contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.contact-split-media { padding: var(--space-8) 5% var(--space-8) 0; }
.contact-split-media img { width: 100%; height: auto; border-radius: 6px; display: block; }
@media (max-width: 900px) {
#contact-split { grid-template-columns: 1fr; }
.contact-split-media { padding: 0 5% var(--space-8); }
}
@media (max-width: 860px) {
#process ol, #how-it-works ol { grid-template-columns: 1fr; }
}
/* Office map (2026-08-04) — the iframe otherwise renders at the
browser's bare default replaced-element size (~300x150px) since it
carries no width/height of its own; it needs to fill #contact-map,
whose height is set by contact-map-size.js (2x #contact-split's
rendered height) and whose width is fixed here at 92%, centered with
a 4% margin either side, per direction (not full-bleed). */
#contact-map { width: 92%; margin: 0 auto; }
#contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ==========================================================================
Additions below — extending the same structural system to every other
template (About, Home Instagram placeholder, Contact, 404, footer
contact/social) so the whole site shares one design system, not just
the hero shown in the original preview screenshot.
========================================================================== */
/* site branding (full wordmark lockup, header only — the footer used
to share this same lockup until 2026-07-23, when it was replaced
there by the full banner graphic; see footer.php). The .brand-name
text span was removed 2026-07-21 when the R-mark-only icon was
swapped for the full "Reliance Sports Group" wordmark lockup, so no
rules are needed for it any more. */
#site-branding .brand-link { display: inline-flex; align-items: center; gap: var(--space-3); }
#site-branding .site-logo { height: var(--logo-height, 40px); width: auto; }
/* generic long-form content (ACF wysiwyg output / page.php content) */
.prose { padding: var(--space-8) 5%; max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); }
.prose strong { font-weight: 600; }
/* intro text/photo split (Player Recruitment #intro, 2026-07-27) — copy in
the left column, a client-supplied photo in the right. .intro-split-text
reuses .prose for typography but resets its standalone box model
(padding/max-width/centering) so it can sit in a grid column instead of
spanning the full section, same pattern as .team-member .prose.
2026-07-27 v2: photo column widened to a 1:2 ratio (fills ~2/3 of the
section) per client feedback — was an even 1:1 split.
2026-07-27 v3: section made full-bleed with a gutter on the LEFT only
(photo runs flush to the true right edge) — keeping the same 1:2 ratio
but against a wider (100vw vs. the old ~1200px container) total width
grows BOTH columns in absolute size, and moves the text's left edge
closer to the true viewport edge ("shift text further left") as a side
effect of dropping the container's own outer margin. `align-items`
changed center -> stretch, and the photo's fixed aspect-ratio was
removed in favor of height:100% + object-fit:cover, so the photo now
fills the exact height of the text column next to it instead of being
sized by its own intrinsic aspect ratio. */
.intro-split {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: stretch;
/* 2026-07-27 v4: column-gap removed (was var(--space-8)) — client
wants text and photo touching directly, matching the same
eliminated-gap treatment as .process-grid-row. A little breathing
room is kept via .intro-split-text's own right padding below,
rather than a gap between the grid columns. */
column-gap: 0;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: var(--space-8) 0 var(--space-8) 5%;
}
.intro-split-text.prose { padding: 0 var(--space-6) 0 0; max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
/* bigger intro copy, heading kept at exactly 2:1 over the body text —
.prose's sitewide defaults (h2: var(--text-2xl)=32px, p: inherits
body's 16px base) already happen to sit at that same 2:1 ratio; this
scales both up 50% rather than picking arbitrary new sizes, so the
relationship holds exactly (48px : 24px). */
.intro-split-text.prose h2 { font-size: 3rem; }
.intro-split-text.prose p { font-size: 1.5rem; }
.intro-split-media img {
display: block;
width: 100%;
/* capped at the source photo's native width (1100x762, per its own
width/height attributes in the markup) — on a wide desktop/fullscreen
viewport the 2fr column comfortably exceeds 1100px, which was
upscaling the image past its actual resolution and softening it.
margin-inline: auto centers the now-narrower image within its
column instead of leaving it flush against either edge, so it no
longer butts directly against the text column on the left either. */
max-width: 1100px;
margin-inline: auto;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.intro-split {
grid-template-columns: 1fr;
row-gap: var(--space-6);
width: auto;
margin-left: 0;
margin-right: 0;
padding: var(--space-8) 5%;
}
.intro-split-media img { height: auto; aspect-ratio: 1100 / 762; }
}
/* page title — non-Home templates render the H1 directly from the_title() */
.page-title { padding: var(--space-8) 5% 0; font-size: var(--text-3xl); }
.page-title + .prose { padding-top: var(--space-5); }
/* team members (About) */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); padding: var(--space-8) 5% var(--space-9); }
.team-member { padding: var(--space-6); text-align: left; }
.team-member img, .team-photo-placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: var(--space-4); }
.team-photo-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-2xl); }
.team-member h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.team-member .role { font-size: var(--text-sm); }
/* team bio — reuses .prose typography (page.php / #intro) for the
`bio` WYSIWYG sub-field added by site-architect, with box-model
(padding/max-width/centering) reset for use inside a .team-member
card instead of a full-width section. Wrapper only renders in
template-about.php when the sub-field has content, so there's no
empty box while bios are still being written. */
.team-member .prose { padding: 0; max-width: none; margin: 0; }
.team-bio.prose { margin-top: var(--space-3); font-size: var(--text-sm); }
.team-bio.prose p:last-child { margin-bottom: 0; }
/* Player carousel (Home) — one large represented-player action photo
visible at a time, auto-rotating via a CSS opacity crossfade (no JS
animation library).
2026-07-21: relocated from its own standalone #player-carousel
section into `.hero-media` inside `#hero` (see the "hero" block
above), and all card framing (white surface, green left border,
shadow, padding around the image) was removed at the same time —
this is now just the raw image sized to `.hero-media`'s column. The
crossfade mechanic itself is unchanged from the 2026-07-21 rebuild
documented in design-system.md: every `.player-carousel-slide` sits
absolutely-positioned over the same `inset:0` box (see the 2026-09-02
fix below), so they stack directly on top of one another and the
stage's size (set by the `aspect-ratio` below) never depends on
which slide is current — no layout jump between crossfades. This
used to be done with CSS Grid (`grid-area:1/1`) instead — see that
fix's comment for why it was replaced. `assets/js/player-carousel.js`
toggles `.is-active` (opacity 1, on top, clickable) on exactly one
slide at a time; every other slide is `opacity: 0` and
`pointer-events: none` so it can't intercept hover/focus meant for
the visible slide. The single-image branch in front-page.php reuses
this same stage/slide markup with one `.is-active` slide and no JS
attached (no `data-player-carousel`), so it just renders as a
static image with zero extra CSS. */
.player-carousel-viewport { max-width: 100%; margin-inline: auto; }
.player-carousel-stage {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
/* Real fix (2026-09-02, v2 — supersedes the same-day img-only fix
below the previous comment, which didn't resolve it): the actual
root cause wasn't the ![]()
's own sizing, it was this element.
`.player-carousel-slide` used to be positioned via CSS Grid
(`display:grid` on the stage, `grid-area:1/1` on every slide) so
all 5 stacked directly on top of one another. That relies on the
stage's single IMPLICIT grid track stretching to fill the
aspect-ratio'd square — which isn't reliable: implicit auto-sized
grid tracks are fundamentally a content-sizing mechanism, and
whether one stretches to fill a definite-but-implicit container
height is exactly the kind of edge case that goes wrong in
practice. When it does, the slide (and the image inside it) ends up
sized to the photo's own natural (portrait, taller-than-square)
proportions instead of the square stage, and `overflow:hidden`
clips the excess off the bottom — cropped feet, no visible
letterboxing on the sides (confirmed from a live screenshot: full-
width photo, cut off mid-boot, not centered/letterboxed like a
correctly-`contain`-fitted square would show).
Replaced with plain absolute positioning instead: `position:
absolute; inset:0` sizes each slide against the stage's own box
directly, with no grid-track layer in between to get wrong. */
.player-carousel-stage .player-carousel-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 1;
pointer-events: none;
transition: opacity 800ms ease;
}
.player-carousel-stage .player-carousel-slide.is-active {
opacity: 1;
z-index: 2;
pointer-events: auto;
}
.player-carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.player-carousel-empty { padding: 0; }
@media (prefers-reduced-motion: reduce) {
/* Belt-and-braces: player-carousel.js already checks
prefers-reduced-motion itself and never starts the timer, so this
never actually plays; kept so a static single-slide render (no JS
at all, e.g. JS disabled) never shows a mid-transition opacity
state either. */
.player-carousel-stage .player-carousel-slide { transition: none; }
}
/* CTA sections (Player Recruitment / Careers, below the process steps).
2026-07-27: centered the button and gave it generous space top and
bottom so it doesn't feel squished against the ladder/process-steps
above it. The bottom-padding override needs `#content > #cta:last-child`
(id+id+pseudo-class) specifically, because both #cta and #enquiry-cta
are the last element in #content on their respective pages, and the
sitewide `#content > *:last-child { padding-bottom: 0; }` rule (see
"Whatever section happens to be last before the footer" comment above)
otherwise wins on specificity and zeroes it back out. */
#cta, #enquiry-cta {
display: flex;
justify-content: center;
padding: var(--space-9) 5%;
}
#content > #cta:last-child, #content > #enquiry-cta:last-child { padding-bottom: var(--space-9); }
/* #enquiry-cta's 16rem-padding oversize (2026-08-03, dropped
2026-08-13) is gone — it existed to give its longer, more muted
gradient (theme-established-athletic.css) room to breathe while it
sat directly against #careers-testimonials. Order swapped back
2026-08-13 (#industries-served now before #enquiry-cta, which is
last-child again per direction — buffer cut down against both
#careers-testimonials and the footer), so #enquiry-cta now just
uses the shared #cta/#enquiry-cta base padding above and the
:last-child restore above already covers its footer-side padding
automatically now that it's last again — no page-specific override
needed. #industries-served's own padding is cut from 8rem to
var(--space-8) for the same reason (see its rule above). */
/* bigger button just for these two CTAs — not a global .btn-primary
change, which would also affect the 404 page and homepage hero CTA */
#cta .btn, #enquiry-cta .btn { padding: var(--space-5) var(--space-8); font-size: var(--text-base); }
/* contact page intro (hardcoded copy — no ACF field exists yet, see
design-system.md for the flag) */
#contact-intro { padding: var(--space-8) 5% 0; }
#contact-intro h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
#contact-intro p { max-width: 60ch; }
/* 404 */
#error-404 { padding: var(--space-9) 5%; text-align: center; }
#error-404 .page-title { padding: 0; }
#error-404 p { margin: var(--space-4) auto 0; max-width: 48ch; }
#error-404 .btn { margin-top: var(--space-6); }
/* footer contact details + social links — inline now (2026-08-23, was
stacked full-width blocks with var(--space-6) margin-bottom each).
Phone/email get their own dot separator since they're two plain
tags with no other visual grouping; social links stay plain-gapped
(no dots) since the link list itself already reads as a distinct
cluster. justify-content: center added to both (v2, 2026-08-23) —
missing on the first pass, so on narrow screens where phone/email
wrapped onto two lines, each line fell back to flex's default
flex-start and read as left-aligned inside an otherwise-centered
footer. */
#footer-contact-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; font-size: var(--text-sm); }
#footer-contact-details p + p::before { content: "\2022"; margin: 0 var(--space-3); opacity: 0.4; }
#footer-social ul { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 700px) {
/* #site-header already has flex-wrap: wrap as its base rule (see
above) so it naturally drops to logo-on-row-1 / actions-on-row-2
once the doubled logo + pill + icons no longer fit on one line
(~600-660px is where that stops fitting at 1400px-proportions;
700px leaves headroom). margin-left: auto pushes the wrapped
#header-actions to the row's right edge — without it, a lone
flex item on a wrapped line falls back to flex-start under
justify-content: space-between. The old
`#primary-navigation ul { flex-wrap: wrap }` rule targeted the
previous always-inline 5-link nav and no longer applies now that
the links live inside the fixed-width dropdown panel. */
#header-actions { margin-left: auto; }
.team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.team-grid { grid-template-columns: 1fr; }
}
/* Careers photo grid (2026-08-03 v3, moved from the About page and
renamed 2026-08-04 — was #about-photo-grid/.about-photo) — the
6-photo grid from brochure page 1's cover, now sitting directly
below the Careers page's giant-logo header instead of above the
About page's founder-bio content. Colors in
theme-established-athletic.css (none currently — photos only, no
text). */
#careers-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
#careers-photo-grid .careers-photo { aspect-ratio: 787 / 1043; overflow: hidden; }
#careers-photo-grid .careers-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* #about-intro is the full-bleed background element (2026-08-04) —
max-width/centering used to live here directly, which capped the
black background at 1300px instead of letting it bleed
edge-to-edge. Content width/centering used to live on a shared
.about-intro-grid wrapper (history-left/focus-right 2-column split);
that wrapper is gone (2026-08-13 ground-up restructure, per
direction) — .about-history and .about-intro-focus are now two
independently full-width stacked rows, each carrying its own
max-width/centering below, rather than grid siblings sharing one. */
#about-intro { padding: var(--space-9) 0; }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); font-family: var(--font-nav); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.eyebrow-line { width: 32px; height: 2px; }
#about-intro h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 var(--space-6); }
.about-intro-text p { font-size: var(--text-lg); line-height: 1.7; margin: 0 0 var(--space-6); }
.about-intro-text p:last-child { margin-bottom: 0; }
.about-intro-photo img { width: 100%; height: auto; border-radius: 6px; display: block; }
.about-photo-name { margin: var(--space-4) 0 0; font-weight: 600; }
.about-photo-role { margin: 0; font-size: var(--text-sm); }
/* History row (2026-08-13, was a 2x2 box-array: header top-left, his
photo top-right, two body paragraphs bottom-left/bottom-right).
Now a plain 2-column horizontal split instead — bio text (header +
both paragraphs) on the left, his photo on the right, sized
noticeably bigger (620px cap, was 460px) now that this row isn't
sharing width with a sibling Talent/Careers column any more. */
.about-history { max-width: 1300px; margin: 0 auto; padding: 0 5%; }
.about-history-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-8);
align-items: center;
}
.about-intro-photo { max-width: 620px; margin-left: auto; }
@media (max-width: 900px) {
.about-history-grid { grid-template-columns: 1fr; }
.about-intro-photo { margin-left: 0; max-width: 420px; }
}
/* Talent/Careers row (2026-08-13, was a single column with the two
blocks stacked vertically, joined by a connector graphic — line +
dot, .about-focus-divider/.afd-*, removed alongside this rewrite
rather than left dead). Now two independent frosted-glass cards
side by side: same technique as the homepage's .pg-text pillar
teasers (backdrop-filter blur + a translucent tint of each
sub-brand's own accent color) — see that rule for the fuller
reasoning. Colors in theme-established-athletic.css. */
.about-intro-focus {
/* Widened from a 1300px-capped, 5%-padded row to a flat 90% of the
viewport (2026-08-13, per direction) — on wide desktop viewports
the old cap left the two cards noticeably narrower than the rest
of the page's content width. (A same-day square-cards/70%-width
detour was tried and reverted — back to rectangular cards at
90%, per direction.) */
width: 90%;
margin: var(--space-9) auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
/* Gap between the two cards: var(--space-6) (32px) -> var(--space-8)
(64px) -> var(--space-9) (96px), both same day, per direction. */
gap: var(--space-9);
}
.about-focus-block {
/* A same-day square-card detour (aspect-ratio: 1/1 + flex
centering) was tried and reverted — back to a plain rectangular
card sized by its own content/padding, per direction. */
padding: var(--space-7) var(--space-6);
border-radius: 12px;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.about-focus-block h3 { font-family: var(--font-heading); font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.about-focus-block p { font-size: var(--text-lg); line-height: 1.7; margin: 0; }
@media (max-width: 900px) {
.about-intro-focus { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* No photo mosaic sits behind these cards (unlike .pg-text on the
homepage), but blur is still expensive to paint on mobile GPUs
for no real visual gain over a flat black background at this
size — same call layout.css makes for .pg-text at this
breakpoint. */
.about-focus-block { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#about-experience { padding: var(--space-8) 5%; text-align: center; }
#about-experience h4 { font-family: var(--font-nav); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-6); }
#about-experience img { max-width: 1100px; width: 100%; height: auto; margin: 0 auto; display: block; }
#about-trust { padding: var(--space-8) 5% var(--space-9); }
#about-trust h4 { font-family: var(--font-nav); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 auto var(--space-6); max-width: 900px; }
.about-trust-list { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); list-style: none; padding: 0; }
.about-trust-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; font-size: var(--text-lg); font-weight: 600; border-top: 1px solid rgba(255,255,255,0.12); }
.trust-dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 2px; }
@media (max-width: 900px) {
.about-trust-list { grid-template-columns: 1fr; }
#careers-photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
#careers-photo-grid { grid-template-columns: 1fr; }
}