/* EvolveYou home (/) — extracted from inline style blocks, 2026-09-21.
Source of truth: this file. Do NOT re-inline.
Order is DOCUMENT ORDER from the published page — later blocks
deliberately override earlier ones. Never reorder.
Rebuild: scripts/externalise-inline/extract.py
Held back (still inline, on purpose): head custom code, page footer
code, the ConsentPro text/ey26-css data block, the .ey26a-cta hider. */
/* ==== block 01/30 — was inline at byte offset 28020 ==== */
/* ===========================================================================
14. HEART ICONS -> CLOUDFRONT, AND 87% SMALLER
The two heart assets were 6250x5840 PNGs at 197 KB and 198 KB. They render
as the marquee hearts at 22px tall (.ey26-mq-item::after, background-size:
contain, 15 instances per page) and as two decorative watermarks at 6% and
4% opacity (.ey26-card-watermark 240x240, .ey26-cta-heart 375x520). A six
megapixel source for that is 395 KB of pure waste per pageview.
Resized to 600x560 and re-hosted on the media CDN:
white 197 KB -> 21 KB
blue 198 KB -> 30 KB
395 KB -> 51 KB, and those 51 KB now come off CloudFront rather than the
Webflow bandwidth allowance.
600px is deliberately generous: the largest use is 375x520 CSS px at 4%
opacity, so even a downscale there is invisible. Do not shrink further
without checking the marquee at 2x DPR.
WHY A CSS VARIABLE OVERRIDE: the originals are referenced through
--ey26-heart-w / --ey26-heart-b, declared in the page's head custom code,
which is not writable through the API. Redefining them on :root later in the
document wins the cascade at equal specificity, so every background-image use
follows automatically - including the 15 marquee pseudo-elements.
The two is twice as wide as its clipping span and holds
the same path twice, side by side; scrolling it exactly -50% lands tile
two where tile one began, so the loop is seamless with no JS. The path is
generated so both ends sit on the centre line at the same envelope
amplitude - break that and a visible kink travels past every 9 seconds.
The path is 80 quadratic half-cycles rather than a sampled polyline: a
quadratic whose control point sits at 2A peaks at exactly A, so each hump
is one curve instead of fifteen line segments. 1.6 KB instead of 14 KB,
and + two means it is only written once.
MASKED at both ends. Unmasked, the trace stopped dead at the media
column's edge and read as a cropped graphic rather than something
passing through.
===================================================================== */
.ey26a-wave{position:absolute;top:50%;left:-22%;right:-22%;transform:translateY(-50%);z-index:0;pointer-events:none;overflow:hidden;line-height:0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
/* Stroke and fill are set on the , not on the : they are
inherited properties, so they reach the cloned content inside each .
A rule targeting .ey26a-wave path would not - the clones live in shadow
trees that ordinary descendant selectors cannot reach. */
.ey26a-wave svg{display:block;width:200%;height:auto;
fill:none;stroke:var(--brand-blue);stroke-width:2.4;stroke-linecap:round;opacity:.42;
animation:ey26a-scroll 9s linear infinite}
@keyframes ey26a-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* On the dark block the brand blue sits too close to the background. */
.ey26a-dark .ey26a-wave svg{stroke:#78e5f1;opacity:.34}
/* The frame must sit above the trace, or it draws across the bezel. */
.ey26a-box .ey26-phone-inner{z-index:1}
@media screen and (max-width:991px){
.ey26a-grid,.ey26a-flip .ey26a-grid{grid-template-columns:1fr!important;gap:40px}
.ey26a-flip .ey26a-copy,.ey26a-flip .ey26a-media{order:0}
.ey26a-h3{font-size:38px}
.ey26a-block{padding:64px 0}
}
/* ---- MOBILE: the same blocks become a swipe rail -------------------
Below 767 the .ey26-fdesk run above hides itself and a CMS-driven
.ey26-frail rail of .ey26-fcard cards takes over. Three full-bleed
stacked sections next to that read as a different component, so these
blocks become cards too.
RESTYLED, NOT DUPLICATED. The obvious build is a second copy of the
content marked up as .ey26-fcard, which is what the section above does
(its rail and its desktop blocks are two Collection Lists over one
collection). Not here: a duplicate means two elements for the
same clip, two places to edit every line of copy, and the phone-frame
markup written twice. .ey26a-sec becomes the scroll container and each
.ey26a-block becomes a card instead.
Card geometry is copied from the live rail rather than guessed:
flex 0 0 88%, 22px radius, 20px padding, 14px gap, 1px ink-100 border,
0 22px 44px #0b1e220f shadow, image at aspect-ratio 3/4. Text is centred
and the bullet list and CTA are hidden, both of which match what the
.ey26-fcard cards actually render (their .ey26-fcard-rt lists are
display:none on the published site).
===================================================================== */
@media screen and (max-width:767px){
.ey26a-sec{
display:flex;flex-wrap:nowrap;gap:14px;
overflow-x:auto;scroll-snap-type:x mandatory;
padding:8px 22px 22px;background-color:var(--canvas)
}
.ey26a-sec::-webkit-scrollbar{display:none}
/* !important on the backgrounds because .ey26a-dark / .ey26a-canvas set
them at the same specificity and win on source order otherwise. */
.ey26a-block,
.ey26a-sec>.ey26a-block:first-child{
flex:0 0 88%;scroll-snap-align:center;overflow:hidden;
padding:20px!important;border-radius:22px;
border:1px solid var(--ink-100);
background-color:var(--surface)!important;
box-shadow:0 22px 44px #0b1e220f
}
/* Second card dark, matching the rail's odd/even alternation. */
.ey26a-block.ey26a-dark{background-color:var(--ink-900)!important;border-color:var(--ink-900)}
/* .ey26a-grid also carries .ey26-wrap, which brings 22px side padding and
a 1280px max-width - both wrong inside a card. */
.ey26a-grid,.ey26a-flip .ey26a-grid{
display:flex;flex-direction:column;gap:14px;
padding:0!important;max-width:none!important;text-align:center;
/* align-items:center is inherited from the desktop rule, and on a COLUMN
flexbox that centres on the cross axis, so every item shrinks to its
content width. .ey26a-copy survives because its children have real
widths; .ey26a-media collapsed to 0 and the phone vanished, because
its only children are absolutely positioned or width:100%. */
align-items:stretch
}
.ey26a-media,.ey26a-flip .ey26a-media{order:-1;width:100%}
.ey26a-copy,.ey26a-flip .ey26a-copy{order:0;align-items:center;gap:14px}
.ey26a-h3{font-size:26px;line-height:1.02}
.ey26a-body{font-size:15px;max-width:none}
/* Both hidden on the rail's own cards, so hidden here too. */
.ey26a-list,.ey26a-cta{display:none}
.ey26a-box{width:100%;max-width:none;aspect-ratio:3/4}
.ey26a-shot{width:100%;max-width:none;aspect-ratio:3/4}
/* Inside a card the trace only has the card's width to travel. */
.ey26a-wave{left:-6%;right:-6%}
.ey26a-wave svg{stroke-width:3.4}
/* Rail heading. It is a SIBLING of .ey26a-sec, not a child: below 767 that
element is the flex scroll container, so anything inside it becomes a
card in the rail. Geometry matches .ey26-frail-head above it - 56px top,
22px sides, 34px heading capped at 320px so it breaks over two lines,
and 24px below which lands on the rail's own 8px top padding for the
same 32px gap the rail above uses. */
.ey26a-mhead{display:block;background-color:var(--canvas);padding:56px 22px 24px;text-align:center}
.ey26a-mh{font-size:34px;line-height:.98;letter-spacing:.022em;max-width:320px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
/* A still trace still reads as sound; only the scroll is motion. */
.ey26a-wave svg{animation:none}
}
/* ==== block 04/30 — was inline at byte offset 84419 ==== */
/* Safeguard, not the fix: the fix is that the per-month label no longer carries a
currency code. Kept so a future currency with a longer figure drops the whole
label to the next line instead of splitting it into "/month ·" + "AUD", which is
how the AUD wrap looked. */
[class*="ey26-price-per"] { white-space: nowrap; }
/* Carrier for the monthly footnote copy - edited in the Designer, never shown. */
[class*="ey26-foot-m-src"] { display: none !important; }
/* ==== block 05/30 — was inline at byte offset 102504 ==== */
/* The container is a 148px white rounded box with 10px of padding, and that
padding IS the QR's quiet zone - scanners need the light margin, so the image
fills the content box and must not be given a negative inset or a radius of its
own. The neighbouring .ey26-qr svg rule is a leftover from an intended
render-from-attribute approach that was never built; this is the image version. */
.ey26-qr-img {
display: block;
width: 100%;
height: 100%;
image-rendering: -webkit-optimize-contrast; /* keeps the modules crisp when scaled down from 336px */
}
/* ==== block 06/30 — was inline at byte offset 112648 ==== */
/* The head custom code re-applies a translucent fill to feature images on the dark
(even-numbered) blocks, which would paint behind a transparent PNG and defeat the
alpha channel. This embed is later in the document than the head CSS. */
.ey26-fitem:nth-child(2n) [class*="ey26-fb-img"],
.ey26-frail .w-dyn-item:nth-child(2n) [class*="ey26-fcard-img"] {
background-color: transparent !important;
border-color: transparent !important;
}
/* ==== block 07/30 — was inline at byte offset 115176 ==== */
/* ===========================================================================
MOBILE PARITY + UNIFORM CARD BLOCKS + LOGO SIZING (part 1 of 2: desktop)
Lives in an embed because the page's head custom-code block is at its size
limit and rejects writes (HTTP 406).
Gotchas encoded here, all found the hard way:
1. A Collection List nests TWO elements carrying the section's grid class:
the outer wrapper AND the inner .w-dyn-items. Anything written for "the
grid" is applied TWICE.
2. Those grids bleed edge-to-edge out of .ey26-wrap using NEGATIVE side
margins, then re-apply their own 22px padding. Because of (1) the inner
node gets the same negative margin, and its own padding was silently
cancelling it. So the inner must have BOTH margin and padding zeroed.
3. The outer was a 4-column grid whose only child - the .w-dyn-list wrapper -
sat in a SINGLE column, cramming five coaches into 286px of a 1216px row.
4. repeat(4, 1fr) does NOT give equal columns: 1fr is minmax(auto, 1fr), so a
long unbreakable word widens its own column.
5. On mobile the flex child of a rail is Webflow's .w-dyn-item wrapper, NOT
the card inside it.
6. Those wrappers use display:contents, which changes layout but NOT selector
matching - so these must be DESCENDANT selectors, never child (>).
7. Making .w-dyn-item a flex container turns the card into a flex ITEM, and a
flex item's flex-basis beats width - the card's own flex-basis:78% won
over width:100%. Reset the shorthand.
======================================================================== */
/* ---- Logo: deliberately larger than the demo's 22px ---- */
[class*="ey26-logo-img"] { height: 38px !important; width: auto !important; }
[class*="ey26-logo-img-footer"] { height: 32px !important; }
[class*="ey26-logo-mark"] { width: 38px !important; height: 38px !important; }
/* ---- Uniform image boxes: fixed ratio + contain, so nothing crops and
transparent images keep working (no fill painted behind them). ---- */
[class*="ey26-fcard-img"] {
aspect-ratio: 4 / 5; width: 100% !important; height: auto !important;
object-fit: contain; border-radius: 16px;
}
/* 96%, not 100%: this override beats the class's own width, so the 4% trim to
the desktop feature screenshots has to be made here as well as on the class
(.ey26-fb-img max-width 700px -> 672px). Both regimes matter - max-width
governs wide viewports, this percentage governs narrow ones. */
[class*="ey26-fb-img"] {
aspect-ratio: 4 / 5; width: 96% !important; height: auto !important;
object-fit: contain;
}
[class*="ey26-trainer-photo-img"] {
aspect-ratio: 1 / 1.2; width: 100% !important; height: auto !important;
object-fit: contain; border-radius: 12px;
}
/* ---- Desktop feature blocks: zig-zag the image side ----
Odd blocks keep copy-left / image-right; even blocks flip so the screenshot
sits on the left. Driven by position rather than a CMS field because Webflow
cannot bind layout to a Switch - so the order of the published items decides
which side each image lands on. Only published items render, so nth-child
counts the live sequence (drafts shift this on the Designer canvas only). */
[class*="ey26-fdesk"] .w-dyn-item:nth-child(even) [class*="ey26-fgrid"] {
grid-template-columns: 1fr 1.05fr;
}
[class*="ey26-fdesk"] .w-dyn-item:nth-child(even) [class*="ey26-fcopy"] { order: 2; }
[class*="ey26-fdesk"] .w-dyn-item:nth-child(even) [class*="ey26-fmedia"] { order: 1; }
/* ---- Coaches on desktop: equal columns, equal rows, cards filling cells ---- */
[class~="ey26-trainer-grid"] > [class~="w-dyn-list"],
[class~="ey26-quote-grid"] > [class~="w-dyn-list"] { grid-column: 1 / -1; }
[class~="ey26-trainer-grid"] {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows: 1fr;
}
[class~="ey26-quote-grid"] {
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item { display: flex; align-items: stretch; min-width: 0; }
[class~="ey26-trainer-grid"] .w-dyn-item > * { width: 100%; }
/* The location and pill lines only exist for the mobile coach row. */
[class*="ey26-trainer-loc"], [class*="ey26-trainer-pill"] { display: none; }
/* ==== block 08/30 — was inline at byte offset 119520 ==== */
/* MOBILE PARITY (part 2 of 2: the <=767px block). See part 1 for the numbered
gotchas referenced below. */
@media screen and (max-width: 767px) {
/* The head block pins the logo to 22px in its own media query. */
[class*="ey26-logo-img"] { height: 30px !important; }
[class*="ey26-logo-img-footer"] { height: 26px !important; }
[class*="ey26-logo-mark"] { width: 30px !important; height: 30px !important; }
/* The inner .w-dyn-items must carry no box of its own - see notes 1 and 2. */
[class~="ey26-frail"].w-dyn-items,
[class~="ey26-quote-grid"].w-dyn-items,
[class~="ey26-trainer-grid"].w-dyn-items {
padding: 0 !important;
margin: 0 !important;
}
/* ---- Horizontal rails: features + reviews only ---- */
[class~="ey26-frail"],
[class~="ey26-quote-grid"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
grid-template-columns: none !important;
grid-auto-rows: auto;
gap: 10px !important;
overflow-x: auto !important;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
/* Padding on the OUTER node only. Side padding stays 22px so the first card
lines up with the section headline above it. */
[class~="ey26-frail"]:not(.w-dyn-items),
[class~="ey26-quote-grid"]:not(.w-dyn-items) { padding: 8px 22px 22px !important; }
[class~="ey26-frail"]::-webkit-scrollbar,
[class~="ey26-quote-grid"]::-webkit-scrollbar { display: none; }
[class~="ey26-frail"] .w-dyn-item { flex: 0 0 88% !important; }
[class~="ey26-quote-grid"] .w-dyn-item { flex: 0 0 92% !important; }
[class~="ey26-frail"] .w-dyn-item,
[class~="ey26-quote-grid"] .w-dyn-item {
display: flex !important;
scroll-snap-align: center;
min-width: 0;
}
/* flex must be reset here, not just width - see note 7. */
[class~="ey26-frail"] .w-dyn-item > *,
[class~="ey26-quote-grid"] .w-dyn-item > * {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
[class~="ey26-quote-card"] { padding: 22px !important; border-radius: 22px !important; }
/* ---- Coaches: the demo's VERTICAL stack, not a rail ---- */
[class~="ey26-trainer-grid"] {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
overflow-x: visible !important;
scroll-snap-type: none !important;
grid-template-columns: none !important;
}
/* 24px above the first row. The old 64px was this value landing on both
nodes (note 1), not a design choice. */
[class~="ey26-trainer-grid"]:not(.w-dyn-items) { padding: 24px 22px 0 !important; }
[class~="ey26-trainer-grid"] .w-dyn-item {
flex: 0 0 auto !important;
width: 100% !important;
display: block !important;
}
[class~="ey26-trainer-card"] {
position: relative; overflow: hidden;
display: grid !important;
grid-template-columns: 120px 1fr;
grid-template-rows: auto auto auto auto;
column-gap: 14px; row-gap: 4px;
align-content: center;
padding: 14px 58px 14px 14px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 18px !important;
}
[class~="ey26-trainer-card"] img[class*="ey26-trainer-photo-img"] {
grid-column: 1; grid-row: 1 / -1; align-self: center;
aspect-ratio: 1 / 1.2;
object-fit: cover !important;
border-radius: 12px;
margin: 0 !important;
}
[class*="ey26-trainer-loc"] {
display: block; grid-column: 2; grid-row: 1;
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
[class*="ey26-trainer-name"] {
grid-column: 2; grid-row: 2;
font-size: 22px !important; line-height: 1.05;
text-transform: uppercase; color: #FFF;
}
[class*="ey26-trainer-spec"] {
grid-column: 2; grid-row: 3;
font-size: 13px !important; color: rgba(255,255,255,0.78);
}
[class*="ey26-trainer-pill"] {
display: inline-block; grid-column: 2; grid-row: 4; justify-self: start;
margin-top: 4px; padding: 4px 10px; border-radius: 999px;
background: rgba(0,218,243,0.16); color: #00DAF3;
font-size: 11px; font-weight: 600;
}
[class*="ey26-trainer-meta"] { display: none !important; }
/* Accent bar. The demo colours this per coach from the CMS accent field, but
Webflow will not bind a Color field to text and CSS cannot read a CMS value
per item, so it is Active Blue throughout. */
[class~="ey26-trainer-card"]::before {
content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
width: 3px; border-radius: 2px; background: #00DAF3;
}
[class~="ey26-trainer-card"]::after {
content: '\2192'; position: absolute; right: 14px; top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
display: grid; place-items: center; font-size: 15px;
}
}
/* ==== block 09/30 — was inline at byte offset 124699 ==== */
/* Mobile nav = logo + burger only, matching the demo (MOBILE TOP NAV: a 60px bar
holding Logo and a 44x44 menu button, nothing else). The header CTA wrapped onto two
lines once the logo was enlarged, and it is redundant on mobile: the hero CTA is above
the fold, the sticky bottom bar appears after 640px of scroll, and the drawer carries
both Sign in and Start 7 days free. Only the button is hidden - .ey26-burger is a
sibling inside .ey26-nav-actions, so the container itself must stay visible. */
@media screen and (max-width: 767px) {
[class~="ey26-nav-actions"] [class~="ey26-btn"] { display: none !important; }
}
/* Reviews on desktop: the 12-column grid carries no span on the collection items, so
each card occupied a single column (90px wide, and ~1150px tall once the text
wrapped). Three reviews across the row is span 4 each. */
@media screen and (min-width: 768px) {
[class~="ey26-quote-grid"] .w-dyn-item {
grid-column: span 4;
display: flex;
align-items: stretch;
min-width: 0;
}
[class~="ey26-quote-grid"] .w-dyn-item > * { width: 100%; }
}
/* ==== block 10/30 — was inline at byte offset 126753 ==== */
/* ===========================================================================
DESKTOP DESIGN PARITY (part 1 of 4: measures and section spacing)
Values measured off the demo running locally:
desktop/assets/a0875163.js - nav, hero, marquee, press, features
desktop/assets/50e66274.js - TrainerCard, social, pricing, FAQ, CTA, footer
Scoped to min-width 768px so the mobile coach stack is untouched.
======================================================================== */
@media screen and (min-width: 768px) {
[class~="ey26-wrap"] { max-width: 1320px !important; }
[class~="ey26-faq"] [class~="ey26-wrap"],
[class*="ey26-pricing-inner"] { max-width: 1080px !important; }
[class*="ey26-nav-inner"] { height: 76px !important; }
[class~="ey26-hero"] { padding-top: 140px !important; padding-bottom: 80px !important; }
[class~="ey26-hero-h1"] { font-size: 80px !important; }
[class~="ey26-stats"] { padding-top: 0 !important; padding-bottom: 80px !important; }
[class~="ey26-press"] { padding-top: 28px !important; padding-bottom: 28px !important; }
[class~="ey26-social"],
[class~="ey26-faq"] { padding-top: 140px !important; padding-bottom: 140px !important; }
[class~="ey26-social"] [class~="ey26-h2"] { font-size: 84px !important; }
[class~="ey26-faq"] [class~="ey26-h2"] { font-size: 56px !important; }
[class*="ey26-faq-q"] { font-size: 24px !important; }
[class~="ey26-footer"] { padding-top: 80px !important; }
/* COACHES - compacted to read as one screenful (1334px -> ~800px):
section padding 140 -> 56, heading 60 -> 44, head margin 56 -> 28,
card aspect 4/5 -> 1/1, grid gap 24 -> 18, measure 1320 -> 1080.
Portrait-square cards are kept; landscape would crop the coaches. */
[class~="ey26-trainers"] { padding-top: 72px !important; padding-bottom: 72px !important; }
[class~="ey26-trainers"] [class~="ey26-h2"] { font-size: 44px !important; }
[class~="ey26-trainers"] [class~="ey26-section-head"] { margin-bottom: 28px !important; }
[class~="ey26-trainers"] [class*="ey26-trainers-lede"] { margin-top: 10px !important; }
[class~="ey26-trainer-grid"] { gap: 18px !important; }
[class~="ey26-trainers"] { scroll-margin-top: 90px; }
[class~="ey26-trainer-grid"] .w-dyn-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
}
/* ==== block 11/30 — was inline at byte offset 129149 ==== */
/* DESKTOP DESIGN PARITY (part 2 of 4: coach bento overlay card) */
@media screen and (min-width: 768px) {
/* --- The card: photo fills it, text overlaid, bottom-aligned --- */
[class~="ey26-trainer-card"] {
position: relative;
overflow: hidden;
border-radius: 24px !important;
background: #0E2A33 !important;
border: none !important;
aspect-ratio: 1 / 1;
height: 100%;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
padding: 20px !important;
}
[class~="ey26-trainer-card"] img[class*="ey26-trainer-photo-img"] {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
border-radius: 0 !important;
margin: 0 !important;
z-index: 0;
transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
[class~="ey26-trainer-card"]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11,30,34,0.80) 0%, rgba(11,30,34,0.20) 40%, rgba(11,30,34,0) 60%);
pointer-events: none;
z-index: 1;
}
[class~="ey26-trainer-card"] > *:not(img) { position: relative; z-index: 2; }
/* Specialty becomes the pill badge, top-left. White on a blurred translucent
fill rather than the accent, because it sits over the bright part of the
photograph. Needs !important on position: the `> *:not(img)` rule above
scores higher thanks to :not(). */
[class~="ey26-trainer-card"] [class*="ey26-trainer-spec"] {
position: absolute !important;
top: 16px; left: 16px; right: auto; bottom: auto;
width: auto;
display: inline-block !important;
padding: 6px 10px !important;
border-radius: 999px;
background: rgba(255,255,255,0.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 10px !important;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFF !important;
margin: 0 !important;
z-index: 2;
}
[class~="ey26-trainer-card"] [class*="ey26-trainer-name"] { order: 1; }
[class~="ey26-trainer-card"] [class*="ey26-meet"] { order: 2; }
[class~="ey26-trainer-card"] [class*="ey26-trainer-name"] {
font-size: 26px !important;
line-height: 0.95;
text-transform: uppercase;
color: #FFF !important;
margin: 0 !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item:first-child [class*="ey26-trainer-name"] {
font-size: 36px !important;
}
/* Programme line, credentials and location are detail-view / mobile fields. */
[class~="ey26-trainer-card"] [class*="ey26-trainer-pill"] { display: none !important; }
[class~="ey26-trainer-card"] [class*="ey26-trainer-meta"] { display: none !important; }
[class~="ey26-trainer-card"] [class*="ey26-trainer-loc"] { display: none !important; }
[class~="ey26-trainer-card"] [class*="ey26-meet"] {
margin-top: 6px;
font-family: Widescreen, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
opacity: 0.7;
transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
}
}
/* ==== block 12/30 — was inline at byte offset 132445 ==== */
/* DESKTOP DESIGN PARITY (part 3 of 4: hover states)
Gated on (hover: hover) and (pointer: fine) so a tap never leaves a card stuck
hovered. Transform/shadow only: stays on the compositor. */
@media (hover: hover) and (pointer: fine) {
[class~="ey26-trainer-card"],
[class~="ey26-fcard"],
[class~="ey26-quote-card"] {
overflow: hidden;
transition: transform 280ms cubic-bezier(.2,.8,.2,1),
box-shadow 280ms cubic-bezier(.2,.8,.2,1);
}
[class~="ey26-trainer-card"]:hover {
transform: translateY(-3px);
box-shadow: 0 24px 60px rgba(11,30,34,0.28);
}
[class~="ey26-trainer-card"]:hover::before {
content: '';
position: absolute;
inset: 0;
border-radius: 24px;
box-shadow: inset 0 0 0 2px #00C3D7;
pointer-events: none;
z-index: 3;
}
[class~="ey26-trainer-card"]:hover img[class*="ey26-trainer-photo-img"] { transform: scale(1.04); }
[class~="ey26-trainer-card"]:hover [class*="ey26-meet"] { opacity: 1; }
[class~="ey26-fcard"]:hover,
[class~="ey26-quote-card"]:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(11,30,34,0.10);
}
/* Underline-on-hover.
These MUST use exact class tokens ([class~=]). A substring match on
"ey26-nav-link" also matches the CONTAINER,
which then got its own 481px-wide ::after - and because hovering any link
also hovers the container, the result was one solid rule under the whole
menu. */
[class~="ey26-nav-link"],
[class~="ey26-footer-link"],
[class~="ey26-signin"] {
position: relative;
transition: color 160ms ease;
}
[class~="ey26-nav-link"]::after,
[class~="ey26-footer-link"]::after {
content: '';
position: absolute;
left: 0; bottom: -3px;
width: 100%; height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
[class~="ey26-nav-link"]:hover::after,
[class~="ey26-footer-link"]:hover::after { transform: scaleX(1); }
[class*="ey26-faq-item"] { transition: background-color 200ms ease; }
[class*="ey26-faq-item"]:hover { background-color: rgba(0,195,215,0.04); }
[class*="ey26-cur-btn"]:hover, [class*="ey26-toggle-btn"]:hover { transform: translateY(-1px); }
[class*="ey26-press-item"] { transition: color 200ms ease, opacity 200ms ease; }
[class*="ey26-press-item"]:hover { opacity: 1; color: var(--ink-700, #1F3940); }
}
@media (prefers-reduced-motion: reduce) {
[class~="ey26-trainer-card"]:hover,
[class~="ey26-fcard"]:hover,
[class~="ey26-quote-card"]:hover,
[class~="ey26-trainer-card"]:hover img[class*="ey26-trainer-photo-img"],
[class*="ey26-cur-btn"]:hover,
[class*="ey26-toggle-btn"]:hover { transform: none !important; }
}
/* ==== block 13/30 — was inline at byte offset 136185 ==== */
/* Mobile feature-card bullets. The demo's MFeatures card carries three ticked
bullets under the body copy (8px gap, 13px text, an 18px round tick); the
Webflow card had no bullet element at all, so a RichText bound to the CMS
Bullets field was added and is styled here to match.
Ticks are drawn with ::before rather than an icon so nothing extra loads. */
[class*="ey26-fcard-rt"] ul {
list-style: none; padding: 0; margin: auto 0 0;
display: flex; flex-direction: column; gap: 8px;
}
[class*="ey26-fcard-rt"] li {
display: flex; align-items: center; gap: 10px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; line-height: 1.4;
color: var(--ink-600, #3C606F);
}
[class*="ey26-fcard-rt"] li::before {
content: '\2713'; flex-shrink: 0;
width: 18px; height: 18px; border-radius: 50%;
background: var(--brand-blue-wash, #ECFAFB);
color: var(--brand-blue-press, #008E9D);
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800;
}
[class~="ey26-frail"] .w-dyn-item:nth-child(2n) [class*="ey26-fcard-rt"] li {
color: rgba(255,255,255,0.74);
}
[class~="ey26-frail"] .w-dyn-item:nth-child(2n) [class*="ey26-fcard-rt"] li::before {
background: rgba(0,218,243,0.22); color: #00DAF3;
}
/* Decorative heart watermarks - stacking.
The head CSS gives .ey26-hero .ey26-wrap, .ey26-social .ey26-wrap and
.ey26-faq .ey26-wrap position:relative; z-index:1 so each section's heart
stays behind content. .ey26-trainers was omitted, so its .ey26-wrap was static
and the watermark painted OVER the coach cards. The CTA needed the same. */
[class~="ey26-trainers"] [class~="ey26-wrap"] { position: relative; z-index: 1; }
[class~="ey26-trainers"]::after,
[class~="ey26-trainers"]::before { z-index: 0; }
[class*="ey26-cta-inner"] { position: relative; z-index: 1; }
/* CTA heart watermark. This was rendering as a hard white shape straight through
the QR code and the "scan to download" label. Four separate faults:
opacity was 1, not the design's 0.04;
left:100px was set alongside right:-100px, and left wins in LTR, so it sat
over the middle of the block instead of bleeding off the corner;
the box was 390x520 against artwork that is 1280x1195 (ratio 1.071), so it
was also squashed ~30% - hence object-fit:contain plus a square 520 box;
z-index/pointer-events were auto, so it painted above content and swallowed
taps meant for the QR.
The parent already has overflow:hidden, so the oversized box clips to a corner
bleed exactly as the demo does. */
[class*="ey26-cta-heart"] {
opacity: 0.04 !important;
object-fit: contain !important;
top: auto !important;
left: auto !important;
right: -100px !important;
bottom: -120px !important;
width: 520px !important;
height: 520px !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Card edge legibility. All five cards in the features rail are the same width -
304.48px at 390px, verified per card with 0.00px spread - but the odd-numbered
ones are white (#FFF) on a #FAFBFC canvas, a 5/255 difference, so their right
edge is invisible and the card reads as wider than the dark ones beside it.
The demo's 1px ink-100 border is too faint at this contrast, so the light cards
step up one notch to ink-200. Geometry untouched. */
[class~="ey26-frail"] .w-dyn-item:nth-child(2n+1) [class~="ey26-fcard"] {
border-color: var(--ink-200, #DCE4E8) !important;
}
/* ==== block 14/30 — was inline at byte offset 139732 ==== */
@media screen and (max-width: 767px) {
/* Hero rating row: the five overlapping avatar circles were 132px of a 346px
row, forcing "916+ reviews · App Store 4.9" onto three lines. Dropping the
avatars on mobile gets that back to one line. Stars and count are kept. */
[class~="ey26-avatars"] { display: none !important; }
/* Coaches subheader: demo mobile lede is 16px on a 380px measure. */
[class*="ey26-trainers-lede"] { font-size: 16px !important; max-width: 380px !important; }
/* The section head's own 56px bottom margin is not needed here - the coach
stack supplies its 24px top padding. */
[class~="ey26-trainers"] [class~="ey26-section-head"] { margin-bottom: 0 !important; }
/* Sticky bottom bar - liquid glass.
The bar was solid #0B1E22. Glass needs three things working together, not
just blur: a translucent tint so the page shows through, the blur itself,
and a 1px inner top highlight which is what actually reads as a glass edge.
Saturation is lifted so colour passing underneath stays lively rather than
going grey. The tint is held at 0.62 because the bar travels over both the
light canvas and the dark sections and its label is white - much more
transparent and the text stops holding up over white.
Note the visible bar is .ey26-sticky-inner; .ey26-sticky-cta is a transparent
positioning wrapper, so styling that instead does nothing. */
[class*="ey26-sticky-inner"] {
background: rgba(11, 30, 34, 0.62) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14) !important;
box-shadow:
0 22px 48px rgba(11, 30, 34, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
/* Without backdrop-filter there is no blur to hide behind, so fall back to a
nearly opaque bar rather than white text on a see-through panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
[class*="ey26-sticky-inner"] { background: rgba(11, 30, 34, 0.94) !important; }
}
}
/* ==== block 15/30 — was inline at byte offset 141960 ==== */
/* ===========================================================================
DESIGN SYSTEM - ONE ACCENT + UPPERCASE TRACKING + COACHES MEASURE
======================================================================== */
/* 1. ONE ACCENT
The page was painting five competing hues: Active Blue #00C3D7 (37 uses),
coral #FF6B6B (9), and three hero-avatar pastels. joinladder.com paints
exactly one accent (#E6FF00, 176 uses) against a neutral scale; collapsing to
a single accent is the cheapest change that reads as expensive.
The CMS accent-colour fields on all Features and Trainers were set to #00C3D7
alongside this. Coral now appears nowhere and stays reserved for alerts.
Note #00C3D7 is what this build paints; the brand kit calls Active Blue
#00DAF3. That discrepancy predates this change and is left alone. */
.ey26-fitem:nth-child(2n) [class*="ey26-fb-eyebrow"],
[class~="ey26-frail"] .w-dyn-item:nth-child(2n) [class*="ey26-fcard-eyebrow"] {
color: #00C3D7 !important;
}
/* On an Active Blue fill the label goes Deep, not white - white on #00C3D7 is
about 1.9:1 and unreadable. */
[class*="ey26-price-badge"] {
background-color: #00C3D7 !important;
color: #002135 !important;
}
[class*="ey26-avatar"]:not([class*="ey26-avatars"]) {
background-color: #DCE4E8 !important;
background-image: none !important;
}
/* The logo anchor set no colour, so it inherited the UA default link blue. */
[class~="ey26-logo"] { color: inherit !important; }
/* 3. UPPERCASE TRACKING
Every uppercase display class carried NEGATIVE tracking (-0.005 to -0.02em).
Negative tracking suits lowercase, where ascenders and descenders create
rhythm; caps are uniform rectangles, so tightening makes them collide. Ladder
tracks its uppercase display at +1.2 to +1.5px on 48-60px (~+0.025em).
Large sizes need proportionally less, hence two steps. Sentence-case text is
untouched and keeps its negative tracking. */
[class~="ey26-hero-h1"],
[class~="ey26-h2"],
[class*="ey26-price-h"] { letter-spacing: 0.015em !important; }
[class~="ey26-hero-h1-m"],
[class*="ey26-fb-h"],
[class*="ey26-cta-h"],
[class*="ey26-frail-h"],
[class*="ey26-fcard-h"],
[class*="ey26-mq-item"],
[class*="ey26-faq-q"],
[class*="ey26-trainer-name"],
[class*="ey26-drawer-link"] { letter-spacing: 0.022em !important; }
/* COACHES MEASURE - final step of the "fit one screen" work.
The section started at 1334px against an ~800px viewport. Trimming padding,
heading size and card aspect got it to 996; a narrower grid measure took it to
844. The last came from the heading: .ey26-section-head is capped at 760px
site-wide, which forced the 44px heading onto two lines (81px). Widening only
the coaches heading puts it on one line - the lede keeps its own 620px measure
so the paragraph still has a comfortable reading width.
The section runs at 1080px, the same width Pricing and FAQ already use. */
@media screen and (min-width: 768px) {
[class~="ey26-trainers"] [class~="ey26-wrap"] { max-width: 1080px !important; }
[class~="ey26-trainers"] { padding-top: 56px !important; padding-bottom: 56px !important; }
[class~="ey26-trainers"] [class~="ey26-section-head"] { max-width: 1000px !important; }
[class~="ey26-trainers"] [class*="ey26-trainers-lede"] { max-width: 620px !important; }
}
/* ==== block 16/30 — was inline at byte offset 145340 ==== */
/* ===========================================================================
COACH DETAIL MODAL (part 1 of 3: styles)
Matches the demo's TrainerSheet (50e66274.js): photo panel on the left with
the specialty and name over it, content panel on the right with CREDENTIALS /
BIO / SIGNATURE PROGRAMME / WHAT MEMBERS SAY and two actions.
Everything is populated from the card that was clicked - the CMS has already
rendered each coach's fields into the card, including two hidden carriers for
Bio and Member quote, so no second data fetch is needed.
Sections whose field is empty are hidden rather than filled with placeholder
prose: a fabricated bio or an invented member quote attached to a real, named
coach is not something to ship.
======================================================================== */
#ey26-coach-modal {
position: fixed; inset: 0; z-index: 300;
display: none; align-items: center; justify-content: center;
padding: 24px;
background: rgba(11,30,34,0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
}
#ey26-coach-modal.is-open { display: flex; opacity: 1; }
#ey26-coach-modal .eycm-panel {
width: min(1080px, 94vw);
max-height: 90vh; overflow: hidden;
background: #FFF; border-radius: 24px;
box-shadow: 0 24px 64px rgba(11,30,34,0.32);
display: grid; grid-template-columns: 0.85fr 1fr;
transform: translateY(24px);
transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
#ey26-coach-modal.is-open .eycm-panel { transform: translateY(0); }
/* --- Left: photo with the name over it --- */
#ey26-coach-modal .eycm-media {
position: relative; background: #0E2A33; overflow: hidden; min-height: 420px;
}
#ey26-coach-modal .eycm-media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
#ey26-coach-modal .eycm-media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(11,30,34,0.78) 0%, rgba(11,30,34,0) 55%);
}
#ey26-coach-modal .eycm-media-txt {
position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2;
}
#ey26-coach-modal .eycm-spec {
font-family: Widescreen, sans-serif; font-size: 12px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: #00C3D7;
}
#ey26-coach-modal .eycm-name {
font-family: Widescreen, sans-serif; font-size: 44px; font-weight: 800;
line-height: 0.95; letter-spacing: 0.015em;
text-transform: uppercase; color: #FFF; margin-top: 8px;
}
/* --- Right: content --- */
#ey26-coach-modal .eycm-body {
padding: 40px 44px; overflow-y: auto;
display: flex; flex-direction: column; gap: 24px; position: relative;
}
#ey26-coach-modal .eycm-close {
position: absolute; top: 20px; right: 20px;
width: 40px; height: 40px; border-radius: 50%;
background: #F5F8F9; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px; line-height: 1; color: #0C3348;
transition: background 160ms ease;
}
#ey26-coach-modal .eycm-close:hover { background: #DCE4E8; }
#ey26-coach-modal .eycm-label {
font-family: Widescreen, sans-serif; font-size: 12px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: #8AA1AB;
margin-bottom: 6px;
}
#ey26-coach-modal .eycm-text {
font-family: Widescreen, sans-serif; font-size: 16px; line-height: 1.55; color: #1D4459;
}
#ey26-coach-modal .eycm-quote {
font-family: Widescreen, sans-serif; font-size: 18px; font-weight: 700;
line-height: 1.35; color: #002135;
}
#ey26-coach-modal .eycm-prog {
display: flex; align-items: center; gap: 18px;
padding: 20px; border-radius: 16px;
background: rgba(0,195,215,0.08);
border: 1px solid rgba(0,195,215,0.20);
}
#ey26-coach-modal .eycm-prog-mark {
width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
background: #00C3D7; color: #002135;
display: inline-flex; align-items: center; justify-content: center;
font-family: Widescreen, sans-serif; font-weight: 800; font-size: 18px;
}
#ey26-coach-modal .eycm-prog-name {
font-family: Widescreen, sans-serif; font-size: 20px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.015em; color: #002135;
}
#ey26-coach-modal .eycm-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
#ey26-coach-modal .eycm-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; padding: 0 22px; border-radius: 10px;
font-family: Widescreen, sans-serif; font-size: 14px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
text-decoration: none; cursor: pointer;
transition: all 120ms cubic-bezier(.2,.8,.2,1);
}
#ey26-coach-modal .eycm-btn-primary { background: #00C3D7; color: #002135; border: none; }
#ey26-coach-modal .eycm-btn-primary:hover { background: #00ACBE; }
#ey26-coach-modal .eycm-btn-secondary { background: #FFF; color: #002135; border: 1.5px solid #DCE4E8; }
#ey26-coach-modal .eycm-btn-secondary:hover { background: #F5F8F9; }
/* Cards are interactive now that they open something. */
@media (hover: hover) and (pointer: fine) {
[class~="ey26-trainer-card"] { cursor: pointer; }
}
/* Stack on small screens; the photo becomes a banner. */
@media screen and (max-width: 767px) {
#ey26-coach-modal { padding: 0; }
#ey26-coach-modal .eycm-panel {
grid-template-columns: 1fr; width: 100%; max-height: 100vh; border-radius: 0;
}
#ey26-coach-modal .eycm-media { min-height: 300px; }
#ey26-coach-modal .eycm-name { font-size: 34px; }
#ey26-coach-modal .eycm-body { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
#ey26-coach-modal, #ey26-coach-modal .eycm-panel { transition: none; }
#ey26-coach-modal .eycm-panel { transform: none; }
}
/* ==== block 17/30 — was inline at byte offset 162159 ==== */
/* ---- Band 1: light, copy left (default) - only the join spacing changes ---- */
.ey26-fdesk .ey26-fitem:nth-child(1) .ey26-fblock{padding-bottom:56px!important}
/* ---- Band 2: light, copy RIGHT ---- */
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fblock{background-color:var(--surface)!important;padding-top:56px!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fgrid{grid-template-columns:1fr 1.05fr!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fcopy{order:2!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fmedia{order:1!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fb-h{color:#0B1E22!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fb-body{color:#3A555C!important}
.ey26-fdesk .ey26-fitem:nth-child(2) [class*="ey26-fb-eyebrow"]{color:#008E9D!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fb-cta.ey26-btn-primary{background-color:#00C3D7!important;color:#FFF!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fb-rt li{color:#1F3940!important}
/* The tick. Without this it keeps the dark theme's rgba(255,255,255,.1) chip and
rgba(255,255,255,.72) glyph, i.e. white on a white band - invisible, not missing. */
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fb-rt li::before{background:var(--ink-100)!important;color:var(--ink-500)!important}
.ey26-fdesk .ey26-fitem:nth-child(2) .ey26-fblock::before{color:rgba(11,30,34,.03)!important;left:-20px!important;right:auto!important}
/* ==== block 18/30 — was inline at byte offset 163632 ==== */
/* PROGRAMS BANDING (part 2 of 2) - bands 3+, joins and the seam overlap */
/* ---- Band 3+: dark, copy LEFT (undoing the flip the dark treatment brings) ---- */
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fblock{background-color:var(--deep)!important;padding-bottom:56px!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fgrid{grid-template-columns:1.05fr 1fr!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fcopy{order:0!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fmedia{order:0!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-h{color:#FFF!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-body{color:rgba(255,255,255,.74)!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) [class*="ey26-fb-eyebrow"]{color:#00C3D7!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-cta.ey26-btn-primary{background-color:#FFF!important;color:#0B1E22!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) [class*="ey26-fb-img"]{background-color:transparent!important;border-color:transparent!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-rt li{color:rgba(255,255,255,.88)!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-rt li::before{background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.72)!important}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fblock::before{color:rgba(255,255,255,.03)!important;left:auto!important;right:-20px!important}
/* ---- Tighter joins where two bands share a colour ----
120px + 120px of stacked padding reads as dead space when there is no colour
change to justify it. Trimmed to 56px a side at the light|light join (bands
1-2) and the dark|dark join (band 3 to Trainers). The light-to-dark join (band
2 to 3) keeps its full padding: that one is a real transition, and band 3's
image needs the room to hang up into it. */
.ey26-trainers{padding-top:56px!important}
/* ---- Seam overlap: band 3's image hangs up over the light/dark border ----
The translate has to exceed the block's 120px top padding before anything
crosses the boundary - at -90px the image merely sat 30px inside its own band.
-190px puts roughly 70px of it over the border into the white band above.
overflow-x:clip rather than overflow:visible - the block has a decorative
::before at right:-20px, and letting that escape sideways adds page-wide
horizontal scroll. clip on x still permits the vertical overflow.
translateY rather than a negative margin so the row height is unchanged and
the copy stays centred against the band rather than against the displaced
image. */
@media (min-width:992px){
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fblock{overflow-x:clip;overflow-y:visible}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fmedia{position:relative;z-index:3}
.ey26-fdesk .ey26-fitem:nth-child(n+3) .ey26-fb-img{transform:translateY(-190px)}
}
/* ==== block 19/30 — was inline at byte offset 166560 ==== */
/* ============================================================
HOME 2026 v2 - OVERRIDES (loaded last, after the head block)
NOTE: the mobile hero (section 7) and the mobile coach tiles
now live in NATIVE Webflow styles on the Mobile breakpoint,
so they render on the Designer canvas. What remains here is
what Webflow has no UI for, or what an earlier embed / the
head block would otherwise overrule.
============================================================ */
/* 1. Marquee: EY heart mark between each phrase. */
.ey26-mq-item::after{
content:"";
display:inline-block;
width:26px; height:26px;
margin-left:40px;
flex-shrink:0;
background-image:var(--ey26-heart-w);
background-repeat:no-repeat;
background-size:contain;
background-position:50% 50%;
opacity:.78;
}
@media screen and (max-width:767px){
.ey26-mq-item::after{width:20px;height:20px;margin-left:26px}
}
/* 2. Drop the oversized 01 / 02 watermark numerals behind the
feature bands. */
.ey26-fblock::before{content:none !important}
/* 3. No role pill on the desktop coach cards. */
@media screen and (min-width:768px){
[class~="ey26-trainer-card"] [class*="ey26-trainer-spec"]{display:none !important}
}
/* 4. Coach modal: when a signature-programme image is injected the
tile must show the artwork only, not the initials behind it. */
#ey26-coach-modal .eycm-prog-mark.eycm-prog-mark-img{
padding:0;
overflow:hidden;
background:transparent !important;
font-size:0 !important;
}
#ey26-coach-modal .eycm-prog-mark .eycm-prog-img{
display:block;
width:100%; height:100%;
object-fit:cover;
border-radius:12px;
}
/* 5. Final CTA lede: the element carries only the -1 combo, which
sets no type, so it fell back to Arial at browser default. */
[class*="ey26-cta-lede"]{
font-family:Widescreen,sans-serif;
font-size:19px;
}
@media screen and (max-width:767px){
[class*="ey26-cta-lede"]{font-size:16px}
}
/* 6. App Store rating stat: the star is drawn by CSS (the counter
script strips it from the text so it never animates). */
.ey26-stat-value.ey26-stat-has-star::after{
content:"\2605";
font-size:.6em;
line-height:1;
vertical-align:.1em;
margin-left:.14em;
}
/* ============================================================
7. MOBILE HERO - remainder only.
============================================================ */
@media screen and (max-width:767px){
/* The head block also sets .ey26-hero-h1-m at <=767 (52px/0.94),
and head custom code loads after the Webflow stylesheet, so it
beats the native Mobile styles at equal specificity. These three
properties therefore have to stay here to win. Keep them in sync
with the Designer values or canvas and live will drift. */
.ey26-hero-h1-m{
font-size:34px !important;
line-height:1.04 !important;
letter-spacing:-.01em !important;
}
/* Gradient clipped to the text: Webflow has no UI for
background-clip. The class carries a solid #4B9019 so the
canvas shows the right colour. */
.ey26-hero-guarantee{
background-image:linear-gradient(90deg,#0F7882 0%,#4B9019 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
/* The desktop shot is wrapped in an embed inside the media block. */
.ey26-hero2-media > .w-embed{display:none !important}
}
/* ============================================================
8. MOBILE ONLY - section trims.
8c duplicates native Mobile styles on purpose: an earlier
embed styles the coach card with !important, so these have
to be here to win on the live page. The native copies are
what makes the Designer canvas show the same thing.
============================================================ */
@media screen and (max-width:767px){
/* 8a. Stat grid above the scrolling banner: not on mobile. */
.ey26-stats{display:none !important}
/* 8b. Feature cards: headline + short body only, no tick list. */
[class*="ey26-fcard-rt"]{display:none !important}
/* 8c. Coach tiles, two up. */
[class~="ey26-trainer-grid"]{
display:grid !important;
grid-template-columns:1fr 1fr !important;
flex-direction:row !important;
gap:12px !important;
align-items:stretch !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item{
width:auto !important;
min-width:0;
display:block !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item:first-child{grid-column:span 2}
[class~="ey26-trainer-card"]{
position:relative;
overflow:hidden;
aspect-ratio:1/1.18;
height:100%;
flex-direction:column;
justify-content:flex-end;
gap:0;
grid-template-columns:none !important;
grid-template-rows:none !important;
display:flex !important;
padding:12px !important;
background:#0e2a33 !important;
border:0 !important;
border-radius:18px !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item:first-child [class~="ey26-trainer-card"]{
aspect-ratio:4/3;
padding:16px !important;
}
[class~="ey26-trainer-card"] img[class*="ey26-trainer-photo-img"]{
position:absolute;
inset:0;
z-index:0;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
object-fit:cover !important;
object-position:50% 18%;
border-radius:0 !important;
margin:0 !important;
}
[class~="ey26-trainer-card"]::before{content:none !important}
[class~="ey26-trainer-card"]::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
top:auto; right:auto; left:0; bottom:0;
width:auto !important;
height:100% !important;
transform:none !important;
border-radius:0 !important;
background:linear-gradient(to top,rgba(11,30,34,.88) 0%,rgba(11,30,34,.25) 42%,rgba(11,30,34,0) 66%) !important;
z-index:1;
pointer-events:none;
}
[class~="ey26-trainer-card"] > :not(img){position:relative;z-index:2}
[class*="ey26-trainer-name"]{
grid-area:auto !important;
margin:0 !important;
line-height:1.02;
text-transform:uppercase;
color:#fff !important;
font-size:17px !important;
}
[class~="ey26-trainer-grid"] .w-dyn-item:first-child [class*="ey26-trainer-name"]{
font-size:28px !important;
}
[class*="ey26-trainer-spec"]{
grid-area:auto !important;
margin:3px 0 0 !important;
color:rgba(255,255,255,.74) !important;
font-size:11px !important;
}
[class*="ey26-trainer-loc"]{display:none !important}
[class*="ey26-trainer-meta"]{display:none !important}
[class*="ey26-trainer-pill"]{display:none !important}
[class*="ey26-meet"]{display:none !important}
/* 8d. Three coaches, the rest behind the button. */
[class~="ey26-trainer-grid"] .w-dyn-item:nth-child(n+4){display:none !important}
.ey26-trainers.ey26-show-all [class~="ey26-trainer-grid"] .w-dyn-item:nth-child(n+4){display:block !important}
.ey26-trainers.ey26-show-all .ey26-more-btn{display:none !important}
/* 8e. Pricing: show only the plan the toggle has selected. */
body.ey26-plan-annual .ey26-price-card-1:not([class*="ey26-price-card-dark"]){display:none !important}
body.ey26-plan-monthly [class*="ey26-price-card-dark"]{display:none !important}
.ey26-price-grid-1{grid-template-columns:1fr !important}
/* 8f. No QR code on a phone. */
[class*="ey26-qr-wrap"]{display:none !important}
}
/* ==== block 20/30 — was inline at byte offset 180563 ==== */
/* ===========================================================================
COACH MODAL - MOBILE SCROLLING
On <=767px the panel drops to a single-column grid, so its two rows are the
media header (min-height 300px) and .eycm-body. Both rows size to content -
1108px on a 375x812 screen - inside a panel capped at max-height:100vh with
overflow:hidden. Grid rows do not shrink to fit a max-height parent, so the
overflow was simply clipped: .eycm-body carries overflow-y:auto but its height
already equalled its content, so it never became a scroller and the last two
detail blocks plus the .eycm-actions CTA were unreachable. (Desktop is fine -
there the panel is a two-COLUMN grid, so the body's row is bounded already.)
minmax(0, 1fr) on the second row is the fix: 1fr bounds it to the space left
after the media header, and the 0 minimum lets it shrink below its content,
which is what finally lets overflow-y:auto engage. min-height:0 on the body
itself covers the same floor for its flex children.
!important throughout: the modal's own rules are #id + .class and are injected
by its script, so document order between them and this embed is not
guaranteed.
100dvh is listed after the 100vh fallback because iOS Safari's 100vh is the
UNCOLLAPSED viewport - taller than what you can actually see, which would
leave the CTA under the browser chrome even once scrolling worked.
======================================================================== */
@media screen and (max-width: 767px) {
#ey26-coach-modal .eycm-panel {
grid-template-rows: auto minmax(0, 1fr) !important;
max-height: 100vh !important;
max-height: 100dvh !important;
}
#ey26-coach-modal .eycm-body {
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
/* Keeps a flick at the end of the modal from chaining to the locked page. */
overscroll-behavior: contain;
}
}
/* ==== block 21/30 — was inline at byte offset 182596 ==== */
/* ===========================================================================
FRESHDESK CHAT WIDGET - SUPPRESSED ON THIS PAGE ONLY
The widget is loaded site-wide (evolveyou-help.freshdesk.com/webchat/js/
widget.js), so it is NOT removed here - every other page keeps its support
chat. This embed only exists on this page, which is what scopes the hiding.
To bring it back, delete this embed; to remove it everywhere instead, the
loader itself lives in the site's custom code.
It builds #fd_frame (fixed) wrapping the #fd_widget iframe. Hiding the frame
is enough - the iframe is its only child.
The script re-shows the frame by writing inline styles when its own timers
fire, hence !important plus the observer below.
======================================================================== */
#fd_frame,
#fd_widget {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ==== block 22/30 — was inline at byte offset 184425 ==== */
/* ===========================================================================
FEATURE BLOCK TYPE SYSTEM + TICK LIST + EYEBROWS REMOVED + HEADING BREAK
======================================================================== */
/* --- 1. One type voice per block -----------------------------------------
The block was carrying three unrelated text styles below the heading:
body 19px Widescreen #3A555C
list item 15.5px Widescreen #1F3940 (different size AND colour)
wrapper 14px ARIAL #333 (Webflow's unstyled .w-richtext
default, inherited by anything in
the rich text that is not an )
The Arial is the jarring one - not a design choice, just the default leaking
through because .ey26-fb-rt only ever had its margins set.
Now: one family, one colour, and a deliberate 19 -> 16px step between body
copy and the supporting list. */
[class*="ey26-fb-rt"],
[class*="ey26-fcard-rt"] {
font-family: Widescreen, sans-serif;
font-size: 16px;
line-height: 1.55;
color: rgb(58, 85, 92);
}
[class*="ey26-fb-rt"] li,
[class*="ey26-fcard-rt"] li {
font-family: Widescreen, sans-serif !important;
font-size: 16px !important;
line-height: 1.55 !important;
/* Matches .ey26-fb-body exactly, so body copy and list are one voice. */
color: rgb(58, 85, 92) !important;
gap: 12px;
}
[class*="ey26-fb-rt"] ul,
[class*="ey26-fcard-rt"] ul { gap: 12px !important; }
/* --- 2. The tick chips ---------------------------------------------------
Were a 24px grey rounded square: #ECF1F2 fill with a #5E7980 tick - grey on
grey, so the ticks read as disabled rather than as confirmations.
flex:0 0 auto stops the chip squashing when an item wraps to two lines, and
the 2px nudge sits it on the text's cap height rather than its line box. */
[class*="ey26-fb-rt"] li::before,
[class*="ey26-fcard-rt"] li::before {
content: "\2713" !important;
flex: 0 0 auto;
width: 22px !important;
height: 22px !important;
margin-top: 2px;
border-radius: 999px !important;
background: rgba(0, 195, 215, 0.14) !important;
color: rgb(0, 142, 157) !important;
font-size: 12px !important;
font-weight: 700;
line-height: 1;
}
/* --- 3. Section eyebrows removed ----------------------------------------
All thirteen decorative kickers are gone: the hero's "STRENGTH - COACHING -
COMMUNITY", "WHAT'S INSIDE" over the mobile feature rail, the PROGRAMS /
NUTRITION / COMMUNITY labels on both the desktop feature blocks and the mobile
cards, COACHES, MEMBERS, PRICING, QUESTIONS and "YOUR YEAR OF TRAINING" on the
closing CTA. Each one only restated the heading beneath it.
THE EXCEPTION, and the reason this is two rules rather than one: "MONTHLY" and
"ANNUAL" on the price cards are built from the same .ey26-eyebrow class, but
they are the plan NAMES, not kickers - hiding them would leave two unlabelled
price cards. They cannot be excluded by class (ANNUAL shares
.ey26-eyebrow-light with COACHES and the CTA), so they are re-shown by their
position inside a price card instead.
Those two are also nudged 12px -> 14px, with the tracking eased from 0.14em to
0.1em: they are now the only labels of their kind left on the page, so they no
longer need to sit quietly alongside a dozen others, and wide tracking that
suited 12px starts to look loose as the size goes up. */
[class*="ey26-eyebrow"] { display: none !important; }
[class*="ey26-price-card"] [class*="ey26-eyebrow"] {
display: block !important;
font-size: 14px !important;
letter-spacing: 0.1em !important;
}
/* --- 4. "WOMEN LIFTING ALONGSIDE YOU." on two lines ---------------------
At 84px the second line, "ALONGSIDE YOU.", measures 773px but the section head
was only 760px wide - so it broke to three lines, orphaning "YOU.". Widening
the head to 920px is what buys the two-line break; the font size is untouched.
text-wrap:balance then evens the two lines. Still needed with the MEMBERS
eyebrow gone - the width is what fixes the break, not the eyebrow. */
@media screen and (min-width: 768px) {
[class~="ey26-social"] [class~="ey26-section-head"] { max-width: 920px !important; }
[class~="ey26-social"] [class*="ey26-h2"] {
max-width: 920px !important;
text-wrap: balance;
}
}
/* ==== block 23/30 — was inline at byte offset 188874 ==== */
[class*="ey26-oldslug-src"] { display: none !important; }
/* ===========================================================================
COACH CARDS + MODAL MOTION - desktop only
The reference component is React + Framer Motion, which cannot run on this
page. Its layoutId morph is FLIP underneath, and a FLIP version was tried
here: measure the tapped card, then animate the panel from that box to its
own. It was abandoned because the page builds and populates the panel on its
own schedule after the click, so there was reliably nothing laid out to
measure at the moment the animation had to start - it silently no-opped.
This is the robust version of the same intent: a scale-and-rise entrance that
needs no measurement and no knowledge of the other script's timing. It reads
as the card opening out rather than the panel appearing, which was the point.
It does not travel from the tapped card's exact position - that is what FLIP
buys and what this trades away for reliability.
Gated to >=768px because on mobile the panel is full-screen and scrollable:
transforming it fought the modal's own scrolling and displaced its tap
targets, which jammed the modal and swallowed the "See programs" link.
======================================================================== */
@media screen and (min-width: 768px) {
@keyframes eycmPanelIn {
from { opacity: 0; transform: translateY(14px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes eycmBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Overrides the panel's own 320ms transform transition for the entrance. */
#ey26-coach-modal.is-open .eycm-panel {
animation: eycmPanelIn 400ms cubic-bezier(.2,.8,.2,1) both;
transform-origin: center center;
will-change: transform, opacity;
}
#ey26-coach-modal.is-open { animation: eycmBackdropIn 260ms ease-out both; }
}
/* Card hover - the whileHover / group-hover half of the reference. Real pointers
only; hover states on touch stick on after a tap. */
@media (hover: hover) and (min-width: 768px) {
[class~="ey26-trainer-card"] {
transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms cubic-bezier(.2,.8,.2,1);
}
[class~="ey26-trainer-card"]:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(11,30,34,0.22);
}
/* The photo already has overflow:hidden and a 600ms transform transition, so
it only ever needed a hover target. */
[class~="ey26-trainer-card"]:hover img[class*="ey26-trainer-photo-img"] { transform: scale(1.05); }
[class~="ey26-trainer-card"] [class*="ey26-meet"] { transition: opacity 300ms; }
[class~="ey26-trainer-card"]:hover [class*="ey26-meet"] { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#ey26-coach-modal.is-open,
#ey26-coach-modal.is-open .eycm-panel,
[class~="ey26-trainer-card"],
[class~="ey26-trainer-card"] img[class*="ey26-trainer-photo-img"] {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* ==== block 24/30 — was inline at byte offset 194697 ==== */
/* Overrides for the 2026 home page. This block is the LAST embed in the body, so
it wins ties on document order. Several of the earlier embeds use !important,
which is why the rules that fight those have to as well -- each one is marked.
NOTE for whoever edits this next: three separate bugs below all trace to the same
cause -- the original stylesheet and scripts were written against .ey26-hero, but
this page's hero section is .ey26-hero2. Every rule keyed to .ey26-hero silently
does nothing here. Worth checking that first if something hero-related misbehaves. */
/* ===== HERO MUST SCROLL ON TOUCH =====
.ey26-hero2 computed overflow:hidden on BOTH axes, making it a scroll container
with nothing to scroll. Dragging inside it on a touch device moves nothing and
does not reliably chain to the page, so the hero image area felt dead on mobile.
Other sections use overflow-x:clip for the same bleed control -- clip does not
create a scroll container. That rule lists .ey26-hero, so this was never covered.
Verified after: body scrollWidth 375 = viewport, so nothing bleeds sideways. */
.ey26-hero2{overflow:visible !important;overflow-x:clip !important}
/* ===== HERO CONTENT MUST BE VISIBLE ON LOAD =====
The scroll-reveal script hides what it manages at opacity:0 and un-hides on
intersection. It exempts the hero -- again by looking for .ey26-hero -- so the hero
here was treated as below-the-fold content. On 375x812 that left the CTA row and
the review stars at opacity:0 until first scroll. Measured 0 -> 1 at scrollY 0. */
.ey26-hero2 [data-ey26-reveal]{opacity:1 !important;animation:none !important;transform:none !important}
/* ===== NAV: logo alignment + size =====
.ey26-wrap (page content) is max-width:1320px, but .ey26-nav-inner was 1280px.
Both centre with auto margins, so above 1320px the nav rail sat 20px inboard of
the content rail. Measured before: logo 256px, headline 236px. */
.ey26-nav-inner{max-width:1320px}
.ey26-logo-img{height:44px}
@media screen and (max-width:767px){.ey26-logo-img{height:26px}}
/* ===== MOBILE HERO =====
The copy block is pulled up over the hero photo by a negative margin. At -96px the
first headline line landed on the busy part of the image and lost contrast; -56px
drops it 40px onto the clean floor area below the subject. Desktop unaffected. */
@media screen and (max-width:767px){
.ey26-wrap.ey26-hero2-grid{margin-top:-56px !important}
}
/* ===== SECTION HEADING -> CONTENT SPACING =====
Four sections used three different gaps between the section head and the block
under it. Measured on mobile: FAQ 56px, Community 56px, 'Your steps to success'
22px, Coaches 0px (heading touching the card grid). 56px is the majority value and
already reads correctly, so the two outliers are brought up to match.
Note: an earlier embed deliberately compacted the Coaches head from 56 to 28 to
fit 'one screenful'. This reverses that -- revert this rule if that mattered. */
[class~="ey26-frail-head"]{margin-bottom:56px !important}
[class~="ey26-trainers"] [class~="ey26-section-head"]{margin-bottom:56px !important}
/* ===== ANCHOR TARGETS =====
The nav is sticky and 77px tall, so the previous 90px of scroll-margin left only
13px of clearance and section headings landed tight under the bar. */
#features,#trainers,#social,#pricing,#faq{scroll-margin-top:120px}
/* ===== MARQUEE SPACING =====
.ey26-mq-item is a flex row with column-gap:40px. Flexbox turns each run of text
into its own anonymous flex item, so '4.9', the star span and 'APP STORE' were
three items with 40px between each -- 80px of dead space inside one phrase (that
panel measured 502px, now 409px). One word-space keeps it reading as a unit. */
.ey26-mq-item{column-gap:.28em}
/* ===== TRAINERS SECTION WIDTH =====
Every other section wraps at 1320px; an earlier embed capped this one at 1080px
with !important, pushing 'Real coaches. Supporting you.' 120px further in than the
feature blocks above (356px vs 236px). Both rules need !important to beat it. */
[class~="ey26-trainers"] [class~="ey26-wrap"]{max-width:1320px !important}
.ey26-trainers{padding-top:80px !important;padding-bottom:80px !important}
@media screen and (max-width:767px){
.ey26-trainers{padding-top:64px !important;padding-bottom:64px !important}
}
/* ===== COACH MODAL =====
The panel was overflow:hidden against max-height:810px, so on any screen shorter
than its content the bottom was clipped with no way to reach it. min-height:0 is
needed too: the panel is a grid and a grid child defaults to min-height:auto,
which refuses to shrink and would cancel the scroll. */
#ey26-coach-modal .eycm-panel{overflow-y:auto !important;-webkit-overflow-scrolling:touch}
#ey26-coach-modal .eycm-body{min-height:0}
/* Primary CTA label: white instead of the dark navy set by an earlier embed. */
#ey26-coach-modal .eycm-btn-primary{color:#fff !important}
/* Mobile portrait crop: object-position was 50% 50%, so the short banner crop took
equal bites off top and bottom and took the coach's head with it. Anchoring to the
top keeps faces in frame and removes the excess from the bottom instead. */
@media screen and (max-width:767px){
#ey26-coach-modal .eycm-media img{object-position:50% 0% !important}
}
/* ==== block 25/30 — was inline at byte offset 200083 ==== */
/* =====================================================================
EY26 VERTICAL RHYTHM - single source of truth for section + title spacing.
WHY THIS BLOCK EXISTS. Section padding on this page had been set and
re-set across ~6 separate embeds, several with !important, so the same
section was declared at 150px, then 72px, then 56px, then 80px. The
winner was whichever embed happened to sit last, and the result was a
page whose section gaps ran 56px near the top and 330px near the bottom.
Rather than add a 7th competing patch, this is the LAST embed in the
body: equal specificity, latest in document order, so it decides. The
earlier declarations are left in place (harmless once overridden) but
nothing above needs editing to change spacing again - change it here.
THE SCALE. One value per role, not per section:
content section 120px top/bottom desktop, 64px mobile
-> every content-to-content boundary reads 240 / 128
divider band 32px desktop, 24px mobile (marquee, press row -
deliberately compact; they separate, they are not
content, so a band join reads 152 / 88)
title -> body 24px everywhere
section head -> content 40px desktop, 24px mobile
Attribute selectors ([class~=...]) are used to match the specificity of
the rules being overridden, not for their own sake.
===================================================================== */
/* Sections own their vertical padding; inner wrappers add none. The pricing
wrapper was padding 56px on top of its section's own padding, which is why
pricing sat further from its neighbours than any other section. */
[class~="ey26-pricing-inner"]{padding-top:0!important;padding-bottom:0!important}
@media screen and (min-width:768px){
/* Hero and the stats row share one background, so they are a single
visual block: the hero's bottom padding goes to 0 and the stats row's
top padding is the whole intra-block gap. This is intentionally 120,
not 240 - it is a gap inside a block, not a boundary between two. */
[class~="ey26-hero2"]{padding-bottom:0!important}
[class~="ey26-stats"],
[class~="ey26-trainers"],
[class~="ey26-social"],
[class~="ey26-pricing-1"],
[class~="ey26-faq"],
[class~="ey26-cta-1"],
[class~="ey26-fblock"]{padding-top:120px!important;padding-bottom:120px!important}
/* The feature blocks carry the padding themselves (above); their wrapper
must add none, or the series' outer edges end up double-padded and no
longer match the rest of the page. */
[class~="ey26-fdesk"]{padding-top:0!important;padding-bottom:0!important}
[class~="ey26-marquee-1"],
[class~="ey26-press"]{padding-top:32px!important;padding-bottom:32px!important}
[class~="ey26-footer"]{padding-top:120px!important;padding-bottom:48px!important}
[class~="ey26-section-head"]{margin-bottom:40px!important}
/* two-level selector to match the earlier trainers-only override */
[class~="ey26-trainers"] [class~="ey26-section-head"]{margin-bottom:40px!important}
}
@media screen and (max-width:767px){
/* Hero starts flush under the transparent mobile nav. */
[class~="ey26-hero2"]{padding-top:0!important;padding-bottom:64px!important}
[class~="ey26-trainers"],
[class~="ey26-social"],
[class~="ey26-pricing-1"],
[class~="ey26-faq"],
[class~="ey26-cta-1"]{padding-top:64px!important;padding-bottom:64px!important}
/* The card rail keeps its own 8px top / 22px bottom padding so the cards'
drop shadows are not clipped by the scroll container. The section makes
up the difference, so the section still reads 64 top and bottom. */
[class~="ey26-frail-sec"]{padding-top:56px!important;padding-bottom:42px!important}
[class~="ey26-marquee-1"]{padding-top:24px!important;padding-bottom:24px!important}
[class~="ey26-footer"]{padding-top:64px!important;padding-bottom:40px!important}
[class~="ey26-section-head"]{margin-bottom:24px!important}
[class~="ey26-trainers"] [class~="ey26-section-head"]{margin-bottom:24px!important}
/* was 40px while every other section heading was 34px */
[class~="ey26-frail-h"]{font-size:34px!important}
}
/* Title -> body copy: 24px at every breakpoint, in every section.
Some heads sit in flex containers, where sibling margins do NOT collapse -
so for those the gap is set once (heading margin, or the container's gap)
and the lede's own top margin is zeroed, otherwise the two add up and the
gap silently doubles. */
[class~="ey26-h2"],
[class*="ey26-price-h"]{margin-bottom:24px!important}
[class*="ey26-price-lede"]{margin-top:0!important}
[class~="ey26-lede-d"]{margin-top:24px!important}
[class~="ey26-cta-inner"]{row-gap:24px!important;column-gap:24px!important}
[class*="ey26-hero-h1-m"]{margin-bottom:24px!important}
[class~="ey26-frail-h"]{margin-top:0!important}
[class~="ey26-frail-lede"]{margin-top:24px!important}
/* ==== block 26/30 — was inline at byte offset 205122 ==== */
/* =====================================================================
EY26 UI FIXES. Sits after the vertical-rhythm block, so it is the last
word on the page. Each rule states the defect it corrects.
===================================================================== */
/* =====================================================================
STUCK :hover ON TOUCH
Two hover rules in the head stylesheet were never gated for touch:
.ey26-quote-card:hover { transform: translateY(-4px);
box-shadow: rgba(11,30,34,.09) 0 18px 44px }
.ey26-trainer-card:hover { transform: translateY(-6px) }
Every later hover rule on this page IS wrapped in (hover:hover) and
(pointer:fine) - these two predate that and were missed.
On a phone there is no pointer to move away, so a tap applies :hover and
it STAYS applied until something else is tapped. The review card then
holds an 18px-down, 44px-blur navy shadow, and in the narrow gap between
two cards that shadow plus its neighbour's reads as a dark vertical band
behind the reviews. It only appears after a tap, which is why it does not
show on a freshly loaded page.
The shadow below is the quote card's own resting value, so the card looks
untouched rather than flat. The trainer card's ungated rule only moves
the card, so it just needs the transform cancelled. Desktop is unaffected:
this whole block is inverted-gated to non-hover pointers.
===================================================================== */
@media (hover:none),(pointer:coarse){
[class~="ey26-quote-card"]:hover{
transform:none!important;
box-shadow:0 1px 3px rgba(11,30,34,.04)!important;
}
[class~="ey26-trainer-card"]:hover{transform:none!important}
}
/* --- Section heading scale ---
Desktop headings were 84px (community), 84px (pricing), 60px (features),
60px (CTA), 56px (FAQ) and 44px (coaches), so "Real coaches. Supporting
you." read as a smaller heading than the sections either side of it.
One size for every section heading now; the hero keeps its own larger
display size as the page's single headline. */
@media screen and (min-width:768px){
/* the two-level selectors match the per-section !important overrides
these replace - a single-class selector loses to them */
[class~="ey26-social"] [class~="ey26-h2"],
[class~="ey26-faq"] [class~="ey26-h2"],
[class~="ey26-trainers"] [class~="ey26-h2"],
[class~="ey26-h2"],
[class*="ey26-price-h"],
[class*="ey26-cta-h"],
[class*="ey26-fb-h"]{font-size:56px!important}
/* Feature blocks sit tighter than the rest of the page, by request. The
global rhythm is 120px a side (240px between sections); these are 96,
so a feature-to-feature join reads 192px. This is a deliberate local
exception to the scale set in the vertical-rhythm block - if the page
rhythm is ever retuned, retune this with it. */
[class~="ey26-fblock"]{padding-top:96px!important;padding-bottom:96px!important}
}
@media screen and (max-width:767px){
[class~="ey26-h2"],
[class*="ey26-price-h"],
[class*="ey26-cta-h"],
[class*="ey26-fb-h"],
[class~="ey26-frail-h"]{font-size:34px!important}
/* this head block was still on the old 56px while every other section
head had been brought to 24px */
[class~="ey26-frail-head"]{margin-bottom:24px!important}
}
/* --- Right-hand hero award badge, mobile ---
Swapped to the supplied artwork. Mobile only, as requested; the desktop
badge still shows the previous image. */
@media screen and (max-width:767px){
[class~="ey26-badge-cnet"]{background-image:url("https://d11lx2slndzksf.cloudfront.net/images/frame-931-1787216672.webp")!important}
}
/* --- Pricing card internal rhythm ---
The card lays its blocks out with a 22px flex gap, but the eyebrow also
carried a 24px bottom margin. Flex gaps do not collapse with margins, so
that single join measured 46px inside an otherwise even 22px stack. */
[class*="ey26-price-card"] [class~="ey26-eyebrow"]{margin-bottom:0!important}
/* =====================================================================
MONTHLY: LAST TWO BULLETS ARE CROSSES, NOT TICKS
Marks the bottom two rows of the MONTHLY card as not-included. The annual
card is untouched - it is the same .ey26-price-card-1 class plus -dark-1,
so :not() is what separates the two.
POSITIONAL, not by name: :nth-last-child(-n+2) marks whichever two rows
are last. Reorder the list and the crosses follow.
The tick is a text glyph inside a 22px round badge, so it is collapsed
with font-size:0 - the same trick used for the marquee star elsewhere on
this page, and one textContent cannot undo.
The cross is DRAWN, not typed. U+2717 (ballot X) is a brush-style glyph
and reads as decorative, and every other X character is at the mercy of
whichever font the fallback chain lands on. Two rotated rectangles give a
plain geometric cross with a stroke weight we control, sized to sit like
the 12px/800 tick it replaces. currentColor keeps it on the badge colour.
===================================================================== */
[class~="ey26-price-card-1"]:not([class~="ey26-price-card-dark-1"])
[class~="ey26-feat"]:nth-last-child(-n+2) [class~="ey26-check"]{
font-size:0!important;
position:relative;
background-color:var(--ink-100)!important;
color:var(--ink-500)!important;
}
[class~="ey26-price-card-1"]:not([class~="ey26-price-card-dark-1"])
[class~="ey26-feat"]:nth-last-child(-n+2) [class~="ey26-check"]::before,
[class~="ey26-price-card-1"]:not([class~="ey26-price-card-dark-1"])
[class~="ey26-feat"]:nth-last-child(-n+2) [class~="ey26-check"]::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:10px;
height:1.8px;
border-radius:1px;
background-color:currentColor;
}
[class~="ey26-price-card-1"]:not([class~="ey26-price-card-dark-1"])
[class~="ey26-feat"]:nth-last-child(-n+2) [class~="ey26-check"]::before{
transform:translate(-50%,-50%) rotate(45deg);
}
[class~="ey26-price-card-1"]:not([class~="ey26-price-card-dark-1"])
[class~="ey26-feat"]:nth-last-child(-n+2) [class~="ey26-check"]::after{
transform:translate(-50%,-50%) rotate(-45deg);
}
/* --- Testimonial name / location pairing ---
The quote card is a flex column with a uniform 20px row-gap, and the name
carried a further 4px beneath it, so a person's name sat 24px from their
country - the same distance as every unrelated block in the card. The two
belong together and should read as one unit.
The row-gap applies to every child, so shrinking it would also pull the
avatar and the quote in. The location is pulled back against the gap
instead: 20 - 14 = 6px, and the name's own 4px goes. */
[class~="ey26-quote-name"]{margin-bottom:0!important}
[class~="ey26-quote-meta"]{margin-top:-14px!important}
/* =====================================================================
"SEE ALL COACHES" ON DESKTOP
The grid is 4 columns and Krissy's card spans 2x2, so five coaches fill
two rows exactly - row 1 is Krissy + Mia + Yaya, row 2 is Krissy + Donna
+ Jessy. The 6th and 7th start a third row that fills only two of its
four cells, leaving a visible hole. Collapsing to five keeps the block
square and puts the last two behind the button.
Mobile already worked this way (three cards, then reveal), but every rule
for it sits inside max-width:767 - including the reveal - which is why
these desktop copies are needed. The click handler is shared and is NOT
width-gated despite its "mobile only" comment, so it needs no change.
nth-child counts ALL items regardless of the CMS sort, so this is
positional: it hides whatever is 6th and 7th in the collection's Order
field. Re-order the coaches and a different pair hides.
===================================================================== */
@media screen and (min-width:768px){
[class~="ey26-trainer-grid"] .w-dyn-item:nth-child(n+6){display:none!important}
/* back to flex, not the block the mobile reveal uses, or the card's own
internal layout collapses */
[class~="ey26-trainers"].ey26-show-all [class~="ey26-trainer-grid"] .w-dyn-item:nth-child(n+6){display:flex!important}
/* The button's styling is entirely inside the mobile query, so up here it
would render as a bare browser button. Mirrored, sized to its content
and centred, with the same hairline border the section's other pills
use rather than a new treatment. */
[class~="ey26-more-btn"]{
display:block!important;
width:-moz-fit-content;
width:fit-content;
margin:32px auto 0;
padding:14px 30px;
color:#fff;
background-color:transparent;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
font-family:Widescreen,sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
cursor:pointer;
transition:background-color .2s var(--ey26-ease),border-color .2s var(--ey26-ease);
}
[class~="ey26-more-btn"]:hover{
background-color:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.38);
}
[class~="ey26-trainers"].ey26-show-all [class~="ey26-more-btn"]{display:none!important}
}
/* =====================================================================
FAQ open/close jitter on mobile.
The accordion animates max-height toward a height the script measures
with scrollHeight and writes as an inline style. Two things make that
fragile on a phone and neither is fully in our control here:
- the measurement is re-run on every `resize`, and mobile browsers
fire resize continuously as the URL bar shows and hides on scroll,
so an in-flight transition gets retargeted repeatedly;
- opening an answer reflows everything below it, and a re-measure
landing mid-transition restarts the easing from a new position.
Rather than keep tuning an animation whose target moves underneath it,
the height change is simply not animated on mobile: the answer opens and
closes immediately, with only the fade retained. Nothing is being
interpolated, so there is nothing left to stutter. Desktop keeps the
smooth height animation, where resize does not fire during scroll.
NOTE for anyone revisiting this: a grid-template-rows 0fr -> 1fr
accordion is the usual measurement-free fix, but it does not work on
this element. .ey26-faq-a is a Webflow .w-richtext, whose clearfix
::before and ::after both carry content and therefore become grid items
alongside the paragraph - the text lands in an implicit auto-sized row
and never collapses. It would need a wrapper element inside the answer.
===================================================================== */
@media screen and (max-width:767px){
[class~="ey26-faq-a"]{transition:opacity .2s linear!important}
}
@media screen and (min-width:768px){
[class~="ey26-faq-a"]{transition:max-height .4s var(--ey26-ease),opacity .2s linear!important}
}
/* --- Coach modal: one scroller on mobile ---
The panel and the body inside it were both scrollable, so the text
scrolled within a box while the photo stayed pinned above it. The panel
is now the only scroller, so the image travels with the content. */
@media screen and (max-width:767px){
#ey26-coach-modal [class~="eycm-panel"]{max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
#ey26-coach-modal [class~="eycm-body"]{overflow:visible!important;max-height:none!important}
#ey26-coach-modal [class~="eycm-media"]{flex:0 0 auto}
}
/* --- Rail card artwork ---
The image frame was 4/5 (0.80) but the artwork is ~3/4 (0.74), so
object-fit:contain letterboxed it and the image sat inset inside its
card rather than filling the frame. */
[class~="ey26-fcard-img"]{aspect-ratio:3/4!important}
/* ==== block 27/30 — was inline at byte offset 222463 ==== */
/* =====================================================================
FEATURE MEDIA: VIDEO IN AN IPHONE FRAME
A feature block's media comes from the CMS "Image URL (CDN)" field, which
the page carries into the DOM as the text of a hidden .ey26-cdn-src div
(and .ey26-mob-src for the mobile rail) and applies to an