/* ============================================================ EDGE PERSONAL TRAINING — Charlotte, NC Design system: "The Edge" — diagonal cliff-line motif Cyan #00C8FB on deep navy, Saira Condensed display, Public Sans body + labels ============================================================ */ /* Both faces are self-hosted latin-subset woff2, preloaded from , font-display: block — nothing ever paints in a fallback. The display cut is a static Saira Condensed weight (OFL) at wght=800, declared with a full weight range so every font-weight in this sheet maps to that one file, the same way a variable-font display face would. The body cut is a true variable font (wght 100–900) in a single file, so every body weight in the sheet — including the 600 used for label/kicker text — comes from that one source with no extra request. The hero headline is sized to fill its column to within a couple of percent, and the fallback (Arial Narrow) is wide enough that a headline set in it wraps — so any moment spent rendering in the fallback is a visible reflow; same-origin + preload + block closes that window. */ @font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 100 900; /* tok-ok: @font-face variable-weight range, not a type decision */ font-display: block; src: url(../assets/fonts/saira-condensed-latin-800.woff2) format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; /* tok-ok: @font-face variable-weight range, not a type decision */ font-display: block; src: url(../assets/fonts/public-sans-latin-variable.woff2) format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 400; /* tok-ok: @font-face face descriptor for the italic file */ font-display: block; src: url(../assets/fonts/public-sans-latin-italic.woff2) format('woff2'); } :root { --cyan: #00C8FB; --cyan-deep: #00A8D6; --ink: #06283D; /* deep navy — primary dark */ --ink-2: #041B2B; /* darker navy — fronts/shadows */ --slate: #273444; --ice: #DFF6FF; --paper: #F4F8FB; --white: #ffffff; --muted: #5B7285; --muted-light: rgba(255, 255, 255, 0.65); --font-display: "Saira Condensed", "Arial Narrow", sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --font-label: "Public Sans", system-ui, sans-serif; --ease-edge: cubic-bezier(0.76, 0, 0.24, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --navy: var(--ink); /* alias used by the de-AI variant rules */ /* Radius roles (2026-08-22 de-AI pass): sharp cards, slightly softer controls, rounder media crops. These are brand/system decisions, so per the token contract they live here in styles.css, not in tokens.css. */ --radius-card: 2px; --radius-ctrl: 3px; --radius-media: 6px; --nav-h: 76px; --edge-cut: 4vw; /* the diagonal section cut */ /* --gutter now lives in tokens.css with one literal per breakpoint */ } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x: clip (not hidden) because the tilted .marquee bleeds ~9px past each edge by design. `hidden` on body propagates to the viewport and leaves body itself unclipped, so iOS Safari still pans sideways. `clip` actually clips and, unlike `hidden`, creates no scroll container, so the .pillars__card sticky stack keeps working. */ html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--t-body-base-size); color: var(--ink); background: var(--paper); line-height: var(--t-body-leading); overflow-x: clip; -webkit-font-smoothing: antialiased; } body.is-locked { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } em { font-style: normal; color: var(--cyan); } ::selection { background: var(--cyan); color: var(--ink-2); } /* Paragraph rag: avoid short last lines / orphans. Purely a line-breaking hint — no reflow risk, and browsers without support just ignore it. Headings use text-wrap: balance instead (see .page-hero__title). */ p { text-wrap: pretty; } h1, h2, h3, .btn { font-family: var(--font-display); font-weight: var(--t-weight-400); letter-spacing: var(--t-h1-tracking); line-height: var(--t-h1-leading); text-transform: var(--t-h1-case); } /* ---------- Buttons ---------- */ /* Wireframe at rest → diagonal wipe FILLS it with cyan on hover. Never wipes colour away: every button starts outlined, ends filled. */ .btn { display: inline-block; font-size: var(--t-btn-size); letter-spacing: var(--t-btn-tracking); padding: 0.8em 1.9em 0.7em; border-radius: var(--radius-ctrl); position: relative; overflow: hidden; isolation: isolate; /* keep the wipe behind the label, never over it */ background: transparent; border: 1px solid currentColor; transition: color 350ms var(--ease-edge), border-color 350ms var(--ease-edge), transform 300ms var(--ease-out); will-change: transform; } .btn::before { /* diagonal wipe fill — parked fully off-canvas so no sliver shows at rest */ content: ""; position: absolute; inset: -1px -20%; /* wider than the button so the skewed edges still cover it fully */ background: var(--cyan); transform: translateX(-160%) skewX(-12deg); transition: transform 450ms var(--ease-edge); z-index: -1; } .btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(-12deg); } .btn--cyan { color: var(--cyan); border-color: var(--cyan); } .btn--cyan:hover, .btn--cyan:focus-visible { color: var(--ink-2); } .btn--big { font-size: var(--t-btn-big-size); padding: 0.9em 2.2em 0.7em; } .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.35); } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink-2); border-color: var(--cyan); } /* ---------- Section heads ---------- Matt 2026-08-30: every band opens with --s-section-pad and closes with the same value; the head's bottom gap equals the h2->sub gap. Heads are centred; the sub is a centred box whose text is left-aligned ("locally left"), sized to its content so a one-liner sits dead centre and a long one wraps ragged- right inside its measure. Never text-align:center a paragraph. */ .section-head { padding: var(--s-section-pad) var(--gutter) var(--s-section-head-gap); max-width: var(--content-max); margin: 0 auto; text-align: center; } .section-head h2 { font-size: var(--t-section-head-h2-size); } .section-head__sub { max-width: 34em; width: fit-content; margin: var(--s-section-head-gap) auto 0; text-align: left; color: var(--muted); font-size: var(--t-section-head-sub-size); } .section-head--light h2 { color: var(--white); } .section-head__sub--light { color: var(--muted-light); } /* Body block for a section that leads with a .section-head and carries no other self-spacing component (a bare list, say). Mirrors the head's measure and gutter so the content lines up directly under the heading. */ .section-body { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) var(--s-section-pad); } /* ============================================================ LOADER — white logo over cyan; splits along the Edge ============================================================ */ .loader { position: fixed; inset: 0; z-index: 1000; } .loader__half { position: absolute; inset: 0; background: var(--cyan); transition: transform 900ms var(--ease-edge); } .loader__half--top { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%); } .loader__half--bottom { clip-path: polygon(0 55%, 100% 45%, 100% 100%, 0 100%); } .loader__content { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-loader-content-gap); transition: opacity 400ms ease, transform 400ms ease; } .loader__logo { width: min(420px, 62vw); height: auto; /* keep the wordmark's own ratio — the height attribute otherwise fixes it at 266px (Matt 2026-08-23) */ animation: loader-logo-in 900ms var(--ease-out) both; } @keyframes loader-logo-in { from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .loader__count { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-loader-count-size); letter-spacing: var(--t-loader-count-tracking); color: var(--ink-2); text-align: center; } .loader.is-done .loader__half--top { transform: translateY(-101%); } .loader.is-done .loader__half--bottom { transform: translateY(101%); } .loader.is-done .loader__content { opacity: 0; transform: scale(0.97); } .loader.is-gone { display: none; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-nav-gap); /* the row itself is full-bleed (the glass panel spans the screen) but its contents stay inside the 1440 content column (Matt 2026-09-03) */ padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2)); transition: transform 450ms var(--ease-edge), background 350ms ease, box-shadow 350ms ease; } .nav.is-scrolled { background: rgba(4, 27, 43, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 200, 251, 0.18); } .nav.is-hidden { transform: translateY(-100%); } .nav__logo img { height: 34px; width: auto; } .nav__links { display: flex; gap: 35px; } .nav__links a { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-links-a-size); letter-spacing: var(--t-links-a-tracking); text-transform: var(--t-h1-case); color: var(--muted-light); position: relative; padding: 6px 0; transition: color 250ms ease; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--cyan); transform: scaleX(0) rotate(-4deg); transform-origin: left; transition: transform 350ms var(--ease-edge); } .nav__links a:hover { color: var(--white); } .nav__links a:hover::after { transform: scaleX(1) rotate(-4deg); } .nav__right { display: flex; align-items: center; gap: var(--s-nav-right-gap); } .nav__phone { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-loader-count-size); color: var(--muted-light); transition: color 250ms ease; } .nav__phone:hover { color: var(--cyan); } .nav__cta { font-size: var(--t-section-head-sub-size); padding: 0.7em 1.5em 0.5em; } .nav__burger { display: none; } /* ---------- Training sub-nav dropdown: pure CSS reveal, no JS ---------- :hover/:focus-within on .nav__item shows the panel — nothing can flash before JS boots because visibility never depends on a script running. */ .nav__item { position: relative; } .nav__link--parent { display: inline-flex; align-items: center; gap: var(--s-nav-caret-gap); } .nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 250ms var(--ease-edge); } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: 100%; left: 50%; min-width: 260px; background: var(--ink-2); border-radius: var(--radius-card); padding: var(--s-nav-dropdown-pad); display: flex; flex-direction: column; box-shadow: 0 20px 45px -12px rgba(4, 27, 43, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 250ms var(--ease-edge), transform 250ms var(--ease-edge), visibility 250ms; z-index: 950; } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav__dropdown a { display: block; padding: var(--s-nav-dropdown-link-pad); } .nav__dropdown a:hover, .nav__dropdown a:focus-visible, .nav__dropdown a[aria-current="page"] { color: var(--cyan); } /* Mobile menu */ .mmenu { position: fixed; inset: 0; z-index: 890; background: var(--ink-2); display: flex; flex-direction: column; /* flex-start + auto margins = "safe" centering: the group centers when it fits, but top-aligns and scrolls when taller than the viewport instead of clipping the first links under the fixed header */ justify-content: flex-start; align-items: center; gap: var(--s-mmenu-gap); overflow-y: auto; padding: calc(var(--nav-h) + 24px) 24px 30px; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 600ms var(--ease-edge); visibility: hidden; } .mmenu__links { margin-top: auto; } .mmenu__phone { margin-bottom: auto; } .mmenu.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; } .mmenu__links { display: flex; flex-direction: column; align-items: center; gap: var(--s-mmenu-links-gap); } .mmenu__links a { font-family: var(--font-display); font-size: var(--t-links-a-size-2); text-transform: var(--t-h1-case); color: var(--white); transition: color 250ms ease; } .mmenu__links a:hover { color: var(--cyan); } .mmenu__cta { color: var(--cyan) !important; } .mmenu__phone { font-family: var(--font-label); font-weight: var(--t-weight-600); color: var(--muted-light); letter-spacing: var(--t-mmenu-phone-tracking); } .mmenu__group { display: flex; flex-direction: column; align-items: center; gap: var(--s-mmenu-group-gap); } .mmenu__sublinks { display: flex; flex-direction: column; align-items: center; gap: var(--s-mmenu-sublinks-gap); } .mmenu__sublink { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-mmenu-sublink-size); text-transform: var(--t-mmenu-sublink-case); color: var(--muted-light); padding-left: var(--s-mmenu-sublink-indent); transition: color 250ms ease; } .mmenu__sublink:hover, .mmenu__sublink:focus-visible, .mmenu__sublink[aria-current="page"] { color: var(--cyan) !important; } /* ============================================================ HERO — the cliff edge ============================================================ */ .hero { position: relative; min-height: 100svh; background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%, #0A3552 100%); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--nav-h) + 4vh) var(--gutter) 18vh; } .hero__scene { position: absolute; inset: 0; pointer-events: none; } .hero__glow { position: absolute; left: 50%; bottom: -12%; width: 130vw; height: 70vh; transform: translateX(-50%); background: radial-gradient(ellipse at center bottom, rgba(0, 200, 251, 0.22) 0%, rgba(0, 200, 251, 0.05) 45%, transparent 70%); } .hero__ridge { position: absolute; left: -2%; right: -2%; bottom: -2px; width: 104%; height: 52vh; will-change: transform; } .hero__ridge--back { fill: #123B57; opacity: 0.75; height: 58vh; } .hero__ridge--mid { fill: #0A2C44; height: 54vh; } .hero__ridge--front { fill: var(--ink-2); } .hero__inner { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; width: 100%; } /* Hero photo. The corner cut is a small fixed length, NOT --edge-cut (4vw): at desktop widths 4vw slices ~58px off a ~240px-tall photo and visibly shears the floor and rack lines. No rotation either, for the same reason. The cyan wedge carries the motif instead. */ /* Headline and photo share one row as equal columns at every width above phone. minmax(0, 1fr) rather than 1fr: a grid item's min-width is auto, so a long unbreakable headline would otherwise push its column past half and shove the photo off. min-width: 0 on the title is the same guard one level down. */ .hero__headrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--s-hero-headrow-gap); } /* Two-wrapper hero (Matt 2026-08-22): all copy in one flex column on the left, image alone on the right, stretched to the content column's height. */ .hero__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .hero__media { position: relative; display: flex; min-width: 0; } .hero__media .hero__figure { width: 100%; margin-top: 0; } /* beats the SPF-Tweak `.reveal { margin-top: 18px }` (<=1024) — the grid, not a margin, aligns the media column */ /* Sized to FILL half the row. The longest line is "Edge on " + the widest rotator word ("desk days"), which is 6.24em of Bebas, so the ceiling is column-width / 6.24 less a few percent of safety. Above ~1330px .hero__inner caps at var(--content-max) and the column stops growing at 590px, which is what the 5.6rem max corresponds to — past that, more viewport buys no more headline. The descendant selector outranks the .hero__title rule below on specificity, so declaration order doesn't matter here. */ .hero__headrow .hero__title { min-width: 0; font-size: var(--t-hero-title-size); } .hero__figure { position: relative; margin: 0; line-height: var(--t-figure-leading); clip-path: polygon(0 1.1rem, 100% 0, 100% calc(100% - 1.1rem), 0 100%); box-shadow: 0 18px 50px rgba(4, 27, 43, 0.45); } /* The media column stretches to the content column's height, so the img covers it by cropping (never stretching); 66% bias keeps the coach in frame — he is the point of the shot. */ .hero__figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; } /* cyan wedge, same corner language as .coach__corner */ .hero__figure-corner { position: absolute; right: 0; bottom: 0; width: 28%; height: 4px; background: var(--cyan); } @media (max-width: 1024px) { /* stretch, not center, so the figure's height tracks the headline's */ .hero__headrow { align-items: stretch; gap: 20px; } /* cover fills that taller box by cropping, never by stretching. The box is near-square against a 1.98 source, so ~half the width is cropped; bias right of centre or the crop cuts the coach, who is the point of the shot. */ .hero__figure img { height: 100%; object-fit: cover; object-position: 66% center; } } .hero__title { font-size: var(--t-hero-title-size-2); color: var(--white); text-shadow: 0 2px 40px rgba(4, 27, 43, 0.6); } .hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; } /* Both lines span the full column, which takes two sizes: in the display face (previously Big Shoulders 800, now Saira Condensed 800) "Gain your" was 3.88em wide and "Edge on " + the widest rotator word ("desk days") was 7.27em, so line one ran 7.27/3.88 = 1.87x larger to finish at the same right edge. em (not rem) so it stays locked to the title's clamp at every breakpoint. The ratio is a property of the words in the face — change the headline copy OR the display font and it needs remeasuring. Re-measured for Saira Condensed 800 on 2026-08-22: "GAIN YOUR" = 3.923em, "EDGE ON DESK DAYS" = 7.128em, ratio 1.82 → token set to 1.8em (~1% safety). At 5rem base the widest line fills 96.7% of the 590px column cap. */ .hero__line:first-child { font-size: var(--t-hero-line-size); } .hero__line-inner { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease-edge); } body.is-in .hero__line-inner { transform: translateY(0); } .hero__line:nth-child(2) .hero__line-inner { transition-delay: 120ms; } /* Rotating word */ .rotator { display: inline-grid; position: relative; vertical-align: bottom; overflow: hidden; color: var(--cyan); transition: width 500ms var(--ease-edge); } .rotator__word { grid-area: 1 / 1; white-space: nowrap; line-height: inherit; opacity: 0; transform: translateY(115%); transition: transform 650ms var(--ease-edge), opacity 450ms ease; } .rotator__word.is-active { transform: translateY(0); opacity: 1; } .rotator__word.is-leaving { transform: translateY(-115%); opacity: 0; } .hero__sub { max-width: 34em; margin-top: 26px; color: var(--muted-light); font-size: var(--t-hero-sub-size); } .hero__cta { display: flex; align-items: center; gap: var(--s-hero-cta-gap); margin-top: 35px; flex-wrap: wrap; } .hero__alt { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-hero-alt-size); color: var(--muted-light); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; transition: color 250ms ease, border-color 250ms ease; } .hero__alt:hover { color: var(--cyan); border-color: var(--cyan); } .hero__proof { margin-top: 30px; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-loader-count-size); letter-spacing: var(--t-btn-tracking); color: var(--muted-light); display: flex; align-items: center; gap: var(--s-hero-proof-gap); } .stars { color: var(--cyan); letter-spacing: var(--t-mmenu-phone-tracking); } /* ============================================================ MARQUEE DIVIDER — cyan edge strip ============================================================ */ /* Unused: no page markup references .marquee-wrap/.marquee/.marquee__track any more. Left in place rather than deleted; the marquee-scroll keyframes below are still used by .rrow__track and .certbar__track. */ /* THE fix for mobile side-scroll. .marquee is rotated and scaled 1.04, so its bounding box is ~9px wider than the viewport on each side. Its own overflow:hidden cannot clip that (an element cannot clip its own transform), and overflow-x on html/body only stops Chrome scrolling while iOS Safari still pans. This wrapper is an untransformed ancestor, so it genuinely clips the bleed. overflow-x:clip (not hidden) leaves overflow-y visible, so the strip still overlaps the sections above and below. */ .marquee-wrap { overflow-x: clip; margin: -50px 0; } .marquee { background: var(--cyan); transform: rotate(-2deg) scale(1.04); margin: 0; position: relative; z-index: 5; overflow: hidden; box-shadow: 0 10px 40px rgba(4, 27, 43, 0.25); } .marquee__track { display: flex; white-space: nowrap; width: max-content; animation: marquee-scroll 28s linear infinite; } .marquee__track span { font-family: var(--font-display); font-size: var(--t-track-span-size); text-transform: var(--t-h1-case); color: var(--ink-2); padding: 0.6em 0 0.4em; letter-spacing: var(--t-track-span-tracking); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ PILLARS — sticky stack ============================================================ */ .pillars { background: var(--paper); padding-bottom: var(--s-section-pad); position: relative; } .pillars__stack { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 64px; } .pillar { position: sticky; /* every card shares one sticky slot + one fixed size, so they stack exactly */ top: calc(var(--nav-h) + 3vh); height: clamp(360px, 48vh, 470px); display: grid; /* the numeral column left the markup — two columns now, copy + media */ grid-template-columns: minmax(0, 1fr) minmax(220px, var(--s-pillar-media-max)); gap: var(--s-pillar-gap); align-items: center; background: var(--white); border: 1px solid rgba(6, 40, 61, 0.08); border-radius: var(--radius-card); padding: var(--s-pillar-pad); box-shadow: 0 24px 60px -18px rgba(6, 40, 61, 0.25); overflow: hidden; transition: filter 300ms ease; } /* Three identically raised cards read as a template. Only the middle one keeps the stamp, the navy fill and the drop shadow — one exception reads as a decision instead. */ .pillar[data-pillar="1"], .pillar[data-pillar="3"] { box-shadow: none; border: 1px solid rgba(6, 40, 61, 0.2); } .pillar[data-pillar="2"] { background: var(--navy); box-shadow: 0 30px 70px -16px rgba(6, 40, 61, 0.45); } .pillar[data-pillar="2"] .pillar__body h3 { color: var(--white); } .pillar[data-pillar="2"] .pillar__need { color: var(--cyan); } .pillar[data-pillar="2"]::before { /* edge slash accent, top-left — the exception card keeps the stamp */ content: ""; position: absolute; top: 0; left: 0; width: 90px; height: 90px; background: var(--cyan); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: 0.14; } .pillar__num { font-family: var(--font-display); font-size: var(--t-pillar-num-size); color: transparent; -webkit-text-stroke: 2px var(--cyan); line-height: var(--t-pillar-num-leading); } .pillar__need { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-loader-count-size); color: var(--cyan-deep); letter-spacing: var(--t-track-span-tracking); margin-bottom: 10px; } .pillar__body { position: relative; z-index: 2; } .pillar__body h3 { font-size: var(--t-body-h3-size); margin-bottom: 10px; } .pillar__body p { color: var(--muted); max-width: 36em; } .pillar__media { position: relative; z-index: 2; height: 100%; min-height: 200px; border-radius: var(--radius-media); overflow: hidden; clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); /* subtle edge slant */ } /* Focal points (Matt 2026-09-04: nobody's head may be cut off in any cropped slot). One vertical focal % per photo, chosen so its head band stays inside the TIGHTEST crop the site uses for it (fit-cards show as little as 37% of a portrait's height). Keyed by filename so every slot agrees; re-run the crop scan if a photo is re-shot or a slot's aspect changes. heads: coach-standing 8-32%, coach-watch 8-37%, pads-1on1 15-30%, bench-spot / -2 3-20% + a lying client at ~50% (so: top), floor-ropes 40-55%, coach portraits 8-40%. The wide floor shots keep the default centre. */ img[src$="/edge-coach-standing.webp"] { object-position: 50% 10%; } img[src$="/edge-coach-watch.webp"] { object-position: 50% 8%; } img[src$="/edge-pads-1on1.webp"] { object-position: 50% 15%; } img[src$="/edge-bench-spot.webp"], img[src$="/edge-bench-spot-2.webp"] { object-position: 50% 0; } img[src$="/edge-floor-ropes.webp"] { object-position: 50% 55%; } img[src$="/coach-daniel.jpg"], img[src$="/coach-quan.jpg"], img[src$="/coach-remi.jpg"] { object-position: 50% 10%; } .pillar__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); } .pillar:hover .pillar__media img { transform: scale(1.06); } /* The client-supplied placeholder in each pillar is restyled into a small navy-tinted echo frame peeking out from behind the real photo, rather than the raw gray rectangle it renders as by default. */ .pillar > img[src^="data:"] { --pillar-echo-width: 120px; position: absolute; right: calc(var(--s-pillar-pad) + var(--s-pillar-media-max) - var(--pillar-echo-width) + 32px); bottom: calc(var(--s-pillar-pad) - 24px); width: var(--pillar-echo-width); aspect-ratio: 4 / 3; height: auto; filter: brightness(0.4) sepia(1) hue-rotate(160deg); opacity: 0.25; transform: rotate(-3deg); z-index: 1; pointer-events: none; } /* ============================================================ SERVICES — navy, diagonal top ============================================================ */ .services { background: var(--ink); clip-path: polygon(0 var(--edge-cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--edge-cut) * -0.5); padding: var(--edge-cut) 0 var(--s-section-pad); position: relative; } /* Navy band with a single photo article and no .section-head (small-group's "same coach" band). The band's diagonal top ate the photo's clearance, so a third of the bottom space moved up top (Matt 2026-09-02). Deliberately not symmetric. */ .services--band { padding-top: calc(var(--edge-cut) + var(--s-band-pad-top)); padding-bottom: var(--s-band-pad-bottom); } .services--band .service { margin-bottom: 0; } /* Copy set on the navy band */ .services .content-section__title { color: var(--white); } .services .content-section__text { color: var(--muted-light); } .service { max-width: var(--content-max); margin: var(--s-service-margin); padding: 0 var(--gutter); display: grid; grid-template-columns: 10fr 11fr; gap: var(--s-service-gap); align-items: center; } .service--flip .service__media { order: 2; } .service__media { position: relative; } .service__media img { width: 100%; height: auto; /* the height="" attribute otherwise pins it and width:100% squeezes the photo */ /* every framed photo on the site is the same shape (the homepage pair's 609x642); portrait/EXIF-rotated sources are cover-cropped into it */ aspect-ratio: 19 / 20; object-fit: cover; border-radius: var(--radius-media); clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); position: relative; z-index: 1; } .service__frame { position: absolute; inset: -14px 14px 14px -14px; border: 2px solid var(--cyan); border-radius: var(--radius-media); clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); /* fully visible above the photo, static — Matt 2026-08-23 */ z-index: 2; pointer-events: none; } .service--flip .service__frame { inset: -14px -14px 14px 14px; } .service__body h3 { color: var(--white); font-size: var(--t-body-h3-size-2); margin-bottom: 14px; } .service__lead { color: var(--muted-light); margin-bottom: 26px; max-width: 32em; } .service__more { margin: var(--s-service-more-margin); font-size: var(--t-map-cta-btn-size); } .service__more a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; } .service__more a:hover { text-decoration-thickness: 2px; } .service__list { margin-bottom: 30px; display: flex; flex-direction: column; gap: var(--s-service-list-gap); } .service__list li { color: rgba(255, 255, 255, 0.88); padding-left: 30px; position: relative; } .service__list li::before { /* angled edge tick */ content: ""; position: absolute; left: 0; top: 0.4em; width: 14px; height: 10px; background: var(--cyan); clip-path: polygon(0 55%, 35% 100%, 100% 0, 35% 70%); } .service__list strong, .service__body strong { color: var(--cyan); font-weight: var(--t-weight-700); } /* Fit checklist band */ /* .fit-band wraps the checklist and the floating-panel scene behind it: the band is the clip for the scene, the checklist sits above it. */ .fit-band { position: relative; overflow: hidden; } /* A soft-edged plate of the band's own colour behind the copy, dulling the photography so the type stays legible (Matt 2026-09-03). Because it is the same colour as the band it is invisible over empty background and only bites where a photo is, which is also why it cannot band the way a contrasting gradient would. Sits above .depth-scene and below .fit / .goals (both z-index 1). */ .fit-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 60% at 50% 50%, rgba(6, 40, 61, 0.94) 0%, rgba(6, 40, 61, 0.88) 40%, rgba(6, 40, 61, 0.55) 68%, rgba(6, 40, 61, 0) 100%); } @media (max-width: 640px) { .fit-band::after { background: radial-gradient(ellipse 78% 58% at 50% 50%, rgba(6, 40, 61, 0.94) 0%, rgba(6, 40, 61, 0.88) 45%, rgba(6, 40, 61, 0.5) 72%, rgba(6, 40, 61, 0) 100%); } } .fit { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; text-align: center; } /* ---------- RING3D: the viewer sits at the centre of a wide cylinder ---------- Used only by the /reviews review wall (.review-ring) now. The ring turns slowly; main.js positions each .ring3d__panel from its data-a / data-r / data-y / data-w attributes and phase-locks its depth pass. --ring-p is the perspective distance (a shorter one on phones widens the field of view). */ .ring3d { --ring-p: 1600px; --ring-dur: 180s; position: absolute; inset: 0; perspective: var(--ring-p); perspective-origin: 50% 50%; transform-style: preserve-3d; pointer-events: none; } .ring3d__ring { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--ring-p)) rotateY(0deg); will-change: transform; } .ring3d__panel { position: absolute; top: 50%; left: 50%; visibility: hidden; /* main.js shows the ~13 panels inside +/-48 deg */ } .ring3d__panel.is-shown { visibility: visible; } /* Spin, depth fade and culling are all driven from one rAF clock in main.js (2026-09-04): Gecko will not composite transform/opacity animations inside a preserve-3d context and then throttles them, which is the "only moves when the mouse moves" jitter. The panel's opacity is written inline per frame. */ /* Culling (the whole performance story - a panel approaching +/-90 deg crosses the camera plane and scales toward infinity) is the .is-shown toggle above. */ @media (max-width: 640px) { .ring3d { --ring-p: 700px; } } /* ---------- DEPTH SCENE: three parallax layers of duotone photography ---------- Matt 2026-09-03. Near / mid / far differ in image size and drift speed only; all three occupy the same vertical space and simply sit in front of one another. Depth is ATMOSPHERIC, not transparency (Matt: "I don't want them to be semi-transparent so that you can see through them"): every image is fully opaque, and a veil of the band's own colour sits in front of each layer, so a distant photo is progressively obscured by haze the way real distance works. Each layer is ONE composited track sliding on `transform`, so the whole scene is three GPU layers with no per-image animation. */ .depth-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .depth-layer { position: absolute; inset: 0; display: flex; align-items: center; /* every layer centred on the same band, front to back */ overflow: hidden; } /* farther = smaller and slower; the parallax is the difference in duration. --y-scale spreads the smaller/farther layers further across the band, so the three do not settle into concentric rows around one centre line. */ .depth-layer--far { --depth-dur: 170s; --y-scale: 1.8; --depth-slot: var(--s-depth-slot-far); --depth-gap: var(--s-depth-gap-far); } .depth-layer--mid { --depth-dur: 110s; --y-scale: 1.15; --depth-slot: var(--s-depth-slot-mid); --depth-gap: var(--s-depth-gap-mid); } .depth-layer--near { --depth-dur: 70s; --y-scale: 0.6; --depth-slot: var(--s-depth-slot-near); --depth-gap: var(--s-depth-gap-near); } .depth-track { display: flex; align-items: center; gap: var(--depth-gap); width: max-content; will-change: transform; } /* the track carries its sequence twice, so -50% lands exactly on the repeat */ .depth-scene.is-in .depth-track { animation: depth-drift var(--depth-dur) linear infinite; } @keyframes depth-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Scatter. translateY, not margin, so it shifts the picture without changing the track's height or the flow - and being a share of the item's OWN height it scales with the breakpoint tokens for free. The shortcode assigns these with a period equal to the images per half-track, so the loop still matches. */ /* A fixed slot, not the picture's own width. Portrait and landscape photos are different widths, so without it the pitch varies and the "never twice on screen" arithmetic no longer holds. */ .depth-item { flex: none; min-width: var(--depth-slot); display: flex; justify-content: center; } .depth-item--y1 { transform: translateY(calc(-70% * var(--y-scale, 1))); } .depth-item--y2 { transform: translateY(calc(-25% * var(--y-scale, 1))); } .depth-item--y3 { transform: translateY(calc(15% * var(--y-scale, 1))); } .depth-item--y4 { transform: translateY(calc(55% * var(--y-scale, 1))); } .depth-item--y5 { transform: translateY(calc(-45% * var(--y-scale, 1))); } .depth-item--y6 { transform: translateY(calc(35% * var(--y-scale, 1))); } .depth-layer--far .depth-item img { height: var(--s-depth-h-far); } .depth-layer--mid .depth-item img { height: var(--s-depth-h-mid); } .depth-layer--near .depth-item img { height: var(--s-depth-h-near); } .depth-item img { width: auto; max-width: none; border-radius: var(--radius-media); display: block; } /* The haze. Each veil sits in front of one layer and behind the next, so the obscuring accumulates with distance. It is denser across the middle, which is what keeps the copy legible - the far layer all but disappears behind the text while the near layer stays strong out at the edges. These rgba()s are --ink and --ice at reduced alpha (the one exception the token contract allows). Because each veil is the SAME colour as the band it sits on, it is invisible over empty background and therefore cannot band - which is what the old radial scrim did. */ .depth-haze { position: absolute; inset: 0; pointer-events: none; } .depth-haze--far { background: rgba(6, 40, 61, 0.64); } .depth-haze--mid { background: rgba(6, 40, 61, 0.36); } .depth-haze--near { background: rgba(6, 40, 61, 0.06); } /* Light bands (/start-here) haze toward ice instead of navy. */ .depth-scene--light .depth-haze--far { background: rgba(223, 246, 255, 0.7); } .depth-scene--light .depth-haze--mid { background: rgba(223, 246, 255, 0.4); } .depth-scene--light .depth-haze--near { background: rgba(223, 246, 255, 0.06); } /* On a phone the copy runs the full width, so the haze is flat and dense everywhere rather than opening out at the edges. */ @media (max-width: 640px) { /* the copy plate widens instead (see .fit-band::after) */ .depth-haze--far { background: rgba(6, 40, 61, 0.72); } .depth-haze--mid { background: rgba(6, 40, 61, 0.44); } } .fit__cta { display: inline-block; } .fit__title { color: var(--white); font-size: var(--t-fit-title-size); margin-bottom: 30px; } .fit__title span { color: var(--cyan); font-size: var(--t-title-span-size); letter-spacing: var(--t-title-span-tracking); } /* A centred box that hugs its content (never a fixed-width slab pinned to one side), text left-aligned inside it - same rule as .section-head__sub. */ .fit__list { text-align: left; width: fit-content; max-width: 576px; margin: var(--s-fit-list-margin); display: flex; flex-direction: column; gap: 18px; } .fit__item { display: flex; align-items: flex-start; gap: var(--s-hero-kicker-gap); color: rgba(255, 255, 255, 0.9); opacity: 0; transform: translateX(-18px); transition: opacity 500ms ease, transform 500ms var(--ease-out); } .fit__item.is-checked { opacity: 1; transform: none; } /* The site's one check mark: the angled cyan tick from .service__list (Matt 2026-09-02: the lists above this one use it, so this one does too). */ .fit__check { flex: 0 0 14px; width: 14px; height: 10px; margin-top: 0.4em; /* tok-ok: optical alignment of the tick to the first line, as .service__list's top: 0.4em */ background: var(--cyan); clip-path: polygon(0 55%, 35% 100%, 100% 0, 35% 70%); } .fit__then { font-family: var(--font-display); font-size: var(--t-fit-then-size); color: var(--cyan); text-transform: var(--t-h1-case); margin-bottom: 30px; } /* ============================================================ REVIEWS — the wall of proof ============================================================ */ .reviews { background: var(--ice); clip-path: polygon(0 0, 100% var(--edge-cut), 100% 100%, 0 100%); margin-top: calc(var(--edge-cut) * -1); padding-top: var(--edge-cut); padding-bottom: calc(var(--edge-cut) + var(--s-section-pad)); overflow: hidden; } /* Homepage-only: the live review-crowd variant. Its front row must sit flush against the section that follows (no --edge-cut band under it — the crowd's own SVG crop already ends flush at the stage's bottom edge), so this variant drops the bottom band the static/--edge-cut layout above relies on. Scoped to this modifier, not `.reviews` itself, because `.reviews` is shared with the static reviews wall on /reviews and the /training pages, which still need the angled band. */ /* /reviews: flat top under the photo hero (Matt 2026-09-02: no slanted divider there, it should meet the hero like the coaches page does). */ .reviews--flat { clip-path: none; margin-top: 0; padding-top: 0; } /* The review wall: a navy full-bleed stage carrying the 180+ counter and the 3D review ring. */ .review-stage { position: relative; background: var(--ink); overflow: hidden; isolation: isolate; } .review-stage::before { /* cyan glow rising from the floor, as .hero__glow */ content: ""; position: absolute; left: 50%; bottom: -20%; width: 120vw; height: 80%; transform: translateX(-50%); background: radial-gradient(ellipse at center bottom, rgba(0, 200, 251, 0.28) 0%, rgba(0, 200, 251, 0.06) 45%, transparent 70%); pointer-events: none; } .review-stage__head { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; padding: var(--s-section-pad) var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-review-stage-head-gap); text-align: center; pointer-events: none; } /* .review-stage prefix beats the later .stat__num { color: ink } rule */ .review-stage .review-stage__num { font-family: var(--font-display); font-size: var(--t-start-title-size); line-height: var(--t-start-title-leading); color: var(--white); text-transform: var(--t-h1-case); } /* The section heading lives on the stage itself (Matt 2026-09-04: one navy section, no ice band above it), same size as any .section-head h2. */ .review-stage__title { font-size: var(--t-section-head-h2-size); color: var(--white); text-align: center; margin-bottom: var(--s-section-head-gap); } .review-stage__label { font-family: var(--font-display); font-size: var(--t-body-h3-size); color: var(--cyan); text-transform: var(--t-h1-case); } .review-ring { position: relative; height: var(--s-review-ring-h); pointer-events: auto; } /* the two rings share one duration token each, so main.js can phase-lock every panel's depth pass to its own ring (Matt 2026-09-03: and it never pauses) */ .review-ring__ring--outer { --ring-dur: 240s; } .review-ring__ring--inner { --ring-dur: 200s; } /* turns the other way: data-dir="reverse" in the shortcode */ .review-ring .rcard { width: 100%; /* the panel (data-w) owns the width */ position: relative; /* a tight shadow: a wide blur on 50 moving layers is pure compositor cost */ box-shadow: 0 8px 18px -8px rgba(4, 27, 43, 0.5); } /* Cards are fully opaque and never shaded (Matt 2026-09-04, twice: no see-through, and no darkening toward the middle). A veil of the stage's own navy sits ON TOP of the card at --haze, which main.js keeps at 0 wherever a card can be on screen and only raises over the last degrees before the cull, so a card leaves by vanishing into the navy instead of popping. */ .review-ring .rcard::after { content: ""; position: absolute; inset: -3px 0 0; /* cover the cyan top border too */ border-radius: inherit; background: var(--ink); opacity: var(--haze, 0); pointer-events: none; } .review-ring .rcard:hover { transform: none; } /* keep every card a similar height so the two rows never collide or clip */ .review-ring .rcard blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } /* every fourth card on the wall goes navy, as the old marquee rows did */ .review-ring .ring3d__panel:nth-child(4n) .rcard { background: var(--navy); } .review-ring .ring3d__panel:nth-child(4n) .rcard__stars { color: var(--cyan); } .review-ring .ring3d__panel:nth-child(4n) blockquote { color: var(--ice); } .review-ring .ring3d__panel:nth-child(4n) .rcard__name { color: var(--white); } .review-ring .ring3d__panel:nth-child(4n) .rcard__mono { background: rgba(0, 200, 251, 0.18); border-color: var(--cyan); color: var(--cyan); } .reviews--crowd { position: relative; padding-bottom: 0; } /* .team only appears once, directly after this section on the homepage — its usual --edge-cut top diagonal is replaced with a flat top so the crowd's front row meets it with zero gap. The edge-cut top padding only existed to clear that diagonal; with the flat top it is pure dead band under the crowd, so it is dropped too — the team's own .section-head padding still spaces the heading. */ .reviews--crowd + .team { clip-path: none; padding-top: 0; /* rides 10px up over the crowd so no ice shows between the front row's feet and the navy (Matt 2026-09-07, every width) */ margin-top: var(--s-crowd-team-overlap); position: relative; z-index: 2; } .reviews--crowd .reviews__head { position: relative; z-index: 3; text-align: center; padding-bottom: var(--s-reviews-head-pad-bottom); /* pulls the review-crowd stage up so its empty upper band sits behind the heading — the heading's own top offset is untouched, so the clearance `.reviews`'s padding-top already keeps below the .services diagonal is unaffected by this overlap. */ margin-bottom: var(--s-reviews-head-overlap-margin-bottom); } .reviews__stats { max-width: var(--content-max); margin: var(--s-reviews-stats-margin); padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-loader-content-gap); } .stat { text-align: center; } /* single-stat variant: one full-width line, not a cell of the old 3-col grid (Matt 2026-08-23) */ .reviews__stats--single { display: block; } .reviews__stats--single .stat { text-align: left; } .reviews__stats--single .stat__num { text-transform: var(--t-h1-case); } /* caps, matching headers */ .stat__num { display: block; font-family: var(--font-display); font-size: var(--t-stat-num-size); color: var(--ink); line-height: var(--t-pillar-num-leading); } .stat__label { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-stat-label-size); letter-spacing: var(--t-stat-label-tracking); text-transform: var(--t-h1-case); color: var(--muted); } .reviews__wall { display: flex; flex-direction: column; gap: var(--s-nav-right-gap); } .rrow { overflow: hidden; } .rrow__track { display: flex; gap: var(--s-nav-right-gap); width: max-content; padding: 3px 0; animation: marquee-scroll var(--row-dur, 46s) linear infinite; } .rrow[data-dir="right"] .rrow__track { animation-direction: reverse; } .rrow[data-speed="slow"] .rrow__track { --row-dur: 60s; } .rrow:hover .rrow__track { animation-play-state: paused; } .rcard { flex: 0 0 auto; width: min(400px, 82vw); background: var(--white); border-radius: var(--radius-card); padding: 26px 30px; box-shadow: 0 12px 30px -12px rgba(6, 40, 61, 0.18); border-top: 3px solid var(--cyan); transition: transform 350ms var(--ease-out); } .rcard:hover { transform: translateY(-6px) rotate(-0.5deg); } .rcard__stars { color: var(--cyan-deep); letter-spacing: var(--t-links-a-tracking); margin-bottom: 10px; } .rcard blockquote { font-size: var(--t-rcard-blockquote-size); color: var(--slate); } .rcard figcaption { margin-top: 16px; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-kicker-size); letter-spacing: var(--t-mmenu-phone-tracking); text-transform: var(--t-h1-case); color: var(--muted); } /* Monogram stands in for a photo: these reviews carry no real avatars on their source platforms (Bark/Thumbtack show names only), so we don't invent faces. */ .rcard__by { display: flex; align-items: center; gap: var(--s-hero-proof-gap); } .rcard__mono { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: var(--s-rcard-mono-radius); background: rgba(0, 200, 251, 0.12); border: 1px solid rgba(0, 200, 251, 0.45); color: var(--cyan-deep); font-size: var(--t-rcard-mono-size); letter-spacing: var(--t-track-span-tracking); line-height: var(--t-pillar-num-leading); padding-top: 1px; } .rcard__name { min-width: 0; } .rcard__avatar { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: var(--s-rcard-mono-radius); object-fit: cover; border: 1px solid rgba(0, 200, 251, 0.45); filter: contrast(1.08); } /* Wall-track card variation: widen every third card and fill every fourth so the scrolling strip stops reading as a row of identical clones. */ .rrow__track .rcard:nth-child(3n) { width: min(420px, 82vw); } .rrow__track .rcard:nth-child(4n) { background: var(--navy); border-top-color: var(--cyan); } .rrow__track .rcard:nth-child(4n) .rcard__stars { color: var(--cyan); } .rrow__track .rcard:nth-child(4n) blockquote { color: var(--ice); } .rrow__track .rcard:nth-child(4n) .rcard__name { color: var(--white); } .rrow__track .rcard:nth-child(4n) .rcard__mono { background: rgba(0, 200, 251, 0.18); border-color: var(--cyan); color: var(--cyan); } .rcard__by > div { display: flex; flex-direction: column; min-width: 0; } .rcard__src { font-size: var(--t-rcard-src-size); letter-spacing: var(--t-title-span-tracking); text-transform: var(--t-h1-case); color: var(--muted); margin-top: 3px; } /* ============================================================ TEAM — scroll rail ============================================================ */ .team { background: var(--ink-2); clip-path: polygon(0 var(--edge-cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--edge-cut) * -1); padding: var(--edge-cut) 0 var(--s-section-pad); overflow: hidden; } /* Sideways-scrollable rail with fades that appear only when there's more to see */ .team__rail { position: relative; } .team__rail::before, .team__rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(36px, 7vw, 100px); pointer-events: none; z-index: 2; opacity: 0; transition: opacity 350ms ease; } .team__rail::before { left: 0; background: linear-gradient(90deg, var(--ink-2), rgba(4, 27, 43, 0)); } .team__rail::after { right: 0; background: linear-gradient(270deg, var(--ink-2), rgba(4, 27, 43, 0)); } .team__rail.can-left::before { opacity: 1; } .team__rail.can-right::after { opacity: 1; } .team__viewport { overflow-x: auto; overflow-y: hidden; padding: var(--s-team-viewport-pad) 0; /* clears the -18px hover offset of .coach__frame, which this scroll container would otherwise clip */ scroll-snap-type: x proximity; /* shrink-to-content + auto margins center the cards whenever they fit; when they overflow, width caps at the rail and it scrolls as before */ max-width: max-content; margin: 0 auto; scrollbar-width: none; /* arrows on desktop, swipe on mobile — no bar */ outline: none; } .team__viewport::-webkit-scrollbar { display: none; } .team__viewport:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 200, 251, 0.5); border-radius: var(--radius-card); } .team__track { display: flex; gap: var(--s-team-track-gap); padding: 0 var(--gutter); width: max-content; } .coach { position: relative; flex: 0 0 auto; width: min(340px, 78vw); outline: none; scroll-snap-align: center; } .coach__photo { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 329 / 425; background: var(--slate); } .coach__photo img { width: 100%; height: 100%; object-fit: cover; /* the coaches are shown in colour at rest: desaturating real people is the stock-photo tell this pass is removing */ filter: contrast(1.05); transform: scale(1.02); transition: filter 600ms ease, transform 800ms var(--ease-out); user-select: none; -webkit-user-drag: none; } .coach:hover .coach__photo img, .coach:focus-visible .coach__photo img { transform: scale(1.07); } /* Outline frame on the coach photo. At rest it sits exactly on the photo's edges; on hover/focus it grows a little past them (the photo zooms inside, the frame detaches outward) - Matt 2026-09-02, replacing the offset frame that read as "in the way". It lives as a sibling of .coach__photo rather than inside it because the grown frame extends past the photo, which .coach__photo's overflow:hidden would otherwise clip. */ .coach__frame { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 329 / 425; /* mirrors .coach__photo so the frame hugs it */ border: 2px solid var(--cyan); border-radius: var(--radius-card); transform: none; transition: transform 400ms var(--ease-out); z-index: 2; pointer-events: none; } .coach:hover .coach__frame, .coach:focus-visible .coach__frame { transform: scale(1.06); } /* corner-triangle motif retired site-wide — kept in the markup so the card structure is untouched, but it no longer paints */ .coach__corner { display: none; } .coach__bio { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; background: linear-gradient(180deg, transparent 0%, rgba(4, 27, 43, 0.92) 26%, rgba(4, 27, 43, 0.97) 100%); color: rgba(255, 255, 255, 0.92); font-size: var(--t-coach-bio-size); line-height: var(--t-coach-bio-leading); transform: translateY(102%); transition: transform 550ms var(--ease-edge); } /* :focus-visible, not :focus — a mouse click focused the card and pinned the bio open until the next click (Matt 2026-08-30). Keyboard focus still reveals it. */ .coach:hover .coach__bio, .coach:focus-visible .coach__bio { transform: translateY(0); } .coach__certs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: var(--s-coach-certs-gap); } .coach__certs li { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-certs-li-size); letter-spacing: var(--t-certs-li-tracking); text-transform: var(--t-h1-case); color: var(--cyan); border: 1px solid rgba(0, 200, 251, 0.4); border-radius: var(--radius-ctrl); padding: 0.2em 0.6em; } .coach__meta { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-hero-kicker-gap); } .coach__meta h3 { color: var(--white); font-size: var(--t-meta-h3-size); } .coach__role { /* mirrors the name's flush-left edge on the other side of the card, so a wrapped role stays right-aligned rather than ragging left (Matt 2026-09-03) */ text-align: right; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-coach-role-size); letter-spacing: var(--t-stat-label-tracking); text-transform: var(--t-h1-case); color: var(--cyan); } .team__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; border-radius: var(--s-rcard-mono-radius); border: 1px solid rgba(0, 200, 251, 0.5); background: rgba(4, 27, 43, 0.72); cursor: pointer; display: grid; place-items: center; transition: border-color 250ms ease, background 250ms ease, opacity 250ms ease; } .team__arrow::before { content: ""; width: 10px; height: 10px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); } .team__arrow--prev { left: calc(var(--gutter) * 0.4); } .team__arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; } .team__arrow--next { right: calc(var(--gutter) * 0.4); } .team__arrow--next::before { transform: rotate(45deg); margin-right: 4px; } .team__arrow:hover, .team__arrow:focus-visible { background: rgba(0, 200, 251, 0.18); border-color: var(--cyan); } .team__rail:not(.can-left) .team__arrow--prev, .team__rail:not(.can-right) .team__arrow--next { opacity: 0; pointer-events: none; } @media (max-width: 820px) { .team__arrow { display: none; } } /* ============================================================ START HERE — the only CTA ============================================================ */ .start { background: var(--cyan); clip-path: polygon(0 0, 100% var(--edge-cut), 100% 100%, 0 100%); margin-top: calc(var(--edge-cut) * -1); padding: calc(var(--edge-cut) + var(--s-section-pad)) var(--gutter) var(--s-section-pad); } .start__inner { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 11fr 10fr; /* copy + contact card stack in the left column, form spans the right; as separate grid items the card can reorder below the form on mobile. The two 1fr rows are empty spacers: they split whatever height the form has left over, so copy + card sit vertically centred on the form as one block whatever their heights (Matt 2026-09-02). */ grid-template-areas: ". form" "copy form" "alt form" ". form"; grid-template-rows: 1fr auto auto 1fr; gap: var(--s-start-inner-gap); align-items: center; } /* Everything in the left column is centred in the column; each piece keeps its own local alignment (title right-aligned to itself, paragraph left, card shrink-wrapped to its content) - Matt 2026-09-02. */ /* A grid, so the column is sized by the title alone: the paragraph is given a definite `width: 0` (contributing nothing to the track) and then told to fill it, which is what makes it wrap to exactly the title's measure (Matt 2026-09-03). */ .start__copy { grid-area: copy; align-self: end; justify-self: center; display: grid; justify-items: center; } .start__form { grid-area: form; } .start__alt { grid-area: alt; align-self: start; justify-self: center; width: fit-content; max-width: 100%; } .start__title { font-size: var(--t-start-title-size); color: var(--ink-2); line-height: var(--t-start-title-leading); margin-bottom: var(--s-start-copy-gap); display: flex; flex-direction: column; align-items: flex-end; /* "here" ends flush with "Start" */ width: fit-content; } .start__word--outline { color: transparent; -webkit-text-stroke: 3px var(--ink-2); } .start__copy p { color: var(--ink-2); width: 0; min-width: 100%; text-align: left; margin-bottom: 16px; } .start__copy strong { font-weight: var(--t-weight-700); } .start__facts { margin-top: 26px; display: flex; flex-direction: column; gap: var(--s-start-facts-gap); } .start__facts li { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-hero-alt-size); letter-spacing: var(--t-certs-li-tracking); color: var(--ink); padding-left: 22px; position: relative; } .start__facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 2px; background: var(--ink-2); transform: rotate(-8deg); } .start__facts a { font-weight: var(--t-weight-700); } .start__form { background: var(--white); border-radius: var(--radius-card); padding: 16px; box-shadow: 0 30px 80px -20px rgba(4, 27, 43, 0.45); transform: rotate(-1deg); transition: transform 500ms var(--ease-out); } .start__form:hover { transform: rotate(0deg); } .start__alt { background: var(--ink-2); /* Intentional outlier: the one element that keeps a softer radius than the sharp-cornered system around it. */ border-radius: 10px; /* tok-ok: deliberate one-off, not a system radius */ padding: var(--s-start-alt-pad); } .start__alt p.start__alt-title { font-family: var(--font-display); font-size: var(--t-start-alt-title-size); line-height: var(--t-start-alt-title-leading); text-transform: var(--t-h1-case); color: var(--white); max-width: none; margin-bottom: 18px; text-align: center; } .start__alt-title em { color: var(--cyan); } /* Content-sized columns, not 1fr 1fr (Matt 2026-09-03). Equal fractions made both cells as wide as the WIDER one, so the short phone column floated in the middle of its cell and left a big gap to the card's left wall while the address nearly touched the right one. Sizing each column to its own content and centring the pair makes the card's left and right insets both exactly its padding. */ .start__alt-cols { display: grid; grid-template-columns: auto auto; justify-content: center; gap: var(--s-visit-col-gap); } .start__alt-cols h3 { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-coach-role-size); letter-spacing: var(--t-alt-cols-h3-tracking); text-transform: var(--t-h1-case); color: var(--muted-light); margin-bottom: 10px; } .start__alt-phone { font-family: var(--font-display); font-size: var(--t-start-alt-phone-size); color: var(--cyan); transition: color 250ms ease; } .start__alt-phone:hover, .start__alt-phone:focus-visible { color: var(--white); } /* the address opens Google Maps directions (Matt 2026-09-02); reads as text at rest, lights up cyan like the phone number does */ .start__alt-address { color: inherit; transition: color 250ms ease; } .start__alt-address:hover, .start__alt-address:focus-visible { color: var(--cyan); } .start__alt .start__alt-cols p { color: rgba(255, 255, 255, 0.82); font-size: var(--t-alt-cols-p-size); line-height: var(--t-body-leading); margin-bottom: 0; } @media (max-width: 640px) { .start__alt-cols { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--ink-2); color: var(--muted-light); } .footer__inner { max-width: var(--content-max); margin: 0 auto; padding: clamp(50px, 6vw, 80px) var(--gutter) 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } /* Map sits as its own full-width row above brand + columns, so it renders the same regardless of how many .footer__col blocks a given page has. */ .footer__map { grid-column: 1 / -1; margin-bottom: var(--s-footer-map-margin-bottom); } .footer__map iframe { display: block; width: 100%; height: var(--s-footer-map-h); border: 2px solid var(--cyan); border-radius: var(--radius-card); } .footer__logo { height: 30px; width: auto; margin-bottom: 16px; } .footer__brand p { font-size: var(--t-hero-alt-size); max-width: 26em; } .footer__col h4 { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-stat-label-size); letter-spacing: var(--t-service-index-tracking); text-transform: var(--t-h1-case); color: var(--cyan); margin-bottom: 14px; } .footer__col a, .footer__col p { font-size: var(--t-hero-alt-size); line-height: var(--t-col-a-leading); } .footer__col a { transition: color 250ms ease; } .footer__col a:hover { color: var(--cyan); } .footer__legal { text-align: center; padding: 30px max(var(--gutter), calc((100% - var(--content-max)) / 2)); font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-stat-label-size); letter-spacing: var(--t-title-span-tracking); color: rgba(255, 255, 255, 0.35); border-top: 1px solid rgba(255, 255, 255, 0.07); /* Three independent groups on one horizontal line — policies, copyright, credit. flex-wrap means they fall back to the old stacked layout on narrow viewports on their own, so no media query is needed. The row gap is much larger than the word spacing inside each group, which is what keeps the three reading as separate items rather than one run-on line. */ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px 32px; } /* the agency credit, one class in the footer partial so every page follows */ .footer__credit { font-size: var(--t-footer-credit-size); } /* ============================================================ CARD GRID — auto-fit grid of navy cards with corner-cut motif ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-card-grid-gap); padding: 0 var(--gutter); max-width: var(--content-max); margin: 0 auto; } .card { background: var(--ink); color: var(--white); border-radius: var(--radius-card); padding: var(--s-card-pad); position: relative; overflow: hidden; border: 2px solid transparent; transition: border-color 350ms var(--ease-edge), transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); box-shadow: 0 12px 30px -10px rgba(4, 27, 43, 0.25); } .card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(4, 27, 43, 0.35); } .card__image { width: 100%; border-radius: var(--radius-media); clip-path: polygon(0 0.6rem, 100% 0, 100% calc(100% - 0.6rem), 0 100%); margin-bottom: 20px; } .card__image img { width: 100%; display: block; } .card__title { font-family: var(--font-display); font-size: var(--t-card-title-size); text-transform: var(--t-h1-case); margin-bottom: 10px; line-height: var(--t-start-alt-title-leading); } .card__body { font-size: var(--t-rcard-blockquote-size); color: var(--muted-light); margin-bottom: 20px; line-height: var(--t-body-leading); } .card__link { display: inline-block; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-links-a-size); letter-spacing: var(--t-mmenu-phone-tracking); text-transform: var(--t-h1-case); color: var(--cyan); border-bottom: 1px solid rgba(0, 200, 251, 0.35); padding-bottom: 2px; transition: border-color 250ms ease, color 250ms ease; } .card__link:hover { border-color: var(--cyan); color: var(--white); } /* ============================================================ PAGE HERO — simplified sub-page hero, no parallax/SVG ============================================================ */ .page-hero { background: var(--ink-2); padding: calc(var(--nav-h) + clamp(50px, 8vw, 96px)) var(--gutter) clamp(50px, 7vw, 80px); text-align: center; } .page-hero--paper { background: var(--paper); } .page-hero--paper .page-hero__title { color: var(--ink-2); } .page-hero--paper .page-hero__sub { color: var(--muted); } .page-hero__title { font-family: var(--font-display); font-size: var(--t-page-hero-title-size); color: var(--white); text-transform: var(--t-h1-case); line-height: var(--t-pillar-num-leading); margin-bottom: 13px; } .page-hero__sub { max-width: 40em; width: fit-content; margin: 0 auto; text-align: left; color: var(--muted-light); font-size: var(--t-hero-sub-size); line-height: var(--t-body-leading); } /* ============================================================ TWO-COL — responsive two-column grid ============================================================ */ .two-col { display: grid; grid-template-columns: 1fr; gap: var(--s-two-col-gap); max-width: var(--content-max); margin: 0 auto; padding: var(--s-section-pad) var(--gutter); } .two-col--60-40 { grid-template-columns: 1fr; } @media (min-width: 821px) { .two-col { grid-template-columns: 1fr 1fr; } .two-col--60-40 { grid-template-columns: 3fr 2fr; } } /* Sits directly under a .section-head, which already opened the band. */ .two-col--tight { padding-top: 0; } /* Inside a band that closes itself (.services' own bottom padding). */ .two-col--flush { padding-bottom: 0; } /* A short column beside a tall photo: centre them on each other. */ .two-col--center { align-items: center; } /* ============================================================ EXPECT — pre-form expectation section ============================================================ */ .expect { background: var(--paper); padding-bottom: var(--s-section-pad); } /* ============================================================ PICKER — expandable service list + swappable image window ============================================================ */ .picker { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr minmax(260px, 400px); gap: var(--s-two-col-gap); align-items: start; } .picker--half { grid-template-columns: 1fr 1fr; } /* Active item: a light-blue diagonal wipe fills the row, the same gesture as the .btn hover fill (Matt 2026-08-30). isolation keeps the z-index:-1 wipe inside the item; overflow clips the skewed edge. */ .picker__item { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid rgba(6, 40, 61, 0.12); } .picker__item::before { content: ""; position: absolute; inset: 0 -20%; /* wider than the row so the skewed edges still cover it fully */ background: var(--cyan); /* the brand cyan, not ice (Matt 2026-09-02) */ transform: translateX(-160%) skewX(-12deg); transition: transform 450ms var(--ease-edge); z-index: -1; } .picker__item.is-open::before { transform: translateX(0) skewX(-12deg); } .picker__item:first-child { border-top: 1px solid rgba(6, 40, 61, 0.12); } .picker__heading { margin: 0; } .picker__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-hero-kicker-gap); padding: var(--s-picker-toggle-pad); background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: var(--t-picker-toggle-size); line-height: var(--t-start-alt-title-leading); text-transform: var(--t-h1-case); color: var(--ink); transition: color 250ms ease; } .picker__toggle:hover, .picker__toggle:focus-visible { color: var(--cyan-deep); } .picker__item.is-open .picker__toggle { color: var(--ink); } /* ink on the cyan fill */ .picker__item.is-open .picker__panel-inner p { color: var(--ink); } /* muted gray on cyan was hard to read */ .picker__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; } .picker__icon::before, .picker__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; transform: translateY(-50%); transition: transform 350ms var(--ease-edge); } .picker__icon::before { transform: translateY(-50%) rotate(90deg); } .picker__item.is-open .picker__icon::before { transform: translateY(-50%) rotate(0deg); } .picker__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease-edge); } .picker__item.is-open .picker__panel { grid-template-rows: 1fr; } .picker__panel-inner { overflow: hidden; padding: 0 var(--s-picker-pad-x); } .picker__panel-inner p { color: var(--muted); line-height: var(--t-panel-inner-p-leading); max-width: 40em; } .picker__panel-inner p { margin-bottom: 22px; } .picker__panel-inner .edge-list { margin-bottom: 22px; } .picker__panel-inner .coach-row__more { margin-bottom: 26px; } /* ============================================================ TRAINING CARDS — hub page, three linked program cards. Frame treatment matches .service__frame; here it's hover/focus-only. ============================================================ */ .training-cards { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-card-grid-gap); } .training-card { display: block; color: inherit; text-decoration: none; } .training-card__media { position: relative; margin-bottom: var(--s-card-gap); } .training-card__media img { width: 100%; height: auto; /* see .service__media img */ aspect-ratio: 19 / 20; object-fit: cover; display: block; border-radius: var(--radius-media); clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); position: relative; z-index: 1; } .training-card__frame { position: absolute; inset: -14px 14px 14px -14px; border: 2px solid var(--cyan); border-radius: var(--radius-media); clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 150ms ease; } .training-card:hover .training-card__frame, .training-card:focus-visible .training-card__frame { opacity: 1; } .training-card__title { font-family: var(--font-display); font-size: var(--t-card-title-size-2); line-height: var(--t-start-alt-title-leading); text-transform: var(--t-h1-case); color: var(--ink); } /* Routing page: the three cards live inside the photo hero (Matt 2026-09-02). */ .page-hero__cards { position: relative; z-index: 2; margin-top: var(--s-section-head-gap); padding-left: 0; /* the hero already carries the gutter */ padding-right: 0; } .page-hero--hub .page-hero__lead { margin-bottom: 0; } .page-hero--hub .training-card__title { color: var(--white); } @media (max-width: 820px) { .training-cards { grid-template-columns: 1fr; } } .picker__media { height: clamp(300px, 34vw, 420px); border-radius: var(--radius-media); overflow: hidden; clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); /* subtle edge slant */ } .picker__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms ease; } /* 50/50 variant: the image window is a fixed 4:3 beside the list instead of a viewport-scaled strip. */ .picker--half .picker__media { height: auto; aspect-ratio: 4 / 3; } /* On a navy band (.services): white labels at rest, ink on the cyan fill when open. */ .picker--dark .picker__item, .picker--dark .picker__item:first-child { border-color: rgba(255, 255, 255, 0.15); } .picker--dark .picker__toggle { color: var(--white); } .picker--dark .picker__toggle:hover, .picker--dark .picker__toggle:focus-visible { color: var(--cyan); } .picker--dark .picker__item.is-open .picker__toggle { color: var(--ink); } @media (max-width: 820px) { .picker, .picker--half { grid-template-columns: 1fr; gap: 24px; } .picker__media { order: -1; height: clamp(200px, 40vw, 280px); } .picker--half .picker__media { height: auto; } } /* ============================================================ START BODY — /start-here: "Which program" + "Whether you're looking to" share ONE continuous white band with a delicate gradient, so there is no seam between them and no diagonal cutting in under the hero (Matt 2026-09-03). ============================================================ */ .start-body { background: linear-gradient(180deg, var(--white) 0%, var(--paper) 55%, var(--ice) 100%); padding-bottom: var(--s-section-pad); } /* "Whether you're looking to..." matches the homepage's "Is EDGE right for you?" band exactly: navy ground, light type, black-and-white carousel behind it (Matt 2026-09-03). */ .goals-band { background: var(--ink); padding-bottom: var(--s-section-pad); } /* ============================================================ GOALS — centered block in a navy band ("Whether you're looking to…") ============================================================ */ .goals { max-width: 820px; margin: 0 auto; padding: clamp(30px, 4vw, 56px) var(--gutter) 0; text-align: center; } .goals h2 { font-size: var(--t-goals-h2-size); color: var(--white); margin-bottom: clamp(24px, 3vw, 35px); } .goals { position: relative; /* above the .fit-band photo panels */ z-index: 1; } /* centred box hugging its content, text left inside it (as .fit__list) */ .goals__list { list-style: none; width: fit-content; max-width: 576px; margin: var(--s-goals-list-margin); text-align: left; } .goals__list li + li { margin-top: var(--s-service-list-gap); } .goals__list li { color: var(--muted-light); line-height: var(--t-list-li-leading); padding-left: var(--s-list-check-indent); position: relative; } .goals__list li::before { /* the site's one check mark (Matt 2026-09-02) */ content: ""; position: absolute; left: 0; top: 0.4em; width: 14px; height: 10px; background: var(--cyan); clip-path: polygon(0 55%, 35% 100%, 100% 0, 35% 70%); } .goals__mission { color: rgba(255, 255, 255, 0.85); font-size: var(--t-section-head-sub-size); line-height: var(--t-panel-inner-p-leading); max-width: 34em; margin: 0 auto; } .goals__mission strong { color: var(--cyan); } /* on the white band the same block goes dark-on-light */ .goals--light h2 { color: var(--ink); } .goals--light .goals__list li { color: var(--muted); } .goals--light .goals__mission { color: var(--slate); } .goals--light .goals__mission strong { color: var(--cyan-deep); } /* ============================================================ CONTACT-ALT — phone / visit alternatives ============================================================ */ .contact-alt { background: var(--paper); padding-bottom: var(--s-section-pad); } .contact-alt__heading { font-family: var(--font-display); font-size: var(--t-contact-alt-heading-size); color: var(--ink); text-transform: var(--t-h1-case); line-height: var(--t-start-alt-title-leading); margin-bottom: 10px; } .contact-alt__detail { color: var(--muted); font-size: var(--t-rcard-blockquote-size); line-height: var(--t-contact-alt-detail-leading); max-width: 30em; } .contact-alt__detail + .contact-alt__detail { margin-top: 13px; } .contact-alt__phone { font-family: var(--font-display); font-size: var(--t-contact-alt-phone-size); color: var(--cyan); text-decoration: none; transition: color 250ms ease; } .contact-alt__phone:hover { color: var(--ink); } /* ============================================================ STEPS — numbered horizontal cards ============================================================ */ .steps { display: grid; grid-template-columns: 1fr; gap: var(--s-card-grid-gap); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } .step { background: var(--white); border: 1px solid rgba(6, 40, 61, 0.08); border-radius: var(--radius-card); padding: var(--s-card-pad); position: relative; box-shadow: 0 8px 28px -10px rgba(6, 40, 61, 0.1); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } .step:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -10px rgba(6, 40, 61, 0.18); } .step__num { font-family: var(--font-display); font-size: var(--t-step-num-size); color: var(--cyan); line-height: var(--t-pillar-num-leading); margin-bottom: 6px; } .step__title { font-family: var(--font-display); font-size: var(--t-step-title-size); color: var(--ink); text-transform: var(--t-h1-case); margin-bottom: 10px; line-height: var(--t-start-alt-title-leading); } .step__desc { color: var(--muted); font-size: var(--t-rcard-blockquote-size); line-height: var(--t-body-leading); } @media (min-width: 821px) { .steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* Legacy pages (how-it-works, small-group) put the numeral and copy as flat children of .step rather than inside a .step__body wrapper — keep those laid out as plain cards. */ .step:not(:has(.step__body)) { display: block; } .step:not(:has(.step__body)) .step__num { text-align: left; } /* ============================================================ TAG — small blog topic chip ============================================================ */ .tag { display: inline-block; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-coach-role-size); letter-spacing: var(--t-tag-tracking); text-transform: var(--t-h1-case); color: var(--cyan); background: rgba(0, 200, 251, 0.08); border: 1px solid rgba(0, 200, 251, 0.25); border-radius: var(--radius-ctrl); padding: 0.4em 0.8em; transition: background 250ms ease, border-color 250ms ease, color 250ms ease; } .tag:hover { background: rgba(0, 200, 251, 0.16); border-color: var(--cyan); color: var(--cyan); } /* ============================================================ POST-META — byline / date / read-time ============================================================ */ .post-meta { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-rcard-mono-size); letter-spacing: var(--t-title-span-tracking); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-post-meta-gap); } .post-meta__sep { color: rgba(91, 114, 133, 0.35); } /* ============================================================ CALLOUT — key takeaway box ============================================================ */ .callout { background: var(--ink); color: var(--white); border-left: 4px solid var(--cyan); border-radius: var(--s-callout-radius); padding: var(--s-start-alt-pad); max-width: 48em; margin: var(--s-callout-margin); font-size: var(--t-section-head-sub-size); line-height: var(--t-contact-alt-detail-leading); } .callout strong { color: var(--cyan); } /* ============================================================ ARTICLE BODY — prose styling for blog article content ============================================================ */ .article__body { max-width: 740px; margin: 0 auto; padding: clamp(30px, 4vw, 64px) var(--gutter); color: var(--ink); line-height: var(--t-article-body-leading); font-size: var(--t-section-head-sub-size); } .article__body h2 { font-family: var(--font-display); font-size: var(--t-body-h2-size); text-transform: var(--t-h1-case); color: var(--ink); line-height: var(--t-body-h2-leading); margin: 40px 0 16px; font-weight: var(--t-weight-400); } .article__body h2:first-child { margin-top: 0; } .article__body h3 { font-family: var(--font-display); font-size: var(--t-step-title-size); text-transform: var(--t-h1-case); color: var(--ink); line-height: var(--t-body-h2-leading); margin: 30px 0 13px; font-weight: var(--t-weight-400); } .article__body p { margin-bottom: 20px; color: var(--slate); } .article__body em { font-style: normal; color: var(--cyan-deep); } .article__body strong { color: var(--ink); font-weight: var(--t-weight-600); } .article__body ul, .article__body ol { margin: 0 0 20px 24px; color: var(--slate); } .article__body ul { list-style: disc; } .article__body ol { list-style: decimal; } .article__body li { margin-bottom: 10px; } .article__body blockquote { border-left: 3px solid var(--cyan); padding-left: 20px; margin: var(--s-body-blockquote-margin); color: var(--ink); font-style: italic; } .article__body a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 0.2em; } .article__body a:hover { color: var(--ink); } .article__body img { border-radius: var(--radius-card); margin: var(--s-body-blockquote-margin); height: auto; /* the width/height attributes otherwise pin the height while max-width scales the width */ } /* ============================================================ CARD GRID — article/link cards for topic and cross-link sections ============================================================ */ .card-grid { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) var(--s-section-pad); display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-card-grid-gap); } .card { background: var(--white); border: 1px solid rgba(6, 40, 61, 0.08); border-radius: var(--radius-card); padding: var(--s-card-pad-2); box-shadow: 0 8px 28px -10px rgba(6, 40, 61, 0.1); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); display: flex; flex-direction: column; gap: var(--s-card-gap); text-decoration: none; color: inherit; } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -10px rgba(6, 40, 61, 0.18); } .card__title { font-family: var(--font-display); font-size: var(--t-card-title-size-2); color: var(--ink); text-transform: var(--t-h1-case); line-height: var(--t-body-h2-leading); } .card__body { font-size: var(--t-alt-cols-p-size); color: var(--muted); line-height: var(--t-body-leading); } .card__link { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-coach-role-size); letter-spacing: var(--t-btn-tracking); color: var(--cyan-deep); text-transform: var(--t-h1-case); transition: color 250ms ease; } .card:hover .card__link { color: var(--cyan); } /* ============================================================ CROSS-LINKS — topic navigation band ============================================================ */ .cross-links { background: var(--paper); padding-top: 0; padding-bottom: var(--s-section-pad); } /* ============================================================ COACH ROWS — one container per coach: photo | bio + certs ============================================================ */ .coach-rows { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--s-coach-rows-gap); } /* De-carded: a stack of identical bordered boxes with the same corner stamp is the strongest template tell on these pages. Rows are now separated by a rule and differentiated by the modifiers further down. */ .coach-row { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: var(--s-coach-row-gap); align-items: center; position: relative; } .coach-row::before { display: none; } .coach-row + .coach-row { padding-top: var(--s-coach-row-divider-pad-top); border-top: 1px solid rgba(6, 40, 61, 0.12); } .coach-row--flip .coach-row__media { order: 2; } /* flip must mirror the column widths too, or the photo lands in the wide 1fr column and renders bigger than unflipped rows (Matt 2026-08-23) */ .coach-row--flip { grid-template-columns: 1fr minmax(240px, 400px); } .coach-row__media { border-radius: var(--radius-media); overflow: hidden; clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); /* subtle edge slant */ } .coach-row__media img { width: 100%; height: auto; /* aspect-ratio sizes every photo identically; row height must not (Matt 2026-08-23) */ aspect-ratio: 4 / 5; object-fit: cover; } .coach-row__role { font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-rcard-mono-size); letter-spacing: var(--t-alt-cols-h3-tracking); text-transform: var(--t-h1-case); color: var(--cyan-deep); margin-bottom: 10px; } .coach-row__body h2 { font-size: var(--t-body-h2-size-2); color: var(--ink); margin-bottom: 13px; } .coach-row__body > p { color: var(--muted); line-height: var(--t-panel-inner-p-leading); max-width: 44em; margin-bottom: 16px; } .coach-row__certs { list-style: none; display: flex; flex-direction: column; gap: var(--s-hero-proof-gap); margin: 20px 0 22px; } .coach-row__certs li { position: relative; padding-left: var(--s-list-marker-indent); font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-coach-role-size); letter-spacing: var(--t-btn-tracking); text-transform: var(--t-h1-case); color: var(--ink); } .coach-row__certs li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 2px; background: var(--cyan); transform: rotate(-8deg); } .coach-row__more { display: inline-block; font-family: var(--font-label); font-weight: var(--t-weight-600); font-size: var(--t-kicker-size); letter-spacing: var(--t-tag-tracking); text-transform: var(--t-h1-case); color: var(--cyan-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 250ms ease; } .coach-row__more:hover, .coach-row__more:focus-visible { color: var(--ink); } /* ---- Rhythm modifiers: break the repeating-row pattern ---- */ /* First "why we exist" block: photo bleeds left at full block height and rides up over the whitespace above it */ .coach-row--overlap { align-items: stretch; position: relative; z-index: 2; } .coach-row--overlap .coach-row__media { margin-left: calc(-1 * var(--gutter)); /* ride up into the section-head padding, stopping short of the heading */ margin-top: var(--s-coach-row-overlap-media-margin-top); clip-path: none; border-radius: 0; } .coach-row--overlap .coach-row__media img { aspect-ratio: auto; height: 100%; min-height: 360px; } .coach-row--overlap .coach-row__body { align-self: start; padding-top: var(--s-coach-row-overlap-body-pad-top); } /* Second "why we exist" block: the one row that keeps a box, sharpened rather than soft, with the portrait cresting its top */ .coach-row--card { background: var(--white); border: 1px solid rgba(6, 40, 61, 0.2); border-radius: var(--radius-card); padding: var(--s-coach-row-pad); } .coach-row--card .coach-row__media { overflow: visible; clip-path: none; border-radius: var(--radius-card); } .coach-row--card .coach-row__media img { margin-top: var(--s-coach-row-card-img-margin-top); border-radius: var(--radius-card); } @media (max-width: 820px) { .coach-row { grid-template-columns: 1fr; } .coach-row--flip .coach-row__media { order: 0; } .coach-row__media img { aspect-ratio: 4 / 3; } .coach-row--overlap .coach-row__media { margin-left: 0; margin-top: 0; } .coach-row--overlap .coach-row__media img { aspect-ratio: 4 / 3; height: auto; min-height: 0; } .coach-row--overlap .coach-row__body { padding-top: 0; } } /* ============================================================ COACH SPREADS — one editorial "magazine" spread per coach. A flat colour field is cut by a hard diagonal; the background- stripped cutout stands on the field and breaks across the cut; a small credit/bio block sits on the white side; and an oversized pull-quote (the loudest type here) overlaps below. Direction alternates spread to spread via .spread--flip, and the field colour rotates through the brand palette per coach. The diagonal + wedge language reuses the site's clip-path motif; nothing bleeds past the box, so there is no horizontal scroll. ============================================================ */ /* Full bleed (Matt 2026-09-02): the navy field and the white side run to the screen edges; the content stays inside the 1440 column via a padding that is the larger of the gutter and the centring margin. No corners, and no gap between spreads: the old gap is now top padding on the next spread, so each cutout still lands on its own card's bottom edge. */ .spreads { display: flex; flex-direction: column; } .spread { position: relative; isolation: isolate; overflow: hidden; /* clip the diagonal field to the box */ background: var(--white); display: grid; /* Text column rides the flat colour field; the portrait holds the far side of the diagonal. The text column is the narrower editorial measure. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "editorial portrait" "quote portrait"; align-items: start; column-gap: var(--s-spread-gap); padding: var(--s-spread-pad) max(var(--gutter), calc((100% - var(--content-max)) / 2)); /* One width per coach, read by both the portrait cap and the cut below. */ --spread-portrait-w: 500px; /* Where the cut sits at the top of the card, measured from the card's outer edge: the cutout's inner edge plus the bite the cut takes out of the figure. Tying it to the portrait rather than to a share of the viewport is what keeps the figure breaking across the cut now that the cutouts are pinned to the 1440 column (Matt 2026-09-03). Built from the same three facts the layout uses, so it tracks every width without a breakpoint: the column's outer edge, the portrait cell (1.18 of the 2fr split, less the column gap), and the cutout's own cap — whichever of the last two is smaller is how wide the image actually renders. */ --spread-col-edge: min(100% - var(--gutter), 50% + var(--content-max) / 2); --spread-cell-w: calc(0.59 * (min(100% - 2 * var(--gutter), var(--content-max)) - var(--s-spread-gap))); --spread-cut-x: calc(var(--spread-col-edge) - min(var(--spread-portrait-w), var(--spread-cell-w)) + var(--s-spread-cut-bite)); } .spread--daniel { --spread-portrait-w: 643px; } .spread--quan { --spread-portrait-w: 661px; } .spread--remi { --spread-portrait-w: 500px; } .spread + .spread { padding-top: calc(var(--s-spread-pad) + var(--s-spreads-gap)); } .spread--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); grid-template-areas: "portrait editorial" "portrait quote"; } /* The dominant diagonal: one flat colour field fills the text side, its inner edge a hard lower-left-to-upper-right cut that the portrait meets. The field is far wider than the text column, so the cut never reaches a character. */ .spread__field { position: absolute; top: 0; bottom: 0; left: 0; width: var(--spread-cut-x); z-index: -2; background: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - var(--s-spread-cut-run)) 100%, 0 100%); } .spread--flip .spread__field { left: auto; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, var(--s-spread-cut-run) 100%); } /* Thin second line echoing the main diagonal, tucked along the cut in the lower corner — a hair inside the field edge, well clear of the text column. */ .spread__accent { position: absolute; top: 0; bottom: 0; left: 0; width: var(--spread-cut-x); z-index: -1; background: var(--cyan); /* Same run as the main cut, so the hairline stays parallel to it: a 23px band held 18px inside the field edge, over the lower 38% of the card. */ clip-path: polygon( calc(100% - 0.62 * var(--s-spread-cut-run) - 41px) 62%, calc(100% - 0.62 * var(--s-spread-cut-run) - 18px) 62%, calc(100% - var(--s-spread-cut-run) - 18px) 100%, calc(100% - var(--s-spread-cut-run) - 41px) 100%); } .spread--flip .spread__accent { left: auto; right: 0; clip-path: polygon( calc(0.62 * var(--s-spread-cut-run) + 18px) 62%, calc(0.62 * var(--s-spread-cut-run) + 41px) 62%, calc(var(--s-spread-cut-run) + 41px) 100%, calc(var(--s-spread-cut-run) + 18px) 100%); } /* One palette for all three (Matt 2026-09-02: Remi's slate and Quan's darker navy read as different cards; Daniel's field is the one to match). */ .spread__field { background: var(--ink); } .spread__portrait { grid-area: portrait; align-self: end; display: flex; min-width: 0; /* pull the cutout down through the card's bottom padding so its hard bottom edge lands on the card edge instead of floating above it (Matt 2026-08-30) */ margin-bottom: calc(-1 * var(--s-spread-pad)); } .spread__portrait picture { display: block; width: 100%; } .spread__portrait img { display: block; width: 100%; max-width: var(--spread-portrait-w); /* cutouts are genuine studio res now — cap each at its own natural width so it never upscales */ height: auto; /* Each cutout is capped at its own natural width, so it cannot fill the grid cell; the slack is pushed to the inner side and the hard edge lands on the 1440 content column, the same line the rest of the page ends on. Alignment lives on the image, not on the flex container: the