line; sw.js puts a button in each heading, adds .sw-js (stage shown, steps clickable) and .sw-motion (auto-advance). Without JS the track alone reads like the old strip with no dead controls; with reduced motion the stage is static and steps are clicked. */ /* Placement: right under the hero, above the four feature cards, with the same gap above and below */ .hero + .hm-switch { margin-top: -16px; padding-bottom: 56px; } .hm-switch + .ft { padding-top: 0; } @media (max-width: 599px) { .hero + .hm-switch { margin-top: -28px; padding-bottom: 44px; } } .hm-switch .sw { --g: 24px; padding-top: 38px; padding-bottom: 36px; } .hm-switch .sw-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 20px; margin-bottom: 30px; } .sw-titles { display: grid; gap: 14px; min-width: 0; } /* Pause / play (WCAG 2.2.2) */ .sw-play { flex: none; width: 42px; height: 42px; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--fg); cursor: pointer; transition: border-color .2s, background-color .2s; } .sw-play[hidden] { display: none; } .sw-play:hover { border-color: var(--muted); background: #1a202b; } .sw-play svg { grid-area: 1 / 1; width: 15px; height: 15px; fill: currentColor; } .sw-play .sw-i-play { display: none; } .sw-play[data-paused] .sw-i-pause { display: none; } .sw-play[data-paused] .sw-i-play { display: block; } /* Track */ .sw-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); } .sw-step { position: relative; min-width: 0; display: grid; gap: 10px; justify-items: start; align-content: start; } .sw-node { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--sky); transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s; } .sw-node > .fq-ic { grid-area: 1 / 1; width: 25px; height: 25px; transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.55,1); } .sw-node > .sw-chk { opacity: 0; transform: scale(.4); color: var(--ok); stroke-width: 2.6; } .sw-name { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 700 2.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--fg); white-space: nowrap; transition: color .4s; } .sw-num { font: 600 .76rem/1 var(--mono); letter-spacing: .12em; color: var(--sky); } .sw-line { max-width: 11.5em; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; text-wrap: balance; min-height: 2.9em; transition: color .4s; } /* The button sw.js puts in each heading: its overlay makes the whole column one click target with one focus ring */ .sw-tab { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sw-tab::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 12px; } .sw-tab:focus-visible { outline: none; } .sw-tab:focus-visible::after { outline: 2px solid var(--blue-hi); outline-offset: 6px; } .sw-seg { position: absolute; top: 25px; left: 66px; right: calc(14px - var(--g)); height: 2px; border-radius: 2px; background: rgba(59,130,246,.2); overflow: hidden; } .sw-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-hi), var(--sky)); transform-origin: left center; } /* Track states (JS on) */ .sw-js .sw-fill { transform: scaleX(0); transform-origin: right center; transition: transform .4s cubic-bezier(.4,0,.2,1); } .sw-js .is-done .sw-fill { transform: scaleX(1); } .sw-js .is-on .sw-fill, .sw-js .is-done .sw-fill { transform-origin: left center; } /* fills left to right, drains onward to the right */ .sw-js .sw-name { color: var(--muted); } .sw-js .sw-step:hover .sw-name, .sw-js .is-on .sw-name { color: var(--fg); } .sw-js .is-on .sw-line { color: var(--fg); } .sw-js .sw-step:not(.is-on):not(.is-done):hover .sw-node { border-color: #3a4558; } /* Done steps swap their icon for a check, so done > now > next reads at a glance */ .sw-js .is-done .sw-node { border-color: rgba(74,222,128,.42); background: rgba(74,222,128,.09); } .sw-js .is-done .sw-node > .fq-ic { opacity: 0; transform: scale(.4); } .sw-js .is-done .sw-node > .sw-chk { opacity: 1; transform: none; } .sw-js .is-on .sw-node { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 6px rgba(59,130,246,.16), 0 12px 28px -10px rgba(59,130,246,.9); } .sw-motion .is-on .sw-node::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--blue-hi); border-radius: inherit; animation: sw-ping 1.5s cubic-bezier(0,0,.2,1) infinite; } .sw-motion .is-on .sw-fill { animation: sw-fill var(--sw-dur, 3s) linear both; } /* Stage */ .sw-stage { display: none; } .sw-js .sw-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; container-type: inline-size; background: radial-gradient(70% 100% at 50% 0%, rgba(59,130,246,.11), transparent 70%), radial-gradient(circle, rgba(120,178,255,.085) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--ink); } .sw-rail { position: absolute; z-index: 3; top: 0; left: 0; width: calc((100% + var(--g)) / 4); height: 120px; pointer-events: none; transform: translateX(calc(var(--sw-i, 0) * 100%)); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .sw-beam { position: absolute; top: 0; left: 0; width: 52px; height: 2px; border-radius: 0 0 2px 2px; background: var(--blue-hi); box-shadow: 0 0 14px 2px rgba(59,130,246,.75); } .sw-beam::after { content: ""; position: absolute; top: 2px; left: -34px; right: -34px; height: 100px; background: radial-gradient(50% 100% at 50% 0%, rgba(59,130,246,.2), transparent 75%); } .sw-scene { grid-column: 1; grid-row: 1 / span 2; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-rows: subgrid; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .2s ease-in, transform .45s cubic-bezier(.4,0,.6,1), visibility 0s linear .45s; } .sw-scene.is-prev { transform: translateX(-28px); } .sw-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .16s, transform .6s cubic-bezier(.2,.8,.2,1) .16s, visibility 0s; } .sw-art { min-width: 0; min-height: 238px; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 22px 24px 20px; font-size: .88rem; line-height: 1.25; } .sw-art svg { display: block; flex: none; } .sw-cap { display: none; } /* Shared scene parts */ .sw-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 24px 48px -24px rgba(0,0,0,.9); } .sw-chips { display: grid; gap: 8px; } .sw-chip { display: flex; align-items: center; gap: 9px; min-width: 156px; padding: 7px 8px 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 600; font-size: .9rem; line-height: 1.2; white-space: nowrap; } .sw-chip > .fq-ic { width: 16px; height: 16px; color: var(--sky); } .sw-tick { flex: none; margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(74,222,128,.15); color: var(--ok); } .sw-tick .fq-ic, .sw-done .fq-ic { width: 12px; height: 12px; stroke-width: 3; } .sw-dash { position: relative; flex: none; width: 50px; height: 10px; opacity: .9; } .sw-dash::before { content: ""; position: absolute; top: 4px; left: 0; right: 5px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--blue-hi) 0 6px, transparent 6px 11px); } .sw-dash::after { content: ""; position: absolute; top: 1px; right: 2px; width: 8px; height: 8px; border-top: 2px solid var(--blue-hi); border-right: 2px solid var(--blue-hi); border-radius: 1px; transform: rotate(45deg); } .sw-pill { flex: none; padding: 5px 8px; border-radius: 999px; font: 600 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .sw-pill-ok { color: var(--ok); background: rgba(74,222,128,.14); } .sw-pill-sky { color: var(--sky); background: rgba(120,178,255,.13); } /* 01 Call */ .sw-call { width: 272px; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 13px; row-gap: 16px; align-items: center; padding: 16px 16px 15px; } .sw-av { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--blue-hi), var(--blue)); color: #fff; } .sw-av .fq-ic { position: relative; width: 21px; height: 21px; stroke-width: 2; } .sw-ring { position: absolute; inset: 0; border: 2px solid rgba(120,178,255,.6); border-radius: 50%; opacity: 0; } .sw-call-txt { display: grid; gap: 5px; min-width: 0; } .sw-status { display: grid; margin-top: 2px; font-size: .8rem; font-weight: 600; line-height: 1.1; } .sw-st { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .sw-st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .sw-st-a { color: var(--muted); opacity: 0; } .sw-st-b { color: var(--ok); } .sw-call-txt small { font: 600 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); } .sw-call-txt b { font-size: 1.04rem; font-weight: 700; line-height: 1.1; } .sw-wave { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 2px; } .sw-wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--sky); opacity: .85; transform: scaleY(var(--h, .5)); } .sw-wave i:nth-child(4n+1) { --h: .35; } .sw-wave i:nth-child(4n+2) { --h: .8; } .sw-wave i:nth-child(4n+3) { --h: .55; } .sw-wave i:nth-child(4n) { --h: 1; } .sw-wave i:nth-child(5n) { --h: .45; } .sw-wave i:nth-child(7n) { --h: .7; } /* 02 Set up */ .sw-clock { position: relative; flex: none; width: 132px; height: 132px; } .sw-clock svg { width: 100%; height: 100%; } .sw-clock-bg { fill: none; stroke: var(--line); stroke-width: 7; } .sw-clock-fg { fill: none; stroke: var(--blue-hi); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 6px rgba(59,130,246,.55)); } .sw-clock-txt { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center; } .sw-clock-txt b { font: 700 3rem/.85 var(--display); color: var(--fg); } .sw-clock-txt small { font: 600 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sw-win { width: 360px; overflow: hidden; } .sw-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); font: 600 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .sw-win-bar > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2c3445; } .sw-win-bar > span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sw-win-time { display: none; align-items: center; gap: 5px; margin-left: auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font-style: normal; letter-spacing: .04em; text-transform: none; } .sw-win-time .fq-ic { width: 12px; height: 12px; color: var(--sky); stroke-width: 2; } .sw-win-body { display: grid; grid-template-columns: 42px minmax(0, 1fr); } .sw-side { display: grid; gap: 10px; align-content: start; padding: 12px 11px; border-right: 1px solid var(--line); } .sw-side i { height: 18px; border-radius: 5px; background: #1d2330; } .sw-side i:first-child { background: rgba(59,130,246,.45); } .sw-rows { display: grid; gap: 7px; padding: 12px; min-width: 0; } .sw-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 9px 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); } .sw-row > .fq-ic { width: 16px; height: 16px; color: var(--sky); } .sw-row b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; } .sw-done { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(74,222,128,.15); color: var(--ok); } .sw-row-hi { border-color: var(--blue-hi); background: rgba(59,130,246,.1); } .sw-ready { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } /* 03 Install */ .sw-door { width: 320px; height: auto; overflow: visible; } .sw-d-floor { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; } .sw-d-frame { fill: none; stroke: #3a4456; stroke-width: 2; } .sw-d-leaf { fill: var(--panel); stroke: #5b6678; stroke-width: 1.5; } .sw-d-pane { fill: rgba(120,178,255,.07); stroke: #3a4456; stroke-width: 1.5; } .sw-d-handle { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; } .sw-d-knob { fill: var(--fg); } .sw-d-strike { fill: var(--sky); filter: drop-shadow(0 0 4px rgba(120,178,255,.8)); } .sw-d-wire { fill: none; stroke: var(--sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; opacity: .85; } .sw-d-ctrl rect { fill: var(--panel); stroke: var(--sky); stroke-width: 1.5; } .sw-d-ctrl path { fill: none; stroke: #3a4558; stroke-width: 3; stroke-linecap: round; } .sw-d-dot { fill: var(--sky); } .sw-d-pad > rect { fill: var(--panel); stroke: var(--sky); stroke-width: 1.5; } .sw-d-led { fill: var(--ok); filter: drop-shadow(0 0 4px rgba(74,222,128,.9)); } .sw-d-keys circle { fill: var(--muted); } .sw-d-badge circle { fill: #12301f; stroke: var(--ok); stroke-width: 1.5; } .sw-d-badge path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .sw-d-ctrl, .sw-d-pad, .sw-d-badge { transform-box: fill-box; transform-origin: center; } /* 04 Invite */ .sw-join { width: 232px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 14px; align-items: center; padding: 16px; } .sw-join-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(59,130,246,.16); color: var(--sky); } .sw-join-ic .fq-ic { width: 22px; height: 22px; stroke-width: 2; } .sw-join-txt { display: grid; gap: 5px; min-width: 0; } .sw-join-txt small { font: 600 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); white-space: nowrap; } .sw-join-txt b { font-size: 1.04rem; font-weight: 700; line-height: 1.1; } .sw-share { position: relative; grid-column: 1 / -1; display: grid; place-items: center; padding: 10px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 600; font-size: .88rem; line-height: 1; box-shadow: 0 10px 22px -10px rgba(59,130,246,.8); } .sw-share::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(120,178,255,.55); opacity: 0; } .sw-mems { display: grid; gap: 8px; width: 290px; } .sw-mem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: none; } .sw-mem b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-ava { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #6d4ee0); color: #fff; font: 700 .7rem/1 var(--body); letter-spacing: .02em; } .sw-mem:nth-child(2) .sw-ava { background: linear-gradient(135deg, #0ea5e9, #2563eb); } .sw-mem:nth-child(3) .sw-ava { background: linear-gradient(135deg, #3b82f6, #22c55e); } /* Motion: each scene plays when it turns on (paused with .sw-paused, skipped with .sw-still) */ .sw-motion .is-on .sw-ring { animation: sw-ripple 1.8s cubic-bezier(.2,.6,.3,1) infinite; } .sw-motion .is-on .sw-st-a { animation: sw-st-out .16s ease-in .52s both; } .sw-motion .is-on .sw-st-a::before { animation: sw-blink .5s steps(1) infinite; } .sw-motion .is-on .sw-st-b { animation: sw-st-in .3s cubic-bezier(.2,.8,.2,1) .66s both; } .sw-motion .is-on .sw-st-b::before { animation: sw-pulse 2s ease-in-out 1s infinite; } .sw-motion .is-on .sw-wave { animation: sw-wave-on .35s ease .55s both; } .sw-motion .is-on .sw-ring-b { animation-delay: .9s; } .sw-motion .is-on .sw-wave i { animation: sw-wave .9s ease-in-out infinite; } .sw-motion .is-on .sw-wave i:nth-child(3n+1) { animation-duration: 1.1s; animation-delay: -.3s; } .sw-motion .is-on .sw-wave i:nth-child(3n+2) { animation-duration: .8s; animation-delay: -.55s; } .sw-motion .is-on .sw-wave i:nth-child(5n) { animation-duration: 1.25s; animation-delay: -.15s; } .sw-motion .is-on .sw-dash { animation: sw-dash .3s ease-out .45s both; } /* the arrow draws in just before what it points at */ .sw-motion .sw-s-invite.is-on .sw-dash { animation-delay: .32s; } .sw-motion .is-on .sw-dash::before { animation: sw-march .6s linear infinite; } .sw-motion .is-on .sw-chip { animation: sw-pop .5s cubic-bezier(.3,1.45,.55,1) both; } .sw-motion .is-on .sw-tick { animation: sw-check .4s cubic-bezier(.3,1.5,.55,1) both; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(1) { animation-delay: .6s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(1) .sw-tick { animation-delay: .85s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(2) { animation-delay: .85s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(2) .sw-tick { animation-delay: 1.1s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(3) { animation-delay: 1.1s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(3) .sw-tick { animation-delay: 1.35s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(4) { animation-delay: 1.35s; } .sw-motion .sw-s-call.is-on .sw-chip:nth-child(4) .sw-tick { animation-delay: 1.6s; } .sw-motion .is-on .sw-clock-fg { animation: sw-arc 1.6s cubic-bezier(.45,0,.25,1) .2s both; } .sw-motion .is-on .sw-clock-txt b { animation: sw-pop .5s cubic-bezier(.3,1.45,.55,1) .25s both; } .sw-motion .is-on .sw-row { animation: sw-slide .5s cubic-bezier(.2,.8,.2,1) both; } .sw-motion .is-on .sw-row:nth-child(1) { animation-delay: .2s; } .sw-motion .is-on .sw-row:nth-child(2) { animation-delay: .32s; } .sw-motion .is-on .sw-row:nth-child(3) { animation: sw-slide .5s cubic-bezier(.2,.8,.2,1) .44s both, sw-hi .5s ease 1.45s both; } .sw-motion .is-on .sw-done { animation: sw-done .45s cubic-bezier(.3,1.5,.55,1) both; } .sw-motion .is-on .sw-row:nth-child(1) .sw-done { animation-delay: .7s; } .sw-motion .is-on .sw-row:nth-child(2) .sw-done { animation-delay: 1.15s; } .sw-motion .is-on .sw-ready { animation: sw-pop .5s cubic-bezier(.3,1.45,.55,1) 1.5s both; } .sw-motion .is-on .sw-d-ctrl { animation: sw-drop .55s cubic-bezier(.3,1.3,.5,1) .2s both; } .sw-motion .is-on .sw-d-dot { animation: sw-blink .3s steps(1) .75s 3 both; } .sw-motion .is-on .sw-d-dot:nth-of-type(2) { animation-delay: .85s; } .sw-motion .is-on .sw-d-dot:nth-of-type(3) { animation-delay: .95s; } .sw-motion .is-on .sw-d-pad { animation: sw-in-r .55s cubic-bezier(.2,.8,.2,1) .5s both; } .sw-motion .is-on .sw-d-w2 { animation: sw-draw .3s ease-out .95s both; } .sw-motion .is-on .sw-d-w1 { animation: sw-draw .5s ease-in-out 1s both; } .sw-motion .is-on .sw-d-strike { animation: sw-glow .4s ease 1.45s both; } .sw-motion .is-on .sw-d-led { animation: sw-led .5s steps(1) 1.3s both; } .sw-motion .is-on .sw-d-badge { animation: sw-badge .5s cubic-bezier(.3,1.6,.5,1) 1.6s both; } .sw-motion .sw-s-install.is-on .sw-chip:nth-child(1) { animation-delay: .4s; } .sw-motion .sw-s-install.is-on .sw-chip:nth-child(1) .sw-tick { animation-delay: .9s; } .sw-motion .sw-s-install.is-on .sw-chip:nth-child(2) { animation-delay: 1.45s; } .sw-motion .sw-s-install.is-on .sw-chip:nth-child(2) .sw-tick { animation-delay: 1.7s; } .sw-motion .is-on .sw-share { animation: sw-press .45s ease .3s both; } .sw-motion .is-on .sw-share::after { animation: sw-burst .7s ease-out .4s both; } .sw-motion .is-on .sw-mem { animation: sw-in-r .5s cubic-bezier(.2,.8,.2,1) both; } .sw-motion .is-on .sw-mem .sw-pill-ok { animation: sw-pop .45s cubic-bezier(.3,1.5,.55,1) both; } .sw-motion .is-on .sw-mem:nth-child(1) { animation-delay: .55s; } .sw-motion .is-on .sw-mem:nth-child(1) .sw-pill-ok { animation-delay: .95s; } .sw-motion .is-on .sw-mem:nth-child(2) { animation-delay: .85s; } .sw-motion .is-on .sw-mem:nth-child(2) .sw-pill-ok { animation-delay: 1.25s; } .sw-motion .is-on .sw-mem:nth-child(3) { animation-delay: 1.15s; } .sw-motion .is-on .sw-mem:nth-child(3) .sw-pill-ok { animation-delay: 1.55s; } .sw-paused .sw-track *, .sw-paused .sw-track *::after, .sw-paused .sw-stage *, .sw-paused .sw-stage *::before, .sw-paused .sw-stage *::after { animation-play-state: paused !important; } .sw-still .sw-track *, .sw-still .sw-track *::after, .sw-still .sw-stage *, .sw-still .sw-stage *::before, .sw-still .sw-stage *::after { animation: none !important; } .sw-boot, .sw-boot *, .sw-boot *::before, .sw-boot *::after { transition: none !important; } @keyframes sw-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes sw-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } } @keyframes sw-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } } @keyframes sw-wave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(var(--h, .6)); } } @keyframes sw-dash { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: .9; clip-path: inset(0); } } @keyframes sw-march { from { background-position: 0 0; } to { background-position: 11px 0; } } @keyframes sw-pop { from { opacity: 0; transform: scale(.6) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes sw-check { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } } @keyframes sw-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sw-arc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes sw-done { from { background-color: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px #3a4558; transform: scale(.9); } to { background-color: rgba(74,222,128,.15); color: var(--ok); box-shadow: inset 0 0 0 1.5px transparent; transform: none; } } @keyframes sw-hi { from { border-color: var(--line); background-color: var(--panel-2); } to { border-color: var(--blue-hi); background-color: rgba(59,130,246,.1); } } @keyframes sw-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } } @keyframes sw-in-r { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes sw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes sw-blink { 0% { opacity: .25; } 50% { opacity: 1; } } @keyframes sw-glow { from { fill: #3a4558; filter: none; } to { fill: var(--sky); } } @keyframes sw-led { 0% { fill: #3a4558; filter: none; } 40% { fill: var(--warn); filter: drop-shadow(0 0 4px rgba(242,184,75,.9)); } 100% { fill: var(--ok); } } @keyframes sw-pulse { 50% { opacity: .35; } } @keyframes sw-st-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } } @keyframes sw-st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes sw-wave-on { from { opacity: .4; transform: scaleY(.18); } to { opacity: 1; transform: none; } } @keyframes sw-badge { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } } @keyframes sw-press { 0%, 100% { transform: none; } 45% { transform: scale(.93); } } @keyframes sw-burst { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(120,178,255,.6); } 100% { opacity: 0; box-shadow: 0 0 0 12px rgba(120,178,255,0); } } /* Wide stage (desktop): scenes a size up so they hold the width */ @container (min-width: 780px) { .sw-art { gap: 34px; font-size: .94rem; } .sw-call { width: 312px; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; padding: 18px 18px 16px; } .sw-av { width: 54px; height: 54px; } .sw-av .fq-ic { width: 23px; height: 23px; } .sw-call-txt b, .sw-join-txt b { font-size: 1.14rem; } .sw-call-txt small, .sw-join-txt small { font-size: .7rem; } .sw-wave { height: 34px; } .sw-chips { gap: 9px; } .sw-chip { min-width: 178px; gap: 10px; padding: 8px 9px 8px 13px; font-size: .98rem; } .sw-chip > .fq-ic { width: 17px; height: 17px; } .sw-tick, .sw-done { width: 22px; height: 22px; } .sw-clock { width: 146px; height: 146px; } .sw-clock-txt b { font-size: 3.5rem; } .sw-clock-txt small { font-size: .7rem; } .sw-win { width: 400px; } .sw-win-bar { padding: 11px 14px; font-size: .72rem; } .sw-win-body { grid-template-columns: 46px minmax(0, 1fr); } .sw-side { gap: 11px; padding: 13px 12px; } .sw-rows { gap: 7px; padding: 12px; } .sw-row { padding: 8px 10px 8px 12px; } .sw-row > .fq-ic { width: 17px; height: 17px; } .sw-ready { font-size: .7rem; padding: 6px 10px; } .sw-door { width: 344px; } .sw-join { width: 262px; grid-template-columns: 50px minmax(0, 1fr); padding: 18px; row-gap: 16px; } .sw-join-ic { width: 50px; height: 50px; border-radius: 13px; } .sw-join-ic .fq-ic { width: 24px; height: 24px; } .sw-share { padding: 12px; font-size: .95rem; } .sw-mems { width: 330px; gap: 9px; } .sw-mem { padding: 9px 12px; gap: 12px; } .sw-ava { width: 34px; height: 34px; font-size: .74rem; } .sw-pill { font-size: .7rem; padding: 6px 9px; } } /* Laptop-wide stage: the whole scene a size up (zoom lays it out again at the larger size, so text stays sharp) */ @container (min-width: 880px) { .sw-art { zoom: 1.14; min-height: 226px; padding-block: 18px 16px; } } /* Narrow stage (under about 700 px wide windows): scenes stack */ @container (max-width: 600px) { .sw-art { flex-direction: column; gap: 12px; padding: 18px 14px 16px; min-height: 0; } .sw-dash, .sw-clock { display: none; } .sw-call { width: min(100%, 300px); row-gap: 12px; padding: 13px 14px 12px; } .sw-wave { height: 24px; } .sw-chips { width: min(100%, 300px); grid-template-columns: 1fr 1fr; gap: 7px; } .sw-tags { width: 100%; grid-template-columns: repeat(2, auto); justify-content: center; } .sw-chip { min-width: 0; font-size: .84rem; gap: 7px; padding: 6px 6px 6px 9px; } .sw-chip > .fq-ic { width: 14px; height: 14px; } .sw-tick { width: 18px; height: 18px; } .sw-win { width: min(100%, 320px); } .sw-win-time { display: inline-flex; } .sw-win-body { grid-template-columns: minmax(0, 1fr); } .sw-side { display: none; } .sw-door { width: min(100%, 272px); } .sw-join { width: min(100%, 320px); grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 0; padding: 11px 12px; } .sw-join-ic { width: 40px; height: 40px; border-radius: 11px; } .sw-share { grid-column: auto; padding: 9px 14px; } .sw-mems { width: min(100%, 320px); gap: 6px; } .sw-mem { padding: 7px 9px; } .sw-mem:nth-child(3) { display: none; } } /* Phone-width stage: tighter so every label shows in full */ @container (max-width: 330px) { .sw-tags { gap: 6px; } .sw-tags .sw-chip { gap: 6px; padding: 5px 5px 5px 8px; font-size: .8rem; } .sw-tags .sw-chip > .fq-ic { width: 13px; height: 13px; } .sw-win-bar { padding: 9px 10px; } .sw-win-bar > i { display: none; } .sw-win-bar > span { margin-left: 0; letter-spacing: .05em; } .sw-join { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 11px; } .sw-join-ic { width: 36px; height: 36px; border-radius: 10px; } .sw-join-ic .fq-ic { width: 20px; height: 20px; } .sw-join-txt small { letter-spacing: .05em; } .sw-share { padding: 9px 12px; } } /* Small phones (under about 355 px): stack the install tags and put Share under the link, so nothing touches */ @container (max-width: 270px) { .sw-tags { grid-template-columns: auto; } .sw-join { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; } .sw-share { grid-column: 1 / -1; } } /* Smallest phones (320 px): drop chip icons, tighter cards */ @container (max-width: 250px) { .sw-art { padding-inline: 10px; } .sw-call { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 12px; } .sw-av { width: 40px; height: 40px; } .sw-av .fq-ic { width: 18px; height: 18px; } .sw-call-txt b, .sw-join-txt b { font-size: .98rem; } .sw-chips { gap: 6px; } .sw-chip { gap: 5px; padding: 5px 5px 5px 9px; font-size: .8rem; } .sw-chip > .fq-ic { display: none; } .sw-mem { gap: 7px; padding: 6px 8px; } .sw-ava { width: 26px; height: 26px; font-size: .64rem; } } /* Under 900px: with motion, the track turns into a compact row of four and the stage carries the label and line */ @media (max-width: 899px) { /* No JS or reduced motion: a plain vertical list, like the old strip */ .hm-switch .sw { --g: 8px; padding-top: 34px; padding-bottom: 30px; } .sw-track { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 24px; } /* even rows: nodes and connectors evenly spaced */ .sw-step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; } .sw-node { grid-row: 1 / span 2; margin: 0; } .sw-name { font-size: 1.9rem; padding-top: 4px; } .sw-line { min-height: 0; max-width: none; } .sw-seg { top: 60px; bottom: -20px; left: 25px; right: auto; width: 2px; height: auto; } .sw-fill { transform-origin: center top; background: linear-gradient(180deg, var(--blue-hi), var(--sky)); } .sw-js:not(.sw-motion) .sw-fill, .sw-js:not(.sw-motion) .is-done .sw-fill { transform: scaleY(0); transform-origin: center top; } .sw-js:not(.sw-motion) .is-done .sw-fill { transform: scaleY(1); } /* With motion: a compact row of four */ .sw-motion .sw-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); } .sw-motion .sw-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; } .sw-motion .sw-node { grid-row: auto; width: 48px; height: 48px; border-radius: 13px; } .sw-motion .sw-node .fq-ic { width: 23px; height: 23px; } .sw-motion .sw-name { padding: 0; font-size: 1.32rem; } .sw-motion .sw-num { display: none; } .sw-motion .sw-line { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sw-motion .sw-seg { top: 23px; bottom: auto; left: calc(50% + 32px); right: calc(32px - 50% - var(--g)); width: auto; height: 2px; } .sw-motion .sw-fill { background: linear-gradient(90deg, var(--blue-hi), var(--sky)); } .sw-motion .sw-beam { left: calc((100% - var(--g)) / 2 - 24px); width: 48px; } /* The scenes share the stage's rows (subgrid), so every caption box is as tall as the tallest and its top line never moves */ .sw-motion .sw-cap { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--panel-2); text-align: center; } .sw-motion .sw-cap b { font: 700 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; } .sw-motion .sw-cap span { color: var(--fg); font-size: 1rem; line-height: 1.4; text-wrap: balance; } .sw-js:not(.sw-motion) .sw-beam { display: none; } } @media (max-width: 599px) { .hm-switch .sw { padding-top: 30px; padding-bottom: 22px; } .hm-switch .sw-head { margin-bottom: 26px; column-gap: 12px; } .sw-play { width: 38px; height: 38px; } .sw-js .sw-stage { margin-top: 18px; } .sw-motion .sw-name { font-size: 1.12rem; } .sw-motion .sw-node { width: 44px; height: 44px; } .sw-motion .sw-seg { top: 21px; left: calc(50% + 29px); right: calc(29px - 50% - var(--g)); } .sw-motion .sw-beam { left: calc((100% - var(--g)) / 2 - 22px); width: 44px; } .sw-motion .sw-cap b { font-size: 1.7rem; } .sw-motion .sw-cap { padding-inline: 12px; } .sw-motion .sw-cap span { font-size: .9rem; } } /* Small phones: keep the four stage lines even. From 360 px each fits one line with room to spare; below that all four break into two balanced lines instead of one or two wrapping on their own. */ @container (max-width: 300px) { .sw-motion .sw-cap { padding-inline: 10px; } .sw-motion .sw-cap span { font-size: .86rem; } } @container (max-width: 270px) { .sw-motion .sw-cap span { max-width: 11.5em; } } @media (prefers-reduced-motion: reduce) { .hm-switch .sw *, .hm-switch .sw *::before, .hm-switch .sw *::after { animation: none !important; transition: none !important; } } /* SW-END */ /* TU-START */ /* Home page "Tap to unlock". Brayden, 2026-10-20: "the tap to unlock is like a really unique feature that most gyms dont have. this needs to be a focal point on the main page". The member home screen is drawn in code (Summit Fitness, demo numbers) so the button can be tapped on a loop: a tap ring, the button turns green "Unlocked", the entry pops up. Without JS or with reduced motion it shows the unlocked moment, still. */ .tu { overflow: hidden; } .tu-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .tu-copy { min-width: 0; display: grid; gap: 18px; align-content: center; } .tu h2 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); } .tu h2 em { font-style: normal; color: var(--blue-hi); } .tu-line { color: var(--muted); font-size: 1.15rem; line-height: 1.5; max-width: 30ch; } .tu-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .tu-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .92rem; font-weight: 600; color: var(--fg); } .tu-chips svg { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .tu-stage { position: relative; min-width: 0; display: grid; justify-items: center; padding: 8px 0 24px; } .tu-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; max-width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(59,130,246,.22), transparent 70%); pointer-events: none; } .tu-stage svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tu-phone { position: relative; width: min(318px, 86%); padding: 10px; border-radius: 46px; background: #05070b; border: 1px solid #262d3a; box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 0 0 2px #151a23; } .tu-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; font-size: 12.5px; } .tu-notch { position: absolute; left: 50%; top: 1px; width: 84px; height: 22px; margin-left: -42px; border-radius: 999px; background: #000; } .tu-bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; } .tu-bars i { width: 3px; border-radius: 1px; background: var(--fg); } .tu-bars i:nth-child(1) { height: 4px; } .tu-bars i:nth-child(2) { height: 6px; } .tu-bars i:nth-child(3) { height: 8px; } .tu-bars i:nth-child(4) { height: 10px; } .tu-head { display: flex; align-items: center; gap: 10px; padding: 6px 2px 10px; border-bottom: 1px solid #1c222d; } .tu-logo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-hi); color: #fff; font-weight: 800; font-size: 16px; } .tu-gym { flex: 1; min-width: 0; display: grid; gap: 3px; } .tu-gym b { font-size: 15px; font-weight: 750; } .tu-gym small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .tu-bell { width: 20px; height: 20px; color: var(--fg); } .tu-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 13px; background: linear-gradient(90deg, #7c3aed, #3b5bfd 70%, #2563eb); color: #fff; } .tu-flex-pts { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .tu-flex-pts b { font-size: 17px; font-weight: 800; } .tu-flex-pts svg { width: 17px; height: 17px; } .tu-streak { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .tu-streak svg { width: 13px; height: 13px; color: #fb923c; fill: #fb923c; stroke: none; } .tu-card { display: grid; gap: 9px; padding: 12px; border: 1px solid #262d3a; border-radius: 16px; background: #10141c; } .tu-btn { position: relative; height: 54px; border-radius: 12px; background: #3b82f6; box-shadow: 0 14px 30px -14px rgba(59,130,246,.95); color: #fff; overflow: hidden; } .tu-btn-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 18px; font-weight: 750; } .tu-btn-face svg { width: 21px; height: 21px; stroke-width: 2.2; } .tu-btn-open { opacity: 0; transform: translateY(8px); } .tu-tap { position: absolute; left: 62%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.55); opacity: 0; transform: scale(.4); } .tu-code { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 11px; background: #1c222d; font-size: 15px; font-weight: 650; } .tu-code svg { width: 18px; height: 18px; } .tu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tu-tiles span { display: grid; justify-items: center; gap: 7px; padding: 15px 6px; border: 1px solid #262d3a; border-radius: 14px; background: #10141c; font-size: 13.5px; font-weight: 650; } .tu-tiles svg { width: 24px; height: 24px; color: var(--blue-hi); } .tu-toast { position: absolute; left: max(-4%, calc(50% - 300px)); bottom: 70px; z-index: 2; display: flex; align-items: center; gap: 11px; min-width: 250px; padding: 12px 14px; border: 1px solid #2a313b; border-radius: 14px; background: rgba(21,26,35,.97); box-shadow: 0 22px 40px -18px rgba(0,0,0,.9); } .tu-toast-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(74,222,128,.14); color: var(--ok); } .tu-toast-ic svg { width: 20px; height: 20px; } .tu-toast-txt { flex: 1; min-width: 0; display: grid; gap: 3px; } .tu-toast-txt b { font-size: 14.5px; font-weight: 700; } .tu-toast-txt small { font: 400 11.5px/1 var(--mono); color: var(--muted); } .tu-toast-tag { flex: none; padding: 5px 9px; border-radius: 999px; background: rgba(74,222,128,.13); color: var(--ok); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } /* the unlocked moment: shown still without JS or under reduced motion, and on each loop with JS */ .tu-stage:not(.tu-live) .tu-btn, .tu-stage.is-open .tu-btn { background: #16a34a; box-shadow: 0 14px 30px -14px rgba(34,197,94,.95); } .tu-stage:not(.tu-live) .tu-btn-lock, .tu-stage.is-open .tu-btn-lock { opacity: 0; transform: translateY(-8px); } .tu-stage:not(.tu-live) .tu-btn-open, .tu-stage.is-open .tu-btn-open { opacity: 1; transform: none; } .tu-live .tu-toast { opacity: 0; transform: translateY(12px) scale(.97); } .tu-live.is-open .tu-toast { opacity: 1; transform: none; } .tu-live .tu-btn { transition: background-color .35s ease, box-shadow .35s ease; } .tu-live .tu-btn-face { transition: opacity .3s ease, transform .3s ease; } .tu-live .tu-toast { transition: opacity .35s ease, transform .35s ease; } .tu-live.is-tap .tu-tap { animation: tu-tap .6s ease-out; } @keyframes tu-tap { 0% { opacity: .75; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } } /* Brayden: "the tap to unlock looks really awkward cause its so small with so much space around it. make the phone look normal" -> a full-size phone at real proportions (whole screen, tab bar and home bar), and a tighter section */ section.block.tu { padding-block: 72px 80px; } .tu-wrap { max-width: 1080px; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; } .tu h2 { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5rem); } .tu-line { font-size: 1.25rem; max-width: 26ch; } .tu-stage { padding: 0; } .tu-stage::before { width: 640px; } .tu-phone { width: 344px; max-width: 100%; padding: 11px; border-radius: 54px; } .tu-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 322 / 698; border-radius: 44px; background: #0b0e14; overflow: hidden; font-size: 14px; color: var(--fg); } .tu-status { flex: none; height: 46px; padding: 6px 26px 0 30px; font-size: 14px; } .tu-notch { top: 11px; width: 96px; height: 28px; margin-left: -48px; } .tu-sys { display: flex; align-items: center; gap: 5px; } .tu-wifi { width: 15px; height: 15px; stroke-width: 2.4; } .tu-batt { position: relative; width: 23px; height: 11px; padding: 1.5px; border: 1px solid rgba(230,233,239,.6); border-radius: 3.5px; } .tu-batt::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(230,233,239,.6); } .tu-batt i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: var(--fg); } .tu-body { flex: 1; min-height: 0; display: grid; align-content: start; gap: 13px; padding: 4px 14px 0; overflow: hidden; } .tu-tiles span.tu-peek { padding-bottom: 40px; } .tu-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 6px 6px; border-top: 1px solid #1c222d; background: #0e1219; } .tu-tabs span { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); } .tu-tabs svg { width: 22px; height: 22px; } .tu-tabs .tu-on { color: var(--blue-hi); } .tu-home-bar { flex: none; display: block; width: 116px; height: 4.5px; margin: 8px auto 9px; border-radius: 99px; background: rgba(230,233,239,.85); } .tu-toast { left: auto; right: calc(100% - 64px); bottom: auto; top: 46%; min-width: 262px; } @media (max-width: 999px) { .tu-wrap { gap: 48px; } .tu-phone { width: 320px; } } @media (max-width: 799px) { section.block.tu { padding-block: 56px 64px; } .tu-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } .tu-line { max-width: 34ch; } .tu-toast { right: auto; left: 50%; top: auto; bottom: 92px; transform: translateX(-50%); } .tu-live .tu-toast { transform: translate(-50%, 12px) scale(.97); } .tu-live.is-open .tu-toast { transform: translateX(-50%); } } @media (max-width: 420px) { .tu-phone { width: 318px; } .tu-toast { min-width: 0; width: calc(100% - 36px); } } /* Small phones: the phone keeps its real proportions and the whole stage scales down, so nothing inside is cut off */ @media (max-width: 379px) { .tu-stage { zoom: .86; } .tu-phone { width: min(318px, 100%); } } /* full screen: slightly bigger controls, and the next row of tiles runs on under the tab bar like a scrolling screen */ .tu h2 { max-width: none; } .tu h2 em { display: block; } .tu-flex { padding: 12px 14px; } .tu-btn { height: 60px; } .tu-code { height: 48px; } .tu-tiles span { padding-block: 18px; } .tu-tiles span.tu-peek { padding-bottom: 240px; } .tu-toast { width: max-content; top: 52%; } @media (max-width: 799px) { .tu-toast { top: auto; } } @media (max-width: 420px) { .tu-toast { width: calc(100% - 36px); } } .tu-tiles span.tu-peek { padding-bottom: 60px; } .tu-next { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #262d3a; border-radius: 14px; background: #10141c; } .tu-next-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(59,130,246,.14); color: var(--blue-hi); } .tu-next-ic svg { width: 21px; height: 21px; } .tu-next-txt { flex: 1; min-width: 0; display: grid; gap: 2px; } .tu-next-txt small { font: 600 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .tu-next-txt b { font-size: 15px; font-weight: 700; } .tu-next-txt span { font-size: 12.5px; color: var(--muted); } .tu-next-tag { flex: none; padding: 5px 9px; border-radius: 999px; background: rgba(74,222,128,.13); color: var(--ok); font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .tu-flex-pts { white-space: nowrap; } .tu-toast { right: calc(100% - 30px); top: 61%; } @media (max-width: 799px) { .tu-toast { right: auto; top: auto; } } @media (max-width: 420px) { .tu-flex { padding-inline: 11px; } .tu-streak { padding-inline: 7px; } } /* Brayden, again: "tap to unlock section still looks awkward" -> laid out like Manage's "Your gym in your pocket", which he likes: phone on the left, a very big heading on the right with one short line, the two halves the same width, and the entry it logs on a small card on the phone's edge */ section.block.tu { padding-block: 72px; } .tu-wrap { max-width: var(--wrap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .tu-copy { gap: 20px; } .tu h2 { font-size: clamp(3.1rem, 6.6vw, 5.6rem); font-weight: 800; line-height: .95; } .tu-line { font-size: 1.2rem; max-width: 24ch; } .tu-stage { justify-self: center; } .tu-stage::before { width: 560px; } .tu-phone { width: 306px; padding: 10px; border-radius: 50px; } .tu-screen { aspect-ratio: 286 / 600; border-radius: 41px; } .tu-toast { top: auto; bottom: 26%; left: calc(100% - 92px); right: auto; width: max-content; min-width: 0; display: grid; grid-template-columns: auto auto auto; column-gap: 11px; row-gap: 8px; padding: 11px 13px 12px; } .tu-toast-head { grid-column: 1 / -1; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); } .tu-toast-txt b { font-size: 14px; } @media (max-width: 999px) { .tu-wrap { gap: 40px; } .tu-toast { left: auto; right: -14px; } } @media (max-width: 799px) { section.block.tu { padding-block: 56px 64px; } .tu-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } .tu-copy { order: -1; } .tu-toast { left: auto; right: -12px; bottom: 22%; transform: none; } .tu-live .tu-toast { transform: translateY(12px) scale(.97); } .tu-live.is-open .tu-toast { transform: none; } } @media (max-width: 420px) { .tu-phone { width: 300px; } .tu-toast { width: max-content; right: -6px; } } /* the entry card drops in over the top of the phone, like the sales alerts on Manage */ .tu-stage { padding-top: 30px; } .tu .tu-toast, .tu .tu-live.is-open .tu-toast { top: 0; bottom: auto; left: 50%; right: auto; width: min(300px, calc(100% - 8px)); grid-template-columns: auto minmax(0, 1fr) auto; transform: translateX(-50%); } .tu .tu-live .tu-toast { transform: translate(-50%, -16px) scale(.97); } .tu .tu-live.is-open .tu-toast { transform: translateX(-50%); } /* TU-END */ /* HW-START */ /* Brayden: the four cards should not be exactly as wide as the "Moving your gym is our job" panel above them */ .ft > .wrap { max-width: 1360px; } @media (min-width: 1240px) { .ft-grid { gap: 24px; } .ft-card { --aw: 300px; } .ft-text { padding-inline: 32px 30px; } } /* HW-END */ /* FA-START */ /* FA: Brayden, "exercise your faith ... just make it simple". Home page verse of the week strip, below the "Your gym, your way" owner section (the feature cards sit between them) and just above the Book a trial band. No box and no panel: a small cross between hairlines, the eyebrow, a big heading and one verse in large type on a faint blue glow. With JS (.fa-on) the four verses stack in one grid cell, so the stage always keeps the tallest verse's height at every width, and they crossfade; the dots and pause button come from fa.js. */ section.block.fa { padding-block: 24px 112px; text-align: center; background: radial-gradient(closest-side, rgba(37,99,235,.13), rgba(37,99,235,.05) 55%, rgba(37,99,235,0)) 50% 62% / min(980px, 100%) 72% no-repeat; } .fa-wrap { display: flex; flex-direction: column; align-items: center; } .fa-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; color: var(--sky); } .fa-mark::before, .fa-mark::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, rgba(38,45,58,0), #323b4b); } .fa-mark::after { transform: scaleX(-1); } .fa-mark svg { display: block; width: 14px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .9; } .fa-eyebrow { margin: 0; } .fa-title { margin: 16px 0 0; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem); } .fa-show { width: 100%; max-width: 900px; margin-top: 44px; } .fa-verse { margin: 0; min-width: 0; } .fa-text { margin: 0; } .fa-text p { max-width: 36ch; margin: 0 auto; font: 500 clamp(1.3rem, .95rem + 1.75vw, 2.25rem)/1.38 var(--body); letter-spacing: -.012em; color: var(--fg); text-wrap: balance; } .fa-sc { font-variant: small-caps; letter-spacing: .02em; } .fa-nw { white-space: nowrap; } /* keeps "thou goest." together so "goest." never sits alone on the last line */ .fa-ref { margin-top: 20px; font: 400 .84rem/1.4 var(--mono); letter-spacing: .03em; color: var(--sky); } .fa-note { margin: 32px 0 0; max-width: 46ch; color: var(--muted); font-size: 1rem; line-height: 1.5; text-wrap: balance; } /* Slideshow (fa.js adds .fa-on): every verse in the same cell; the visible one is centred in the reserved height. The new verse starts fading in only once the old one has faded out, so the two never overlap. */ .fa-on .fa-stage { display: grid; grid-template-columns: minmax(0, 1fr); } .fa-on .fa-verse { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } .fa-on .fa-verse.fa-cur { opacity: 1; visibility: visible; transition: opacity .75s ease .4s, visibility 0s; } .fa-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; } .fa-dots { display: flex; gap: 2px; } .fa-dot { width: 28px; height: 28px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fa-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #5e687c; transition: width .3s ease, background-color .3s ease; } .fa-dot:hover::before { background: var(--muted); } .fa-dot[aria-current="true"]::before { width: 22px; background: var(--blue-hi); } .fa-play { flex: none; width: 32px; height: 32px; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid #3a4456; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } .fa-play[hidden] { display: none; } .fa-play:hover { color: var(--fg); border-color: #5e687c; } .fa-play svg { grid-area: 1 / 1; width: 12px; height: 12px; fill: currentColor; } .fa-play .fa-i-play, .fa-play[data-paused] .fa-i-pause { display: none; } .fa-play[data-paused] .fa-i-play { display: block; } @media (max-width: 560px) { section.block.fa { padding-block: 16px 80px; background-size: 100% 70%; } .fa-mark { margin-bottom: 22px; } .fa-show { margin-top: 32px; } .fa-ref { margin-top: 16px; } .fa-controls { margin-top: 24px; } .fa-note { margin-top: 24px; } } @media (prefers-reduced-motion: reduce) { .fa-on .fa-verse, .fa-on .fa-verse.fa-cur, .fa-dot::before { transition: none; } } /* FA-END */ /* FB-START */ /* Brayden: "make the cross and verse of the week slightly bigger and make it fade to the next verse slightly faster" (the verse also changes every 4.5 s instead of 6 s, set in the FA step) */ .fa-mark { gap: 20px; margin-bottom: 30px; } .fa-mark::before, .fa-mark::after { width: 88px; } .fa-mark svg { width: 22px; height: 33px; stroke-width: 1.8; } .fa-eyebrow { font-size: 1rem; } .fa-text p { font-size: clamp(1.42rem, 1.02rem + 1.95vw, 2.5rem); } .fa-on .fa-verse { transition: opacity .25s ease, visibility 0s linear .25s; } .fa-on .fa-verse.fa-cur { transition: opacity .4s ease .2s, visibility 0s; } @media (prefers-reduced-motion: reduce) { .fa-on .fa-verse, .fa-on .fa-verse.fa-cur { transition: none; } } /* FB-END */ /* HB-START */ /* Brayden, 2026-10-20: "make your gym your way bigger and more promonite" -> a much bigger centred heading, wider and taller tiles, the graphics drawn about a fifth bigger (zoom, so they keep their layout), bigger labels, a stronger glow on the band */ section.block.hw-own { padding-block: 88px 100px; background: radial-gradient(70% 120% at 50% 0%, rgba(59,130,246,.17), transparent 70%), var(--panel); } .hw-own > .wrap { max-width: 1360px; } .hw-own .hx-head { max-width: none; justify-items: center; text-align: center; margin-bottom: 52px; } .hw-own .hx-head h2 { font-size: clamp(3rem, 1.5rem + 4.4vw, 5.6rem); line-height: .95; } .hw-own .hx-head .eyebrow { font-size: .92rem; } .hw-own .fq-tiles { gap: 28px; } .hw-own .fq-art { height: 272px; border-color: rgba(59,130,246,.32); } .hw-own .fq-ui { transform: none; zoom: 1.2; } .hw-own .fq-label { font-size: clamp(2.4rem, 1.6rem + 1.5vw, 3.2rem); } .hw-own .fq-line { font-size: 1.15rem; } @media (max-width: 1239px) { .hw-own .fq-ui { zoom: 1.08; } .hw-own .fq-art { height: 250px; } } @media (max-width: 1099px) { .hw-own .fq-ui { zoom: 1.25; } .hw-own .fq-art { height: 280px; } } /* two columns */ @media (max-width: 799px) { .hw-own .fq-ui { zoom: 1.05; } .hw-own .fq-art { height: 240px; } } @media (max-width: 599px) { section.block.hw-own { padding-block: 64px 72px; } .hw-own .hx-head { margin-bottom: 36px; } .hw-own .fq-ui { zoom: 1.12; } .hw-own .fq-art { height: 224px; } } @media (max-width: 359px) { .hw-own .fq-ui { zoom: 1; } .hw-own .fq-art { height: 196px; } } /* HB-END */ /* LG-START */ /* Owners page: partner gym logos. Brayden, 2026-10-20: "add each partner's gym logo on the owners page. if they are blurry make them clear", then "i dont like the white backgrounds and then the one black background ... make it a slidehow or do something creative with it" -> every logo cut out of its background in one light tone, on a slow endless strip that pauses under the mouse, fading out at both ends. Each owner's review card carries its gym's logo next to the name. */ .quote figcaption:has(.lg-own) { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-content: center; } .quote figcaption:has(.lg-own) > b, .quote figcaption:has(.lg-own) > span { grid-column: 2; } .lg-own { grid-row: 1 / span 2; width: 72px; height: 50px; object-fit: contain; opacity: .92; } section.block.lg { --lh: 128px; --lg-gap: 104px; padding-top: 24px; overflow: hidden; } .lg .block-head { margin-bottom: 44px; } .lg-marquee { overflow: hidden; padding-block: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } /* 40s and 30s per set (Brayden, 2026-10-23: "make it go a bit faster"); ls/ls.js takes over from this animation */ .lg-track { display: flex; width: max-content; animation: lg-scroll 40s linear infinite; } .lg-set { flex: none; display: flex; align-items: center; gap: var(--lg-gap); margin: 0; padding: 0 var(--lg-gap) 0 0; list-style: none; } .lg-set li { flex: none; height: var(--lh); display: grid; place-items: center; } .lg-set img { display: block; width: auto; height: calc(var(--lh) * var(--k, 1)); opacity: .85; transition: opacity .25s ease, transform .25s ease; } .lg-set li:hover img { opacity: 1; transform: scale(1.07); } .lg-marquee:hover .lg-track { animation-play-state: paused; } @keyframes lg-scroll { to { transform: translateX(-50%); } } @media (max-width: 639px) { section.block.lg { --lh: 88px; --lg-gap: 60px; } .lg .block-head { margin-bottom: 32px; } .lg-track { animation-duration: 30s; } .lg-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } } /* no motion: the logos simply sit in centred rows */ @media (prefers-reduced-motion: reduce) { .lg-track { width: auto; animation: none; } .lg-set { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 40px; padding: 0 20px; } .lg-set[aria-hidden="true"] { display: none; } .lg-marquee { -webkit-mask-image: none; mask-image: none; } .lg-set img, .lg-set li:hover img { transition: none; transform: none; } } /* LG-END */ /* RF-START */ /* Contact. Brayden, 2026-10-20: "talk to us is off to the left" (centred), the big $500 "looks to salesy keep it simple", then "make the contact page flow better" -> one centred column: heading, a two-way switch (Get help / Refer a gym, get $500), then the one form that was picked. Without script both forms simply show one after the other. */ .page-head:has(#contact-form) > .wrap { justify-items: center; text-align: center; } .page-head:has(#contact-form) .lede { margin-inline: auto; } .cf-switch, .cf-panel { width: 100%; max-width: 720px; } .cf-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); } .cf-switch[hidden], .cf-panel[hidden] { display: none; } .cf-switch [role="tab"] { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: 11px; font: 650 1.02rem/1.2 var(--body); color: var(--muted); text-align: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } .cf-switch [role="tab"]:hover { color: var(--fg); background: rgba(59,130,246,.12); } .cf-switch [role="tab"][aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(37,99,235,.95); } .cf-switch [role="tab"]:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; } .cf-switch svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .cf-panel { display: grid; gap: 14px; text-align: left; } .cf-panel .contact-form, .cf-panel .rf-form { max-width: none; margin-top: 0; } .cf-panel .form-msg { text-align: center; } .page-head:has(#contact-form) .btn[type="submit"] { justify-self: stretch !important; justify-content: center; } .cf-refer { margin-top: 28px; } .cf-refer > h2 { text-align: center; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); } .cf-refer > h2 em { font-style: normal; color: var(--blue-hi); } .rf-line { text-align: center; color: var(--muted); font-size: 1.05rem; line-height: 1.5; max-width: 62ch; justify-self: center; text-wrap: balance; } /* With the switch, the referral heading is the switch itself, so its h2 only labels the panel for screen readers */ .cf-on .cf-refer { margin-top: 0; } .cf-on .cf-refer > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rf-form { gap: 22px; } .rf-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; } .rf-form legend { margin-bottom: 12px; padding: 0; font: 600 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); } .rf-form .row2 > * { min-width: 0; } .rf-opt { color: #6f7a8b; } .rf-form textarea { min-height: 5.5em; } .rf-form select { appearance: none; -webkit-appearance: none; padding-right: 2.4em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; background-size: 16px; } @media (max-width: 599px) { .rf-form .row2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 479px) { .cf-switch { gap: 4px; padding: 4px; border-radius: 14px; } .cf-switch [role="tab"] { min-height: 50px; padding: 8px 6px; font-size: .9rem; text-wrap: balance; } .cf-switch svg { display: none; } } /* RF-END */ /* LB-START */ /* Brayden, 2026-10-20: "on the main page make mygymfitness and the logo bigger" -> the logo and name in the top bar, on every page so the bar stays the same everywhere; still one row with the button on phones */ .nav .wrap { min-height: 78px; } .logo { gap: 12px; font-size: 1.6rem; letter-spacing: -.015em; } .logo img { width: 46px; height: 46px; } @media (max-width: 900px) { header.nav .wrap { padding-top: 12px; } } @media (max-width: 480px) { .logo { font-size: 1.38rem; gap: 10px; } .logo img { width: 40px; height: 40px; } } @media (max-width: 400px) { .logo { font-size: 1.24rem; gap: 8px; } .logo img { width: 36px; height: 36px; } } @media (max-width: 340px) { .logo { font-size: 1.1rem; gap: 7px; } .logo img { width: 32px; height: 32px; } .nav-cta .btn { padding: .68em .72em; font-size: .86rem; } } /* LB-END */ /* FS-START */ /* Brayden, 2026-10-20: the FAQ groups "blend too much". Each group is its own panel with its own colour, matched on its topic chip at the top. */ #fq-start, a[href="#fq-start"] { --c: #78b2ff; --c-rgb: 120,178,255; } #fq-members, a[href="#fq-members"] { --c: #b69cff; --c-rgb: 182,156,255; } #fq-door, a[href="#fq-door"] { --c: #f2b84b; --c-rgb: 242,184,75; } #fq-money, a[href="#fq-money"] { --c: #4ade80; --c-rgb: 74,222,128; } .fq-jump a .fq-ic { color: var(--c, var(--sky)); } .fq-jump a:hover { border-color: var(--c, var(--blue-hi)); background: rgba(var(--c-rgb, 59,130,246), .1); } .fq-groups { gap: 36px; } .fq-group { position: relative; padding: 44px 44px 30px; border: 1px solid rgba(var(--c-rgb), .3); border-top: 5px solid var(--c); border-radius: 22px; background: radial-gradient(70% 140% at 0% 0%, rgba(var(--c-rgb), .13), transparent 62%), var(--panel); gap: 48px; } .fq-group-head { position: static; padding-top: 6px; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; } .fq-group-ic { width: 64px; height: 64px; border-radius: 18px; background: rgba(var(--c-rgb), .16); border: 1px solid rgba(var(--c-rgb), .35); color: var(--c); } .fq-group-ic .fq-ic { width: 32px; height: 32px; } .fq-group-label { font-size: 2.6rem; } .fq-count { color: var(--c); } .fq-group .faq { border-top: 0; } .fq-group .faq details:last-child { border-bottom: 0; } .fq-group .faq summary { padding: 20px 0; } .fq-group .faq summary::after { color: var(--c); } .fq-group .fq-list summary:hover::after { color: var(--c); } .fq-group .fq-list a { color: var(--c); } .fq-group { scroll-margin-top: 110px; } @media (max-width: 899px) { .fq-group { padding: 30px 28px 16px; gap: 14px; } .fq-group-head { padding: 0 0 18px; border-bottom: 1px solid rgba(var(--c-rgb), .25); } } @media (max-width: 599px) { .fq-groups { gap: 24px; } .fq-group { padding: 24px 18px 8px; border-radius: 18px; } .fq-group-head { grid-template-columns: 52px minmax(0, 1fr); column-gap: 13px; row-gap: 6px; } .fq-group-ic { width: 52px; height: 52px; border-radius: 14px; } .fq-group-ic .fq-ic { width: 26px; height: 26px; } .fq-group-label { font-size: 2.1rem; } .fq-group .faq summary { padding: 18px 0; font-size: 1.02rem; } } /* FS-END */ /* HC-START */ /* Brayden, 2026-10-20: "i dont like how all the lettering in the how it works is all white" -> the site's blues on the key words: the second half of the heading, "Features", the active feature and its big name. */ .hiw-head h1 em { font-style: normal; color: var(--blue-hi); } .hiw-step::before { top: 12px; left: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(59,130,246,.16); color: var(--sky); font-weight: 700; } /* Brayden, later: "make join online, walk in, and door follows billing white" -> the step names stay white */ /* Brayden, later: "make key features all white again" -> no blue in the Key Features heading, list or names */ /* HC-END */ /* RV-START */ /* Partners: "Leave a review on the App Store" beside the 4.9 rating. Brayden, 2026-10-20: "where could i put leave a review in the app store with a link to it? put that where you think it would go best". Quiet outline button, not a banner. */ .rv-row { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; scroll-margin-top: 110px; } .rv-row .rating { margin: 0; margin-right: auto; } .rv-ask { color: var(--fg); font-weight: 600; margin-right: -6px; } .rv-btn { padding: .72em 1.1em; font-size: .95rem; gap: .55em; } .rv-btn svg { width: 17px; height: 17px; fill: var(--warn); } .rv-btn:hover { border-color: var(--blue-hi); background: rgba(59,130,246,.1); } @media (max-width: 599px) { .rv-row .rating { flex-basis: 100%; } } /* RV-END */ /* CC-START */ /* CC-END */ /* MX-START */ /* Manage page, "Also on the Manage tab". Brayden: "when you hover over each one, it lights it up and if you click it it gives additional information". Without JS each tile simply shows its extra line. With JS (.mng-feats-js) the line folds away and the tile's title becomes a button whose overlay covers the whole tile. Brayden later: no + in the corner, only the highlight and the click. */ .mng-feat { position: relative; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; } .mng-feat-ic { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } .mng-x { color: var(--fg); font-size: .95rem; line-height: 1.5; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--blue-hi); } .mng-feats-js .mng-x { margin-top: 0; } .mng-feats-js .mng-x-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .mng-feats-js .mng-x-wrap > .mng-x { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease, margin-top .25s ease; } .mng-feats-js .mng-feat.is-open .mng-x-wrap { grid-template-rows: 1fr; } .mng-feats-js .mng-feat.is-open .mng-x { margin-top: 10px; opacity: 1; } .mng-feat-btn { all: unset; cursor: pointer; } .mng-feat-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; } .mng-feat-btn:focus-visible { outline: none; } .mng-feat-btn:focus-visible::after { outline: 2px solid var(--blue-hi); outline-offset: -4px; border-radius: 4px; } .mng-feats-js .mng-feat { cursor: pointer; } .mng-feats-js .mng-feat h3 { transition: color .2s ease; } /* Brayden: "when my mouse hovers them it highlights it or makes it bold or something so i know its possible to click on it". 2026-10-20 again: "still not highlighting". The old dark-navy highlight was too faint, so the tile now turns clearly blue with a glow. .is-hot is set from script too (pointer events), and a tap gives the same highlight on touch screens. */ /* Brayden then: "make it less highlighted" -> a softer tint, a thin border and a small glow */ .mng-feat:hover, .mng-feat.is-hot, .mng-feat.is-open { z-index: 2; transform: translateY(-1px); background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.06)); box-shadow: inset 0 0 0 1px rgba(59,130,246,.75), 0 8px 22px -12px rgba(59,130,246,.55); } .mng-feats-js .mng-feat:active { background: rgba(59,130,246,.24); } .mng-feat:hover .mng-feat-ic, .mng-feat.is-hot .mng-feat-ic, .mng-feat.is-open .mng-feat-ic { background: var(--blue); color: #fff; box-shadow: 0 8px 22px -8px rgba(59,130,246,.9); } .mng-feat:hover h3, .mng-feat.is-hot h3, .mng-feat.is-open h3 { color: #fff; } .mng-feat:hover p:not(.mng-x), .mng-feat.is-hot p:not(.mng-x) { color: #dbe4f0; } .mng-feat:focus-within { background: rgba(59,130,246,.12); } @media (prefers-reduced-motion: reduce) { .mng-feat, .mng-feat-ic, .mng-feat h3, .mng-feats-js .mng-x-wrap, .mng-feats-js .mng-x-wrap > .mng-x { transition: none; } } /* MX-END */ /* BG-START */ /* Fixes from the background check of 2026-10-20 */ /* "Your gym, your way": the plan name fits ("Single Membership", not "Single Membe..."), "Keyless entry" stays on one line where the four tiles first share a row, and the phone and door drawings grow with the other two tiles */ .hw-own .fq-phone { zoom: 1.2; } .hw-own .fq-door { max-width: 268px; } @media (min-width: 1240px) and (max-width: 1339px) { .hw-own .fq-ui, .hw-own .fq-phone { zoom: 1.08; } } @media (min-width: 1100px) and (max-width: 1239px) { .hw-own .fq-ui, .hw-own .fq-phone { zoom: 1; } .hw-own .fq-label { font-size: 2.3rem; } } @media (max-width: 1239px) { .hw-own .fq-door { max-width: 236px; } } @media (max-width: 1099px) { .hw-own .fq-phone { zoom: 1.25; } .hw-own .fq-door { max-width: 280px; } } @media (max-width: 799px) { .hw-own .fq-phone { zoom: 1.05; } .hw-own .fq-door { max-width: 240px; } } @media (max-width: 599px) { .hw-own .fq-phone { zoom: 1.1; } .hw-own .fq-door { max-width: 226px; } } @media (max-width: 359px) { .hw-own .fq-phone { zoom: 1; } .hw-own .fq-door { max-width: 200px; } } /* Tap to unlock: the Next class card's time line clears the tab bar on phones; the Entries card is solid, so the phone's status bar no longer shows through it */ .tu-body { gap: 11px; } .tu-toast { background: #151a23; } @media (max-width: 429px) { .tu-body { gap: 8px; } .tu-tiles span { padding-block: 12px; } } /* Partners: TAC's disk and FitPhil's block read heavier than the line logos, so they sit a little smaller and softer */ .lg-set img[src$="tac.webp"] { height: calc(var(--lh) * .78); } .lg-set img[src$="fitphil.svg"] { height: calc(var(--lh) * .8); } .lg-own[src$="tac.webp"] { opacity: .8; } /* Review cards on 320px phones: a smaller logo column so names and roles keep to one line */ @media (max-width: 359px) { .quote figcaption:has(.lg-own) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; } .lg-own { width: 56px; height: 40px; } } /* BG-END */ /* GP-START */ /* Home: even gaps between "Tap to unlock", "Moving your gym is our job", the four key cards and "Exercise your faith". Brayden, 2026-10-20: "make the gap between one tap the door opens and moving your gym is our job as even as the other gaps". 88px between them on computers and tablets, 72px on phones. */ section.hm-switch { padding-top: 47px; } section.block.fa { padding-top: 0; } @media (max-width: 799px) { section.hm-switch { padding-top: 55px; } } @media (max-width: 599px) { section.hm-switch { padding-top: 38px; } section.hm-switch + .ft { padding-top: 8px; } section.block.fa { padding-top: 8px; } } @media (max-width: 429px) { section.hm-switch { padding-top: 18px; } } @media (min-width: 421px) and (max-width: 429px) { section.hm-switch { padding-top: 8px; } } /* Brayden, 2026-10-20: "make book a trail at the bttom slightly bigger" -> the bottom banner's button on every page */ .cta-band .btn { font-size: 1.12rem; padding: 1.05em 1.75em; border-radius: 10px; } @media (max-width: 480px) { .cta-band .btn { font-size: 1.06rem; padding: 1em 1.5em; } } /* GP-END */ /* PH-START */ /* Phones that read as phones (Brayden, 2026-10-20: "the black blends in with the black"): a brushed-metal rim lit from the top left, side buttons and a soft blue glow. The two screenshot phones (hero, Owners) have the rim drawn into the image by ph/frame.py. */ .hero-visual .phone { filter: drop-shadow(0 0 36px rgba(59,130,246,.24)) drop-shadow(0 40px 60px rgba(0,0,0,.55)); } .phone-stage > img { filter: drop-shadow(0 0 32px rgba(59,130,246,.22)) drop-shadow(0 30px 50px rgba(0,0,0,.55)); } .tu-phone { border: 3px solid transparent; background: linear-gradient(#05070b, #05070b) padding-box, linear-gradient(150deg, #c9d0db 0%, #737b8b 16%, #3b414d 42%, #4f5765 70%, #a6aebc 100%) border-box; box-shadow: 0 0 70px -14px rgba(59,130,246,.4), 0 40px 70px -30px rgba(0,0,0,.9), inset 0 0 0 1px #000, inset 0 0 0 2.5px #161b24; } .tu-phone::before, .tu-phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; pointer-events: none; } /* two volume buttons on the left, one long side button on the right */ .tu-phone::before { left: -7px; top: 25%; height: 17%; border-radius: 2px 0 0 2px; background: linear-gradient(180deg, #8d96a5 0 44%, transparent 44% 56%, #6f7786 56% 100%); } .tu-phone::after { right: -7px; top: 29%; height: 12%; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #9aa3b2, #5f6776); } .fq-phone, .ft-phone { border: 3px solid transparent; border-bottom: 0; background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(150deg, #c9d0db 0%, #737b8b 18%, #3b414d 48%, #4f5765 78%, #a6aebc 100%) border-box; } .fq-phone { box-shadow: inset 4px 0 0 #05070b, inset -4px 0 0 #05070b, inset 0 4px 0 #05070b, 0 -12px 44px -18px rgba(59,130,246,.6); padding: 12px 15px 0; } .ft-phone { box-shadow: inset 4px 0 0 #05070b, inset -4px 0 0 #05070b, inset 0 4px 0 #05070b, 0 -6px 44px -12px rgba(59,130,246,.5); padding: 11px 13px 0; } /* PH-END */ /* MB-START */ /* Brayden, 2026-10-20: the top bar slides away while scrolling down and comes back on any scroll up (mb.js) */ header.nav { transition: transform .28s ease; will-change: transform; } header.nav.nav-away { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 2px)); } @media (prefers-reduced-motion: reduce) { header.nav { transition: none; } } /* Brayden, 2026-10-20: less scrolling on phones. Computers keep their layout. */ @media (max-width: 599px) { /* Brayden: no big gap between the top bar and the first line of each page */ section.hero { padding-top: 26px; } section.block.page-top, section.page-head { padding-top: 26px; } /* Your gym, your way: heading centred between the top of the blue band and the pictures (his ask), 2x2 tiles */ section.block.hw-own { padding-top: 38px; } .hw-own .hx-head { margin-bottom: 37px; } .hw-own .fq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .hw-own .fq-tile { gap: 5px; } .hw-own .fq-art { height: 124px; padding: 8px 6px; margin-bottom: 6px; border-radius: 12px; } .hw-own .fq-art-phone { padding-bottom: 0; } .hw-own .fq-ui { zoom: .64; } .hw-own .fq-phone { zoom: .66; } .hw-own .fq-door { max-width: 150px; } .hw-own .fq-label { font-size: 1.5rem; line-height: 1; } .hw-own .fq-line { font-size: .9rem; line-height: 1.38; } /* Brayden: centre this section on phones (heading, labels and lines all on the middle line) */ .hw-own .fq-label, .hw-own .fq-line { text-align: center; } .hw-own .hx-head .eyebrow { margin-right: calc(-1 * var(--ls, .13em)); } /* The four key cards: 2x2 */ .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ft-card { border-radius: 14px; grid-template-rows: auto 1fr; } .ft-art { height: 124px; padding: 8px 6px; } .ft-art-phone { padding: 10px 8px 0; } .ft-ui { zoom: .66; } .ft-phone { zoom: .7; } .ft .ft-card .ft-text { gap: 6px; padding: 12px 12px 14px; align-content: start; } .ft .ft-title { font-size: 1.32rem; line-height: 1; } .ft-line { font-size: .86rem; line-height: 1.38; } .ft-line .ft-s + .ft-s { display: none; } /* Hero phone a little smaller */ .hero-visual .phone { width: min(260px, 68%); } /* Verse of the week: smaller verse text, less reserved height */ .fa-show { margin-top: 24px; } .fa-text p { font-size: 1.12rem; line-height: 1.4; } .fa-controls { margin-top: 18px; } .fa-note { margin-top: 18px; } } @media (max-width: 359px) { .hw-own .fq-tiles, .ft-grid { gap: 18px 10px; } .hw-own .fq-art, .ft-art { height: 108px; } .hw-own .fq-ui { zoom: .56; } .hw-own .fq-phone { zoom: .58; } .ft-ui { zoom: .58; } .ft-phone { zoom: .62; } .hw-own .fq-label { font-size: 1.32rem; } .ft .ft-title { font-size: 1.18rem; } .ft .ft-card .ft-text { padding: 10px 10px 12px; } } /* Brayden, 2026-10-20: menu tabs bigger and white so people who don't see well don't miss them. The current page keeps a blue underline; hover turns a tab light blue (class fallback in mb.js). */ .nav-links { font-size: 1.06rem; } .nav-links a { color: #fff; font-weight: 600; text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: color .15s ease; } .nav-links a[aria-current="page"] { color: #fff; text-decoration-line: underline; text-decoration-color: var(--blue-hi); } .nav-links a:hover, .nav-links a.is-hot { color: var(--sky); } @media (max-width: 900px) { header.nav .nav-links { font-size: 1.04rem; } } @media (max-width: 480px) { header.nav .nav-links { font-size: 1rem; } } /* these sizes are for the tab row shown when the menu script can't run; the menu popup sets its own */ @media (max-width: 400px) { header.nav:not(.js-menu) .nav-links { font-size: .95rem; gap: 8px; } } @media (max-width: 379px) { header.nav:not(.js-menu) .nav-links { font-size: .88rem; gap: 6px; } } @media (max-width: 349px) { header.nav:not(.js-menu) .nav-links { font-size: .8rem; gap: 5px; } } /* Brayden, 2026-10-20: "put those into the 3 lines and when you click the three lines they pop up", then "keep the 3 lines for the phone but for the computer can you make it was it previously was" -> the menu button only up to 1023px (phones and tablets, where the tabs can't fit on one row beside the logo); computers show the tab row as before. Without JS the tabs stay in the bar as before; mb.js adds .js-menu. */ header.nav .nav-menu, header.nav .nav-links .nav-login, header.nav.js-menu .nav-links a.nav-login { display: none; } @media (max-width: 1023px) { header.nav.js-menu .wrap { position: relative; flex-wrap: nowrap; column-gap: 12px; min-height: 72px; padding-block: 10px; } header.nav.js-menu .nav-cta { margin-left: auto; } header.nav.js-menu .nav-menu { display: grid; place-content: center; gap: 5px; flex: none; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid #3a4456; border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; } header.nav.js-menu .nav-menu span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .15s ease; } header.nav.js-menu .nav-menu.is-hot, header.nav.menu-open .nav-menu { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } @media (hover: hover) { header.nav.js-menu .nav-menu:hover { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } } header.nav.js-menu .nav-menu:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } header.nav.menu-open .nav-menu span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } header.nav.menu-open .nav-menu span:nth-child(2) { opacity: 0; } header.nav.menu-open .nav-menu span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } @media (max-width: 374px) { header.nav.menu-open .nav-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); } header.nav.menu-open .nav-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } header.nav.js-menu .nav-links { position: absolute; top: calc(100% + 1px); right: 20px; z-index: 11; order: 0; flex: none; display: grid; gap: 2px; justify-content: stretch; width: min(320px, calc(100vw - 24px)); margin: 0; padding: 8px; overflow: visible; border: 1px solid #2c3442; border-top: 0; border-radius: 0 0 16px 16px; background: #0f131b; box-shadow: 0 28px 50px -18px rgba(0,0,0,.9); font-size: 1.3rem; line-height: 1.2; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } header.nav.menu-open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; } header.nav.js-menu .nav-links a { display: block; padding: 14px 16px; border-radius: 10px; color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; } header.nav.js-menu .nav-links a:hover, header.nav.js-menu .nav-links a.is-hot { background: rgba(255,255,255,.07); color: #fff; } header.nav.js-menu .nav-links a[aria-current="page"] { background: rgba(59,130,246,.18); box-shadow: inset 3px 0 0 var(--blue-hi); text-decoration: none; } header.nav.js-menu .nav-links a:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; } } @media (max-width: 599px) { header.nav.js-menu .wrap { min-height: 64px; padding-block: 9px; column-gap: 10px; } header.nav.js-menu .nav-links { left: 16px; right: 16px; width: auto; } /* lines up with the logo and the menu button */ } @media (max-width: 679px) { header.nav.js-menu .nav-cta .btn-ghost { display: none; } } @media (max-width: 679px) { header.nav.js-menu .nav-links a.nav-login { display: block; margin-top: 4px; border-top: 1px solid #2c3442; border-radius: 0 0 10px 10px; } } /* phones: logo, Book a trial and the menu button share one row, so all three step down a little */ @media (max-width: 599px) { header.nav.js-menu .wrap { padding-inline: 16px; } header.nav.js-menu .logo { flex: none; } } @media (max-width: 429px) { header.nav.js-menu .wrap { column-gap: 8px; } header.nav.js-menu .logo { font-size: 1.12rem; gap: 7px; } header.nav.js-menu .logo img { width: 34px; height: 34px; } header.nav.js-menu .nav-cta .btn { padding: .72em .85em; font-size: .9rem; } header.nav.js-menu .nav-menu { width: 42px; height: 42px; } } @media (max-width: 374px) { header.nav.js-menu .logo { font-size: 1.02rem; gap: 6px; } header.nav.js-menu .logo img { width: 30px; height: 30px; } header.nav.js-menu .nav-cta .btn { padding: .68em .7em; font-size: .84rem; } header.nav.js-menu .nav-menu { width: 40px; height: 40px; gap: 4.5px; } header.nav.js-menu .nav-menu span { width: 20px; } } @media (max-width: 339px) { header.nav.js-menu .wrap { column-gap: 6px; padding-inline: 12px; } header.nav.js-menu .logo { font-size: .94rem; } header.nav.js-menu .logo img { width: 28px; height: 28px; } header.nav.js-menu .nav-cta .btn { padding: .64em .6em; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { header.nav.js-menu .nav-links, header.nav.js-menu .nav-menu span { transition: none; } } /* the open menu never runs off a short (landscape) screen: it scrolls inside itself */ @media (max-width: 1023px) { header.nav.js-menu .nav-links { max-height: calc(100dvh - 81px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; } } @media (max-width: 599px) { header.nav.js-menu .nav-links { max-height: calc(100dvh - 73px - env(safe-area-inset-top, 0px)); } } /* Log in and Book a trial in the bar light up by class too (the preview viewer misses :hover) */ header.nav .nav-cta .btn-primary.is-hot { background: var(--blue-hi); } header.nav .nav-cta .btn-ghost.is-hot { border-color: var(--muted); } /* computers: a larger browser font setting doesn't break the one-row bar */ @media (min-width: 1024px) { header.nav .logo { font-size: min(1.6rem, 25.6px); white-space: nowrap; } header.nav .nav-links { font-size: min(1.06rem, 16.96px); } header.nav .nav-links a { white-space: nowrap; } header.nav .nav-cta .btn { font-size: min(.92rem, 14.72px); } } /* small laptops: the tab row, search, Log in and Book a trial sit a little closer so they keep to one row */ @media (min-width: 1024px) and (max-width: 1149px) { header.nav .wrap { gap: 20px; } header.nav .nav-links { gap: 18px; } } /* Brayden, 2026-10-20: on phones the How it works step names floated between two pictures, so it was unclear which picture they belonged to. Where the steps stack (one column), each step is one card: number, picture, name, line. */ @media (max-width: 860px) { .hiw-steps { row-gap: 18px; } .hiw-step { gap: 6px; padding: 10px 10px 20px; border: 1px solid #2c3442; border-radius: 18px; background: linear-gradient(180deg, rgba(59,130,246,.07), rgba(59,130,246,0) 60%), var(--panel); } .hiw-step::before { top: 22px; left: 22px; } .hiw-art { margin-bottom: 8px; border-radius: 12px; } .hiw-step .hiw-title, .hiw-step .hiw-line { padding-inline: 10px; } } /* Brayden, 2026-10-20: centre the home hero text where it stacks above the phone (phones and small tablets). Side by side with the phone on computers it stays left-aligned. */ @media (max-width: 940px) { .hero-copy { justify-items: center; text-align: center; } .hero-copy h1 { text-wrap: balance; } .hero-copy .lede { max-width: 36ch; text-wrap: balance; } .hero-copy .eyebrow { margin-right: -.13em; } .hero-actions { justify-content: center; } } /* keep the blue "You grow your gym." on one line on small phones too, sizing the headline to fit */ @media (max-width: 399px) { .hero h1 { font-size: min(2.7rem, calc((100vw - 40px) / 8.1)); } .hero h1 em { white-space: nowrap; } } /* Brayden, 2026-10-20: the Tap to unlock phone looked cut off at the bottom. Drop the half-hidden row that peeked under the tab bar and scale the screen's content a touch so every card shows whole above the tabs. */ .tu-tiles:has(.tu-peek) { display: none; } .tu-body { zoom: .93; } /* Brayden, 2026-10-20: on computers nudge the hero phone and its Entries card a little to the right */ @media (min-width: 941px) { .hero-visual { translate: clamp(8px, calc((100vw - 1100px) / 2), 28px) 0; } } /* Brayden, 2026-10-20: "For owners / Your gym, your way" centred vertically between the top of its blue band and the pictures (it sat closer to the pictures). Phones are set in the 599px block above. */ @media (min-width: 600px) { section.block.hw-own { padding-top: 68px; } .hw-own .hx-head { margin-bottom: 72px; } } /* Brayden, 2026-10-20: on phones the partner gyms strip sits a little closer to the review button above it */ @media (max-width: 599px) { section.block:has(+ section.block.lg) { padding-bottom: 56px; } section.block.lg { padding-top: 0; } } /* Brayden, 2026-10-20: on phones the App Store 4.9 rating sits a bit closer to the review cards */ @media (max-width: 599px) { .rv-row { margin-top: 16px; } } /* MB-END */ /* PP-START */ /* Brayden, 2026-10-20: "in the key features on number 7 the progress can you add progress pics" -> the Progress card gains a row of progress photos (drawn silhouettes, week 1 and week 8) and an Add photo tile; the trend chart is a little shorter so the card keeps its height */ .hx-pp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .hx-pp > span { position: relative; height: 50px; display: grid; justify-items: center; border-radius: 8px; overflow: hidden; } .hx-pp-shot { grid-template-rows: minmax(0, 1fr) auto; background: linear-gradient(180deg, #252d3a, #171c25); border: 1px solid #2a313b; } .hx-ui .hx-pp-shot svg { stroke: none; align-self: end; width: 24px; height: 34px; fill: #66748c; } .hx-pp-new { border-color: rgba(59,130,246,.55); } .hx-ui .hx-pp-new svg { fill: #8099c4; } .hx-pp-shot small { justify-self: stretch; padding: 2px 0 3px; background: rgba(11,14,20,.72); font: 600 .52rem/1.1 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; color: var(--fg); } .hx-pp-add { align-content: center; gap: 3px; border: 1.5px dashed rgba(59,130,246,.6); background: rgba(59,130,246,.08); } .hx-ui .hx-pp-add svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-hi); stroke-width: 1.9; stroke-linejoin: round; } .hx-pp-add small { font: 600 .6rem/1 var(--body); color: var(--sky); } /* PP-END */ /* FE-START */ /* Brayden, 2026-10-21: Features opens with a centred title and one short line ("can you add some sort of title or intro section to the features page"), then the four key cards moved from Home */ section.ft.page-top { padding-top: 72px; } .ft-head { display: grid; gap: 16px; justify-items: center; max-width: 900px; margin: 0 auto 48px; text-align: center; } .ft-sub { margin: 0; color: var(--muted); font-size: 1.2rem; line-height: 1.5; } @media (max-width: 599px) { section.ft.page-top { padding-top: 26px; } .ft-head { gap: 12px; margin-bottom: 30px; } .ft-head h1 { font-size: min(2.6rem, calc((100vw - 40px) / 8.6)); line-height: 1.1; } .ft-head h1 em { display: block; } .ft-sub { font-size: 1.05rem; } } /* Brayden, 2026-10-21: "Share your sign-up link. Members do the rest." with its three steps closes the Owners page (moved from Features), behind the same faint line it had there. Its heading keeps the look it had as the Features title. */ .hiw-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; } .hiw-head h2 em { font-style: normal; color: var(--blue-hi); } @media (max-width: 599px) { .hiw-head h2 { font-size: min(2.6rem, calc((100vw - 40px) / 10.3)); line-height: 1.1; } .hiw-head h2 em { display: block; } } /* Brayden, later the same day: "move share your sign up link section to up above the demo gym section" -> it sits between the Owners opening and the demo gym, with the same space above and below it as between Home's sections */ section.pocket.page-top:has(+ section.block.hiw) { padding-bottom: 0; } section.pocket + section.block.hiw { padding-block: 88px 0; } section.block.mng-rest { padding-top: 88px; } section.block.mng-rest .mng-kicker:first-child { margin-top: 0; } @media (max-width: 599px) { section.pocket + section.block.hiw { padding-top: 72px; } section.block.mng-rest { padding-top: 72px; } } /* very small phones (under 320px): the Owners sales-alert chips fit their card */ @media (max-width: 339px) { .mng-dash .mng-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mng-dash .mng-chips li { min-width: 0; gap: 6px; padding: 6px 9px; font-size: .78rem; } .mng-dash .mng-chips .mng-ic { display: none; } } /* the sales-alert cards over the Owners phone keep to their width (long titles end in "..." instead of pushing out) */ .notif { grid-template-columns: 36px minmax(0, 1fr); } .notif-text { min-width: 0; grid-template-columns: minmax(0, 1fr); } /* Brayden, 2026-10-21: "on the main page the one tap section can you center that", then "by ceneter it i meant the wording not the whole thing" -> the phone stays beside the words on computers; the eyebrow, heading, line, "Download here" and the store buttons are centred within their column */ .tu-copy { justify-items: center; text-align: center; } .tu-line { margin-inline: auto; text-wrap: balance; } .tu-copy .dl-stores { justify-content: center; } /* Brayden, 2026-10-21: "move the phone and the wording slightly closer together" -> on computers the two columns take their own width and sit together in the middle of the page; on phones a little less space between the buttons and the phone */ @media (min-width: 800px) { .tu-wrap { grid-template-columns: auto minmax(0, max-content); justify-content: center; column-gap: 112px; } } @media (min-width: 800px) and (max-width: 999px) { .tu-wrap { column-gap: 56px; } } @media (max-width: 799px) { .tu-wrap { gap: 20px; } } /* Brayden, 2026-10-21: "For gym owners" is longer, so on the smallest phones the two hero buttons stack; keep them the same width there */ @media (max-width: 345px) { .hero-actions .btn { min-width: 180px; } } /* Brayden, 2026-10-21: "For gym owners" and Log in blended into the black, then "can you make it a white outline instead", then "fade it a bit": outline buttons and the phone menu's Log in get a white outline and white text; the inset shadow doubles the line without changing the size */ .btn.btn-ghost { border-color: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); background: transparent; color: #fff; } .btn.btn-ghost.is-hot { border-color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); background: rgba(255,255,255,.1); color: #fff; } @media (hover: hover) { .btn.btn-ghost:hover { border-color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); background: rgba(255,255,255,.1); color: #fff; } } html header.nav.js-menu .nav-links .nav-acts a.nav-login { border: 2px solid rgba(255,255,255,.55); background: transparent; color: #fff; box-shadow: none; } html header.nav.js-menu .nav-links .nav-acts a.nav-login:hover, html header.nav.js-menu .nav-links .nav-acts a.nav-login.is-hot { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); color: #fff; } .btn.btn-primary.is-hot { background: var(--blue-hi); } /* Brayden, 2026-10-21: "made the log in button what it originally was to match the search button" -> the header Log in (computers and tablets) goes back to a plain box styled like the search button beside it, with the same blue hover */ header.nav .nav-cta .btn.btn-ghost { border-color: #3a4456; box-shadow: none; background: rgba(255,255,255,.04); color: #fff; } header.nav .nav-cta .btn.btn-ghost.is-hot { border-color: rgba(59,130,246,.65); background: rgba(59,130,246,.16); color: #fff; } @media (hover: hover) { header.nav .nav-cta .btn.btn-ghost:hover { border-color: rgba(59,130,246,.65); background: rgba(59,130,246,.16); color: #fff; } } /* Brayden, 2026-10-21: City and State stay side by side on phones too (less scrolling); State is the narrower one */ @media (max-width: 480px) { #demo-form .row2.ct-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } /* Brayden, 2026-10-21: "make the for gym owners button what it originally was", then "make the for gym owners button look the same as the search and the login button" -> the Home hero's second button is the header's plain dark box at hero size, with the same blue hover; "Leave a review" and the phone-menu Log in keep the faded white outline */ .hero-actions .btn.btn-ghost { border-color: #3a4456; box-shadow: none; background: rgba(255,255,255,.04); color: #fff; } .hero-actions .btn.btn-ghost.is-hot { border-color: rgba(59,130,246,.65); box-shadow: none; background: rgba(59,130,246,.16); color: #fff; } @media (hover: hover) { .hero-actions .btn.btn-ghost:hover { border-color: rgba(59,130,246,.65); box-shadow: none; background: rgba(59,130,246,.16); color: #fff; } } /* Brayden, 2026-10-21: "make the download here and the buttons on the main page slightly bigger not too big" -> about 15% bigger on computers and tablets, a little less on phones so the two buttons still fit side by side */ .tu-copy .dl-label { font-size: .9rem; } .tu-copy .dl-stores { zoom: 1.15; } @media (max-width: 599px) { .tu-copy .dl-label { font-size: .86rem; } .tu-copy .dl-stores { zoom: 1.08; } } @media (max-width: 374px) { .tu-copy .dl-store { min-width: 196px; } } /* when the bigger buttons stack, they stack at one width */ /* Brayden, 2026-10-21: "make book a trial and for gym owners buttons slightly bigger but not too big" -> about 12% bigger (the padding scales with the text); a little less on phones so the pair still sits on one line */ .hero-actions .btn { font-size: 1.12rem; } @media (max-width: 599px) { .hero-actions .btn { font-size: 1.06rem; } } @media (max-width: 374px) { .hero-actions .btn { min-width: 190px; justify-content: center; } } /* when the pair stacks, both buttons share one width */ /* Brayden, 2026-10-21: "add a section where they can download" -> "Get the app" at the end of Features, and the same two store buttons under "One tap. The door opens." on Home. Hover is also a class (dl.js): his preview viewer misses :hover. */ section.block.hx:has(+ section.block.dl) { padding-bottom: 0; } section.block.dl { padding-top: 88px; } .dl-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; max-width: 1040px; margin-inline: auto; padding: 30px 34px; border: 1px solid rgba(59,130,246,.28); border-radius: 22px; background: radial-gradient(80% 140% at 0% 0%, rgba(59,130,246,.14), transparent 60%), var(--panel); box-shadow: 0 30px 60px -32px rgba(59,130,246,.45); } .dl-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 12px 30px -10px rgba(59,130,246,.6); } .dl-copy { display: grid; gap: 10px; min-width: 0; } .dl-copy h2 { font-size: clamp(2.2rem, 4vw, 3rem); } .dl-line { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.5; } .dl-stores { display: flex; flex-wrap: wrap; gap: 12px; } .dl-store { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px 8px 14px; border: 1px solid #3a4456; border-radius: 12px; background: #05070b; color: #fff; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; } .dl-store svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dl-store span { display: grid; gap: 1px; line-height: 1.1; text-align: left; white-space: nowrap; } .dl-store small { font-size: .72rem; color: #c3cad6; } .dl-store b { font-size: 1.14rem; font-weight: 600; letter-spacing: .01em; } .dl-store.is-hot { border-color: rgba(59,130,246,.65); background: #0d1422; box-shadow: 0 0 0 3px rgba(59,130,246,.12); } @media (hover: hover) { .dl-store:hover { border-color: rgba(59,130,246,.65); background: #0d1422; box-shadow: 0 0 0 3px rgba(59,130,246,.12); } } .dl-store:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } .tu-copy .dl-stores { margin-top: 6px; } @media (max-width: 899px) { .dl-card { grid-template-columns: auto minmax(0, 1fr); } .dl-card .dl-stores { grid-column: 1 / -1; } } @media (max-width: 599px) { section.block.dl { padding-top: 72px; } .dl-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; padding: 28px 18px; text-align: center; } .dl-icon { width: 72px; height: 72px; border-radius: 17px; } .dl-line { font-size: 1rem; max-width: 30ch; } .dl-stores { justify-content: center; gap: 10px; } .dl-store { min-height: 52px; gap: 8px; padding: 7px 14px 7px 11px; } .dl-store svg { width: 22px; height: 22px; } .dl-store b { font-size: 1.02rem; } .dl-store small { font-size: .66rem; } } /* the two store buttons stack at the same width where they can't sit side by side */ @media (max-width: 379px) { .dl-card .dl-store { min-width: 196px; } } @media (max-width: 359px) { .tu-copy .dl-store { min-width: 196px; } } /* Brayden, 2026-10-21: a small "Download here" label right above the store buttons on Home */ .dl-label { margin: 8px 0 0; font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } .tu-copy .dl-label + .dl-stores { margin-top: -6px; } /* FE-END */ /* FX-START */ /* Brayden, 2026-10-21: Features opens straight into the Key Features slider under a compact one-line title */ section.block.hx.page-top { padding-top: 56px; } .hx-top { margin: 0 auto 36px; gap: 0; } .hx-top h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; } /* under the page title, "Key Features" keeps its full heading size ("make key features bigger") with a tighter gap */ .hx-top + .ks-head { margin-bottom: 28px; } .hx-top + .ks-head .hx-head { gap: 8px; margin-bottom: 0; } /* The Essentials: the four key cards, under a centred heading, between Key Features and Download now */ section.ft.ft-recap { padding-block: 88px 0; } .ft-rhead { justify-items: center; text-align: center; margin-inline: auto; } section.block.hx:has(+ section.ft.ft-recap) { padding-bottom: 0; } section.ft.ft-recap + section.block.dl { padding-top: 88px; } @media (max-width: 599px) { section.block.hx.page-top { padding-top: 26px; } .hx-top { margin-bottom: 26px; } .hx-top h1 { font-size: min(2.6rem, calc((100vw - 40px) / 8.6)); } .hx-top + .ks-head { margin-bottom: 20px; } section.ft.ft-recap, section.ft.ft-recap + section.block.dl { padding-top: 72px; } } /* Brayden, 2026-10-21: the title became "Train, book, and unlock. All in one app." (Features is mostly the member side, without saying "members"); each sentence gets its own line */ .hx-top h1 { text-wrap: balance; } .hx-top h1 em { display: block; } @media (max-width: 599px) { .hx-top h1 { font-size: min(2.4rem, calc((100vw - 40px) / 10.2)); } } /* FX-END */ /* FM-START */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* FM-END */ /* LS-START */ /* Partners strip you can move yourself (Brayden, 2026-10-23, ls.js): the strip scrolls for real, with no scrollbar showing, a hand cursor for dragging, and no image ghost or text selection while dragging. */ .lg-marquee.lg-js { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; overscroll-behavior-x: contain; cursor: grab; -webkit-user-select: none; user-select: none; } .lg-marquee.lg-js::-webkit-scrollbar { display: none; } .lg-marquee.lg-js .lg-track { animation: none; } .lg-marquee.lg-js.lg-grab { cursor: grabbing; } .lg-marquee.lg-js.lg-grab .lg-set li:hover img { transform: none; } .lg-set img { -webkit-user-drag: none; } /* LS-END */ /* PT-START */ /* Class calendar on Features (Brayden, 2026-10-27: every calendar shows all four kinds): Classes blue, Workouts orange, Nutrition green and PT purple, the app's own colors (CalendarPage.tsx). Four chips sized to their words fit in one row, and slightly tighter rows keep the slider as tall as before with the fourth row. */ .hx-cal { --cal-p: #a855f7; gap: 5px; } .hx-cal i.hx-cal-p { background: var(--cal-p); } /* Brayden, 2026-10-27: "its all pushed to the right so its sticking out". The chip row was a hair wider than the card, so it stretched the calendar's one column and everything ran past the right edge (worse with an iPhone's wider font). The column can no longer grow, and the chips are a little smaller with room to spare; a chip clips before it can push. */ .hx-cal { grid-template-columns: minmax(0, 1fr); } .hx-cal-keys { display: flex; gap: 3px; min-width: 0; } .hx-cal-keys .hx-cal-key { flex: 1 1 auto; min-width: 0; overflow: hidden; gap: 3px; padding: 3px 4px; font-size: .6rem; } .hx-cal-row { min-height: 25px; padding-block: 2px; } /* PT-END */ /* SR-START */ /* Site search (Brayden, 2026-10-20): magnifier button beside the menu button, search box over the page. Without JS the button stays hidden (sr.js adds .js-search). */ header.nav .nav-search { display: none; } header.nav.js-search .nav-search { display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid #3a4456; border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; } header.nav.js-search .nav-search svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } @media (hover: hover) { header.nav.js-search .nav-search:hover { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } } header.nav.js-search .nav-search.is-hot, header.nav.js-search .nav-search[aria-expanded="true"] { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } header.nav.js-search .nav-search:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } html.sr-open { overflow: hidden; } .sr { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-content: start; padding: calc(env(safe-area-inset-top, 0px) + 12px) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px)); background: rgba(5,7,11,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sr[hidden] { display: none; } .sr-panel { width: min(680px, 100%); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; border: 1px solid #2c3442; border-radius: 16px; background: #0f131b; box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); overflow: hidden; } .sr-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid #2c3442; } .sr-bar > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--sky); stroke-width: 2.4; stroke-linecap: round; } .sr-input { flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: 500 1.15rem/1.2 var(--body); outline: none; -webkit-appearance: none; appearance: none; } .sr-input::placeholder { color: #8b95a5; } .sr-input::-webkit-search-cancel-button { display: none; } .sr-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #3a4456; border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; } .sr-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .sr-close:hover, .sr-close.is-hot { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } .sr-close:focus-visible, .sr-try:focus-visible, .sr-contact:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } .sr-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; } .sr-list:empty { display: none; } .sr-hit { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; color: #fff; text-decoration: none; cursor: pointer; } .sr-hit.is-on { background: rgba(59,130,246,.14); box-shadow: inset 3px 0 0 var(--blue-hi); } .sr-where { font: 600 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); } .sr-title { font: 600 1.06rem/1.3 var(--body); color: #fff; } .sr-snip { font-size: .92rem; line-height: 1.45; color: #a9b2c0; } .sr mark { padding: 0 1px; border-radius: 3px; background: rgba(59,130,246,.32); color: #fff; } .sr-empty:empty { display: none; } .sr-empty { padding: 16px 18px 20px; } .sr-none { margin: 0 0 6px; color: #fff; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; } .sr-hint { margin: 0; color: #a9b2c0; font-size: .95rem; line-height: 1.5; } .sr-contact { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sr-tries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sr-try { margin: 0; padding: 9px 14px; border: 1px solid #3a4456; border-radius: 999px; background: rgba(255,255,255,.04); color: #fff; font: 500 .95rem/1 var(--body); cursor: pointer; } .sr-try:hover, .sr-try.is-hot { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.65); } .sr-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* a short glow on the spot a result opened */ .sr-flash { animation: sr-flash 1.8s ease; } @keyframes sr-flash { 0%, 35% { box-shadow: 0 0 0 2px var(--blue-hi), 0 0 28px rgba(59,130,246,.45); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } } [id^="sr-"], .fq-list details, section.page-top { scroll-margin-top: 96px; } .cf-panel { scroll-margin-top: 180px; } /* keeps the Get help / Refer switch in view under the bar */ @media (prefers-reduced-motion: reduce) { .sr-flash { animation: none; } } /* phones: logo, Book a trial, search and menu share one row */ @media (max-width: 599px) { .sr { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-inline: 8px; } .sr-panel { max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px)); } .sr-input { font-size: 1.1rem; } } /* computers: the magnifier sits between the tabs and Log in; phones and tablets: between Book a trial and the menu button */ @media (max-width: 1023px) { header.nav.js-menu .nav-menu { order: 2; } } /* sr.js moves the magnifier after Book a trial below 1024px */ /* phones: the magnifier matches the menu button beside it */ @media (max-width: 429px) { header.nav.js-search .nav-search { width: 42px; height: 42px; } } @media (max-width: 374px) { header.nav.js-search .nav-search { width: 40px; height: 40px; } header.nav.js-search .nav-search svg { width: 20px; height: 20px; } } /* Brayden, 2026-10-20: Log in in the menu popup is a blue button, set apart from the white tabs */ header.nav.js-menu .nav-links a.nav-login { margin-top: 8px; padding: 13px 16px; border-top: 0; border-radius: 10px; background: var(--blue); color: #fff; text-align: center; box-shadow: 0 10px 22px -12px rgba(59,130,246,.9); } header.nav.js-menu .nav-links a.nav-login:hover, header.nav.js-menu .nav-links a.nav-login.is-hot { background: var(--blue-hi); color: #fff; } /* phones: logo, search and the menu button share the bar (Book a trial moved into the menu, bk/bk.css), so the logo keeps its bigger size and the two buttons sit together on the right */ @media (max-width: 679px) { header.nav.js-menu.js-search .wrap { column-gap: 8px; } header.nav.js-menu.js-search .nav-search { margin-left: auto; } } @media (max-width: 480px) { header.nav.js-menu.js-search .logo { font-size: 1.38rem; gap: 10px; } header.nav.js-menu.js-search .logo img { width: 40px; height: 40px; } } @media (max-width: 374px) { header.nav.js-menu.js-search .wrap { padding-inline: 14px; } header.nav.js-menu.js-search .logo { font-size: 1.26rem; gap: 9px; } header.nav.js-menu.js-search .logo img { width: 36px; height: 36px; } } @media (max-width: 339px) { header.nav.js-menu.js-search .wrap { column-gap: 6px; padding-inline: 12px; } header.nav.js-menu.js-search .logo { font-size: 1.14rem; gap: 8px; } header.nav.js-menu.js-search .logo img { width: 32px; height: 32px; } } /* the search field itself shows no box; the line under it turns blue while typing */ .sr .sr-input:focus, .sr .sr-input:focus-visible { outline: none; box-shadow: none; } .sr-bar:focus-within { border-bottom-color: rgba(59,130,246,.65); } /* SR-END */ /* KD-START */ /* Brayden, 2026-10-20: "seperate the key features and share your sign up link section by adding a faint line" -> a thin line that fades out at both ends, with the same space above and below it */ :is(section.block.hiw, section.ft):has(+ section.block.hx) { padding-bottom: 60px; } :is(section.block.hiw, section.ft) + section.block.hx { position: relative; padding-top: 60px; } :is(section.block.hiw, section.ft) + section.block.hx::before { content: ""; position: absolute; top: 0; left: 50%; width: min(900px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(148,163,184,0), rgba(148,163,184,.36) 22%, rgba(148,163,184,.36) 78%, rgba(148,163,184,0)); pointer-events: none; } @media (max-width: 599px) { :is(section.block.hiw, section.ft):has(+ section.block.hx) { padding-bottom: 40px; } :is(section.block.hiw, section.ft) + section.block.hx { padding-top: 40px; } :is(section.block.hiw, section.ft) + section.block.hx::before { width: calc(100% - 40px); } } /* KD-END */ /* BK-START */ /* Brayden, 2026-10-20: "take out book a trial and add it to the 3 lines on the phone" -> on phones the bar keeps the logo, search and the menu button; Log in and Book a trial sit side by side at the bottom of the menu. Book a trial is solid blue like every other Book a trial button; Log in stays blue but outlined, so the two don't look the same. Computers unchanged. */ header.nav .nav-links .nav-acts { display: none; } @media (max-width: 679px) { header.nav.js-menu .nav-cta { display: none; } header.nav.js-menu .nav-links .nav-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; padding: 12px 0 2px; border-top: 1px solid #2c3442; } header.nav.js-menu .nav-links .nav-acts a { display: block; margin: 0; padding: 14px 8px; border-radius: 12px; font-size: 1.14rem; line-height: 1.2; text-align: center; white-space: nowrap; color: #fff; } header.nav.js-menu .nav-links .nav-acts a.nav-login { border: 2px solid var(--blue-hi); background: rgba(59,130,246,.14); color: #cfe2ff; box-shadow: none; } header.nav.js-menu .nav-links .nav-acts a.nav-login:hover, header.nav.js-menu .nav-links .nav-acts a.nav-login.is-hot { background: rgba(59,130,246,.26); color: #fff; } header.nav.js-menu .nav-links .nav-acts a.nav-book { border: 2px solid var(--blue); background: var(--blue); box-shadow: 0 10px 22px -12px rgba(59,130,246,.9); } header.nav.js-menu .nav-links .nav-acts a.nav-book:hover, header.nav.js-menu .nav-links .nav-acts a.nav-book.is-hot { border-color: var(--blue-hi); background: var(--blue-hi); } } @media (max-width: 339px) { header.nav.js-menu .nav-links .nav-acts a { font-size: 1.02rem; padding-inline: 6px; } } /* BK-END */ /* MT-START */ /* Brayden, 2026-10-20: "on the phone on the owners tab make the titles bigger in the demo gym section" -> Money in, Revenue, Growth, Sales alerts and Breakdown go from 28px to about 37px on phones, still one line each */ @media (max-width: 599px) { .mng-dash .mng-label { font-size: 2.3rem; line-height: 1; } } @media (max-width: 359px) { .mng-dash .mng-label { font-size: 2.1rem; } } @media (max-width: 339px) { .mng-dash .mng-label { font-size: 2rem; } } @media (max-width: 309px) { .mng-dash .mng-label { font-size: 1.78rem; } } /* Brayden, 2026-10-20: "on the owners tab on the phone move also on the manage tab up slightly" -> 72px above it becomes 44px */ @media (max-width: 599px) { .mng-more { margin-top: 44px; } } /* MT-END */ /* HS-START */ /* Brayden, 2026-10-20: "on the phone on how it works put the titles above the graphics so join online above instead of below" -> where the steps stack, each card reads top down: number and title on one row, the short line, then the picture */ @media (max-width: 860px) { .hiw-step { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; padding: 20px 10px 10px; } .hiw-step::before { position: static; grid-column: 1; grid-row: 1; margin-left: 10px; } .hiw-step .hiw-title { grid-column: 2; grid-row: 1; padding-inline: 0 10px; } .hiw-step .hiw-line { grid-column: 1 / -1; grid-row: 2; } .hiw-step .hiw-art { grid-column: 1 / -1; grid-row: 3; margin: 8px 0 0; padding-block: 20px; } } /* small phones: the titles shrink just enough that "Door follows billing" keeps to one line beside its number */ @media (max-width: 499px) { .hiw-step .hiw-title { font-size: min(1.7rem, calc((100vw - 132px) / 9)); } } /* HS-END */ /* CB-START */ /* Brayden, 2026-10-20: "on the phone ready to put your gym in your pocket at the bottom make the header box smaller" -> on phones the bottom banner is more compact (less padding, a slightly smaller heading, the button closer) and centred. The heading's size is set inline on each page, so it needs !important here. */ @media (max-width: 599px) { .cta-band .wrap { flex-direction: column; justify-content: center; gap: 16px; padding-block: 36px; text-align: center; } .cta-band h2 { font-size: 1.62rem !important; line-height: 1.12; text-wrap: balance; } .cta-band .btn { font-size: 1.02rem; padding: .85em 1.5em; } } /* CB-END */ /* HH-START */ /* Brayden, 2026-10-20: "on the phone make share your sign up link. members do the rest. look or align better" -> on phones the heading is centred like the other phone headings, each sentence keeps to its own line (no "link. Members / do the rest." breaks), and the size follows the screen so the first sentence always fits on one line */ @media (max-width: 599px) { .hiw-head { justify-items: center; text-align: center; margin-inline: auto; } .hiw-head h1 { font-size: min(2.6rem, calc((100vw - 40px) / 10.3)); line-height: 1.1; } .hiw-head h1 em { display: block; } } /* HH-END */ /* HF-START */ /* Owners tiles (found by a background check, 2026-10-20): a mouse click left the clicked tile with a flat tint that beat its hover/open look. Now a click keeps the normal look; only keyboard focus tints the tile. */ .mng-feats .mng-feat:focus-within:not(:has(:focus-visible)) { background: var(--ink); } .mng-feats.mng-feats-js .mng-feat:hover, .mng-feats.mng-feats-js .mng-feat.is-hot, .mng-feats.mng-feats-js .mng-feat.is-open { background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.06)); } /* HF-END */ /* AV-START */ /* Phones, home page key cards (checked 2026-10-21) */ @media (max-width: 599px) { /* the whole Unlock Gym button shows inside the Member fitness app picture (it was cut in half) */ .ft-art-phone { padding-top: 6px; } .ft-phone { gap: 5px; } /* "Your gym, your way" band: as much space under the tiles as above the heading */ section.block.hw-own { padding-bottom: 38px; } } @media (max-width: 359px) { .ft-phone { zoom: .6; } .hw-own .fq-tiles { gap: 18px 10px; } .ft-grid { gap: 10px; } /* same 10px gap between the four cards both ways */ } /* the 24/7 card's entry log fits inside its picture on small phones */ @media (max-width: 399px) { .ft-ui.ft-access { zoom: .58; } } @media (max-width: 359px) { .ft-ui.ft-access { zoom: .5; } } @media (max-width: 319px) { .ft-ui.ft-access { zoom: .45; } } /* both top-row titles take two lines, so the lines under them start level */ @media (max-width: 494px) { .ft-card:nth-child(-n+2) .ft-br { display: inline; } .ft .ft-card:nth-child(-n+2) .ft-title { min-height: 2em; } } /* the menu popup lines up with the logo and the menu button on small phones too */ @media (max-width: 374px) { header.nav.js-menu .nav-links { left: 14px; right: 14px; } } @media (max-width: 339px) { header.nav.js-menu .nav-links { left: 12px; right: 12px; } } /* Tab into the hidden top bar brings it straight back, so the page doesn't jump to reach it */ header.nav.nav-away:has(:focus-visible) { transform: none; transition: none; } /* every box in the top bar is one height */ @media (min-width: 680px) and (max-width: 1023px) { header.nav.js-menu .nav-cta .btn { min-height: 46px; border-radius: 10px; } } @media (min-width: 1024px) { header.nav.js-search .nav-search { width: 38px; height: 38px; border-radius: 8px; } header.nav.js-search .nav-search svg { width: 19px; height: 19px; } header.nav .nav-cta .btn { min-height: 38px; } } /* AV-END */