placeholder to ![]()
. */
.coach-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
/* Horizontal scroll-snap carousel — tiles join into one continuous panel; only the
outer corners (first-child left, last-child right) stay rounded. The list sits
inside the parent .container's --page-pad, giving tile 1 a left gutter that
matches the bio text. (No negative-margin breakout: it would cancel the
padding and snap-flush the first tile to the viewport edge.) */
.coach-gallery-list {
display: flex;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.coach-gallery-list::-webkit-scrollbar { display: none; }
.coach-gallery-item {
flex: 0 0 75%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* Statement-style closer — one centered dynamic line + CTA per coach.
Mirrors the homepage .statement pattern. */
.value-prop { text-align: center; }
.value-prop-headline {
margin: 0 auto var(--s-48);
max-width: 36ch;
}
.value-prop-cta { display: flex; justify-content: center; }
/* Light-header theme — applied via body class on pages without a dark hero
(e.g., coach profiles). Recolors logo, nav text, menu toggle, and the scrolled
glass background so they read against the light --bg surface. */
.theme-header-light .brand-logo { filter: brightness(0); }
.theme-header-light .site-nav > a { color: var(--ink); }
.theme-header-light .site-nav > a:hover,
.theme-header-light .site-nav > a:focus-visible { background: rgba(5, 18, 17, 0.06); }
.theme-header-light .menu-toggle { color: var(--ink); }
.theme-header-light .site-header.is-scrolled {
background: var(--glass-light-bg);
border-color: var(--glass-light-border);
}
.site-footer {
background: var(--blackwoods);
color: var(--bg);
padding: var(--s-64) 0 var(--s-32);
}
.site-footer-wordmark {
display: block;
height: 40px;
width: auto;
align-self: flex-start;
}
.site-footer-inner {
display: flex;
flex-direction: column;
gap: var(--s-48);
}
.site-footer-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-48);
}
.site-footer-col {
display: flex;
flex-direction: column;
gap: var(--s-8);
}
.site-footer-heading {
margin: 0 0 var(--s-8);
font-size: var(--text-lg);
font-weight: var(--weight-regular);
color: var(--bg);
}
.site-footer a {
color: rgba(246, 246, 246, 0.72);
text-decoration: none;
font-size: var(--text-base);
transition: color 0.2s ease;
}
.site-footer a:hover { color: var(--bg); }
.site-footer-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
color: rgba(246, 246, 246, 0.5);
}
@media (max-width: 720px) {
.site-footer { padding: var(--s-32) 0; }
.site-footer-inner { gap: var(--s-32); }
.site-footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.site-footer-meta { flex-direction: column; gap: var(--s-8); align-items: flex-start; }
}
/* Site header — floating pill. Width tracks the page content width (container max
minus its inline padding) so the pill edges line up exactly with the cards below.
Brand uses margin-right: auto so everything else hugs the right edge with a
consistent 32px gap. */
.site-header {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: calc(1440px - 64px);
height: 64px;
z-index: 150;
display: flex;
align-items: center;
gap: var(--s-32);
padding: 0 16px;
border-radius: 999px;
color: #f6f6f6;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid transparent;
transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, border-color 0.3s ease;
}
.site-header .brand { margin-right: auto; }
.site-nav {
display: flex;
align-items: center;
gap: var(--s-8);
}
.site-nav a {
color: #f6f6f6;
font-size: var(--text-sm);
text-decoration: none;
padding: var(--s-8) var(--s-16);
border-radius: var(--radius-pill);
transition: background-color 0.2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
background: rgba(246, 246, 246, 0.1);
outline: none;
}
/* Nav submenu (disclosure pattern) — Coaches dropdown. Hover/focus reveal is CSS-only;
JS toggles .is-open on click for touch users. ARIA: button has aria-expanded that
tracks click intent. */
.site-nav-item { position: relative; }
.site-nav-trigger {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
color: #f6f6f6;
font: inherit;
font-size: var(--text-sm);
padding: var(--s-8) var(--s-16);
border-radius: var(--radius-pill);
transition: background-color 0.2s ease;
display: inline-flex;
align-items: center;
gap: var(--s-4);
}
.site-nav-trigger:hover,
.site-nav-trigger:focus-visible {
background: rgba(246, 246, 246, 0.1);
outline: none;
}
.theme-header-light .site-nav-trigger { color: var(--ink); }
.theme-header-light .site-nav-trigger:hover,
.theme-header-light .site-nav-trigger:focus-visible { background: rgba(5, 18, 17, 0.06); }
/* Caret affordance — rotates 180° when the panel is open (aria-expanded is
synced by JS for both hover and click paths). */
.site-nav-trigger-caret {
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease;
}
.site-nav-trigger[aria-expanded="true"] .site-nav-trigger-caret { transform: rotate(180deg); }
.site-nav-submenu {
display: none;
position: absolute;
top: calc(100% + var(--s-24));
left: 50%;
transform: translateX(-50%);
min-width: 640px;
max-width: 1080px;
max-height: calc(100vh - 140px);
overflow-y: auto;
background: var(--blackwoods);
border-radius: var(--radius-card);
padding: var(--s-12);
z-index: 160;
}
.site-nav-item--has-submenu.is-open .site-nav-submenu { display: block; }
.site-nav-submenu ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-8) var(--s-16);
}
.site-nav-submenu a {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-12);
border-radius: var(--radius-pill);
color: #f6f6f6;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.site-nav-submenu-avatar {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--portrait-grad-a, var(--blackwoods-soft)) 0%, var(--portrait-grad-b, var(--blackwoods)) 100%);
}
.site-nav-submenu-avatar::after {
content: attr(data-initials);
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
font-weight: var(--weight-light);
letter-spacing: 0.02em;
pointer-events: none;
}
.site-nav-submenu-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.site-nav-submenu a:hover,
.site-nav-submenu a:focus-visible {
background: rgba(246, 246, 246, 0.1);
outline: none;
}
.site-nav-submenu-name {
font-size: var(--text-sm);
line-height: 1.2;
}
.site-nav-submenu-sub {
font-size: var(--text-xs);
color: rgba(246, 246, 246, 0.62);
line-height: 1.2;
}
/* Narrower desktop viewports — the 720px grid panel can't fit centered under the
trigger, so pin both edges to the page padding and let the 3 columns reflow. */
@media (max-width: 900px) and (min-width: 721px) {
.site-nav-submenu {
left: var(--s-32);
right: var(--s-32);
transform: none;
min-width: 0;
max-width: none;
}
}
@media (max-width: 720px) {
.site-nav { display: none; }
}
@media (min-width: 721px) {
.site-header {
top: 36px;
width: calc(100% - 64px);
padding: 0 8px 0 20px;
}
}
.site-header.is-scrolled {
background: var(--glass-dark-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-color: var(--glass-dark-border);
}
/* Menu toggle — standalone fixed button, mobile only. Stays above drawer so the morph
remains visible when drawer is open. Position matches the header pill's right edge
and vertical center. */
.menu-toggle {
display: none;
position: fixed;
top: 28px;
right: 32px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
appearance: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 250;
color: #f6f6f6;
transition: color 0.3s ease;
}
@media (max-width: 720px) {
.menu-toggle { display: inline-flex; }
.menu-toggle .material-symbols-rounded { font-size: 28px; }
}
body.drawer-open .menu-toggle { color: #051211; }
.menu-toggle-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-toggle-icon--close { opacity: 0; transform: rotate(-90deg); }
body.drawer-open .menu-toggle-icon--menu { opacity: 0; transform: rotate(90deg); }
body.drawer-open .menu-toggle-icon--close { opacity: 1; transform: rotate(0); }
/* Drawer */
.drawer {
position: fixed;
inset: 0;
z-index: 200;
visibility: hidden;
pointer-events: none;
transition: visibility 0s 0.4s;
}
body.drawer-open .drawer {
visibility: visible;
pointer-events: auto;
transition: visibility 0s 0s;
}
.drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 18, 17, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
body.drawer-open .drawer-backdrop { opacity: 1; }
.drawer-panel {
position: absolute;
top: 0;
right: 0;
height: 100dvh;
width: min(360px, 80vw);
background: #f6f6f6;
border-radius: 24px 0 0 24px;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
padding: 64px 24px 0;
display: flex;
flex-direction: column;
gap: 32px;
overflow-y: auto;
overscroll-behavior: contain;
}
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer-panel { transform: translateX(0); }
.drawer-nav {
display: flex;
flex-direction: column;
gap: 16px;
}
.drawer-nav a {
font-size: 1.5rem;
font-weight: 300;
color: #051211;
text-decoration: none;
}
/* Drawer disclosure — tap-to-expand Coaches row. Chevron rotates 180° when open;
sublist animates via the grid-template-rows 0fr → 1fr height-auto pattern. */
.drawer-nav-item--has-submenu { display: flex; flex-direction: column; }
.drawer-nav-trigger {
appearance: none;
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
font-size: 1.5rem;
font-weight: 300;
color: #051211;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.drawer-nav-trigger:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
border-radius: 4px;
}
.drawer-nav-chevron {
font-size: 24px;
transition: transform 0.2s ease;
}
.drawer-nav-trigger[aria-expanded="true"] .drawer-nav-chevron { transform: rotate(180deg); }
.drawer-nav-sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.drawer-nav-trigger[aria-expanded="true"] + .drawer-nav-sub { grid-template-rows: 1fr; }
.drawer-nav-sub-inner { overflow: hidden; }
.drawer-nav-sub ul {
list-style: none;
margin: 0;
padding: 12px 0 0 8px;
display: flex;
flex-direction: column;
gap: 16px;
}
.drawer-nav-sub a {
display: flex;
align-items: center;
gap: var(--s-12);
font-size: 1.125rem;
font-weight: 300;
color: #051211;
text-decoration: none;
}
.drawer-nav-sub-name { line-height: 1.2; }
.drawer-nav-sub-avatar {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--portrait-grad-a, var(--blackwoods-soft)) 0%, var(--portrait-grad-b, var(--blackwoods)) 100%);
}
.drawer-nav-sub-avatar::after {
content: attr(data-initials);
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: var(--weight-light);
letter-spacing: 0.02em;
pointer-events: none;
}
.drawer-nav-sub-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.drawer-footer {
position: sticky;
bottom: 0;
margin-top: auto;
margin-inline: calc(var(--s-24) * -1);
margin-bottom: 0;
padding: var(--s-16) var(--s-24) var(--s-24);
background: #f6f6f6;
z-index: 1;
}
.drawer-waitlist {
width: 100%;
background: var(--ink);
color: var(--bg);
padding: var(--s-16) var(--s-24);
font-size: var(--text-lg);
}
.drawer-waitlist:hover,
.drawer-waitlist:focus-visible {
background: var(--spring);
color: var(--ink);
outline: none;
}
/* Modal — first modal pattern. Desktop: centered card. Mobile (≤720px): bottom sheet. */
.modal {
position: fixed;
inset: 0;
z-index: 300;
visibility: hidden;
pointer-events: none;
transition: visibility 0s 0.35s;
}
.modal.is-open {
visibility: visible;
pointer-events: auto;
transition: visibility 0s 0s;
}
body.modal-open { overflow: hidden; }
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 18, 17, 0.5);
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -48%);
opacity: 0;
width: min(480px, calc(100vw - var(--page-pad) * 2));
height: 400px;
background: var(--glass-light-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-light-border);
color: var(--ink);
border-radius: 20px;
padding: var(--s-24);
box-shadow: 0 24px 60px rgba(5, 18, 17, 0.25);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-logomark {
width: 48px;
height: 48px;
display: block;
}
.modal.is-open .modal-panel {
opacity: 1;
transform: translate(-50%, -50%);
}
.modal-close {
position: absolute;
top: var(--s-12);
right: var(--s-12);
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: transparent;
color: var(--ink);
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.modal-close:hover,
.modal-close:focus-visible { background: rgba(5, 18, 17, 0.08); outline: none; }
.modal-close .material-symbols-rounded { font-size: 22px; }
.modal-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: var(--s-24);
}
.modal-view[hidden] { display: none; }
.modal-view h2 { margin: 0; }
.modal-view .waitlist { margin-top: var(--s-32); }
.modal-view .waitlist-disclaimer { margin-top: var(--s-16); }
.modal-view--success .body { color: var(--ink-muted); margin-top: var(--s-8); }
.modal-view--success .pill-btn { margin-top: var(--s-24); }
@media (max-width: 720px) {
.modal-panel {
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 400px;
transform: translateY(100%);
border-radius: 20px 20px 0 0;
padding: var(--s-24);
box-shadow: 0 -12px 40px rgba(5, 18, 17, 0.25);
}
.modal.is-open .modal-panel { transform: translateY(0); }
}
/* Sticky waitlist CTA — fades in once the hero scrolls out of view.
Glass treatment mirrors the header's `.is-scrolled` state. */
.scroll-to-top {
position: fixed;
bottom: var(--s-24);
left: 50%;
transform: translateX(-50%);
z-index: 150;
background: var(--glass-dark-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-dark-border);
color: var(--bg);
opacity: 0;
visibility: hidden;
pointer-events: none;
box-shadow: 0 8px 24px rgba(5, 18, 17, 0.2);
transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.scroll-to-top:hover,
.scroll-to-top:focus-visible {
background: var(--spring);
color: var(--ink);
border-color: transparent;
outline: none;
}
.scroll-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Coach pages: floating CTA is visible on load, solid Blackwoods + Dust, 56px tall.
Visibility extends to desktop too (override inside the media query below). */
body.theme-header-light .scroll-to-top {
height: 56px;
background: var(--blackwoods);
color: var(--bg);
border: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.theme-header-light .scroll-to-top:hover,
body.theme-header-light .scroll-to-top:focus-visible {
background: var(--spring);
color: var(--ink);
}
@media (min-width: 721px) {
.scroll-to-top { display: none; }
body.theme-header-light .scroll-to-top { display: inline-flex; }
}
.site-footer-socials {
display: flex;
flex-direction: row;
gap: var(--s-12);
margin-top: var(--s-4);
}
.site-footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
}
.site-footer-socials svg { display: block; }
.legal-page {
padding-block: var(--s-120) var(--space-section);
max-width: 720px;
}
.legal-page .legal-meta {
margin: var(--s-16) 0 var(--s-48);
}
.legal-page h2 {
font-weight: var(--weight-light);
font-size: var(--text-card);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
margin: var(--s-48) 0 var(--s-16);
}
.legal-page p {
margin: 0 0 var(--s-16);
}
@media (max-width: 720px) {
.legal-page { padding-block: var(--s-64) var(--space-section); }
}