*/
.card-bg { outline: none; }
/* keep your existing reduced-motion rule */
@media (prefers-reduced-motion: reduce) {
.card-bg,
.card-bg::before,
.card-bg::after { transition: none; }
}
/* CTA container (unchanged, just ensure a stacking context) */
.cta-panel{
position: relative;
z-index: 0; /* so the glow can sit behind */
isolation: isolate; /* keeps the glow scoped to this block */
text-align: center;
padding: var(--space-6) 0 0 0; /* top/bottom only */
}
/* Slightly smaller CTA heading (your earlier tweak) */
#cta h2 { font-size: clamp(1.25rem, 2.6vw, 2rem); }
/* --- Subtle pill glow behind the CTA content --- */
.cta-panel::before{
content: "";
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
width: clamp(28rem, 95vw, 72rem);
height: clamp(8rem, 24vw, 14rem);
border-radius: 9999px;
/* Soft gold glow that fades out */
background:
radial-gradient(60% 120% at 50% 50%,
rgba(240, 240, 240, 0.18) 0%,
rgba(255, 255, 255, 0.1) 35%,
rgba(255, 255, 255, 0) 70%);
filter: blur(50px);
pointer-events: none; /* never block clicks */
z-index: -1; /* sits behind text/buttons inside .cta-panel */
}
/* (optional) a touch more emphasis on larger screens */
@media (min-width: 64rem){
.cta-panel::before{ filter: blur(100px); }
}
/* ===================== APP SECTION — FINAL ===================== */
/* Section spacing */
#app { padding-top: var(--space-8); }
/* Headings centered above content, capped line length */
#app .app-head{
grid-area: head;
text-align: center;
margin-bottom: 0; /* <<< remove extra gap under the head */
}
#app h2,
#app h3.subhead{ text-align: center; }
#app h3.subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
/* Layout: mobile = head → image → text; desktop = head full width, text | media */
.app-layout{
display: grid;
align-items: center;
grid-template-columns: 1fr;
grid-template-areas:
"head"
"media"
"body";
gap: var(--space-6); /* controls head→content spacing */
}
@media (min-width: 56rem){
.app-layout{
grid-template-columns: 1.1fr .9fr;
grid-template-areas:
"head head"
"body media";
gap: var(--space-7); /* slightly looser on desktop */
}
#app .app-head{ margin-bottom: 0; } /* ensure no override inflates gap */
}
/* Media */
#app .app-media{
grid-area: media;
display: grid;
place-items: center;
}
#app .app-media img{
max-width: 680px;
width: 100%;
height: auto;
border-radius: var(--radius);
}
/* Body */
#app .app-body{ grid-area: body; }
/* Feature bullets with gold ticks */
#app .feature-list{
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: grid;
gap: var(--space-2);
}
#app .feature-list li{
display: grid;
grid-template-columns: 1.25rem 1fr;
align-items: start;
gap: .6rem;
}
#app .feature-list .icon{
width: 1.1rem; height: 1.1rem; margin-top: .15rem;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Fine print */
#app .fineprint{
color: var(--text);
margin-bottom: var(--space-4);
}
/* Actions */
#app .app-actions{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Option B: smaller row gap, keep a small head margin */
.app-layout { row-gap: var(--space-3); column-gap: var(--space-7); } /* desktop */
@media (max-width: 55.999rem){
.app-layout { row-gap: var(--space-3); } /* mobile */
#app .app-head { margin-bottom: var(--space-2); }
}
/* Ensure the desktop override doesn’t re-inflate it */
@media (min-width: 56rem){
#app .app-head { margin-bottom: 0; } /* if you choose Option A */
}
/* Inline stats with vertical gold dividers */
/* Scope: existing #app ... and the HOW IT WORKS section (#training-options) */
#app .stats,
#training-options .stats{
display: flex;
align-items: center;
justify-content: center; /* centered like your shot */
gap: var(--space-5);
flex-wrap: wrap; /* can wrap on small screens */
margin-bottom: var(--space-4);
}
#app .stat,
#training-options .stat{
text-align: center;
padding: 0 var(--space-3);
position: relative;
}
/* Number line */
/* Support both
… */
#app .stat strong,
#training-options .stat strong,
#training-options .stat .stat-num{
display: block;
font-weight: 700;
letter-spacing: .02em;
/* don’t force a color so .accent can show gold; fallback to text color */
color: inherit;
}
/* Label line */
/* Support both
… and
… */
#app .stat small,
#training-options .stat small,
#training-options .stat .stat-label{
display: block;
color: var(--muted);
margin-top: .15rem;
}
/* gold divider between items */
#app .stat + .stat::before,
#training-options .stat + .stat::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.75rem;
background: linear-gradient(
to bottom,
rgba(255,193,7,0),
rgba(255,193,7,.75),
rgba(255,193,7,0)
);
}
/* mobile: remove dividers when items wrap */
@media (max-width: 40rem){
#app .stats,
#training-options .stats{ gap: var(--space-3); }
#app .stat,
#training-options .stat{ padding: 0; }
#app .stat + .stat::before,
#training-options .stat + .stat::before{ display: none; }
}
/* Center buttons within the app section column */
#app .app-actions{
justify-content: center; /* horizontally center the row */
align-items: center; /* vertical alignment if they wrap */
text-align: center; /* keeps inline content centered */
}
/* Desktop: make the phone image taller */
@media (min-width: 56rem){
#app .app-media img{
max-height: 500px; /* taller */
width: auto; /* keep aspect ratio */
max-width: 115%; /* don’t overflow its column */
}
}
/* =========================
COACHING SECTION (tidied)
========================= */
/* Tokens for this block */
#coaching{
--coach-gap: var(--space-4);
--coach-gap-lg: var(--space-6);
--coach-minh: 14rem;
--coach-aspect: 5 / 4;
--gold-divider: linear-gradient(to bottom, rgba(255,193,7,0), rgba(255,193,7,.75), rgba(255,193,7,0));
padding-top: var(--space-8);
}
#coaching .coach-head{
text-align: center;
margin: 0 auto;
}
#coaching .coach-head .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* Intro paragraph left-aligned, but constrained width */
#coaching .coach-head p{
text-align: left;
margin: 2rem auto var(--space-4);
}
/* Stats banner */
#coaching .stats{
display:flex; align-items:center; justify-content:center;
gap: var(--space-5); flex-wrap: wrap;
margin: var(--space-4) 0 var(--space-5);
}
#coaching .stat{
position: relative;
text-align: center;
padding: 0 var(--space-3);
}
#coaching .stat strong{ display:block; font-weight:700; letter-spacing:.02em; }
#coaching .stat small{ display:block; color: var(--muted); font-size:.85em; margin-top:.15rem; }
#coaching .stat + .stat::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:1px; height:1.75rem; background: var(--gold-divider);
}
@media (max-width: 40rem){
#coaching .stats{ gap: var(--space-3); }
#coaching .stat{ padding: 0; }
#coaching .stat + .stat::before{ display:none; }
}
/* Cards grid */
.coach-grid{
display:grid;
grid-template-columns: 1fr;
gap: var(--coach-gap);
margin-top: var(--space-4);
}
@media (min-width: 56rem){
.coach-grid{
grid-template-columns: repeat(2, 1fr);
gap: var(--coach-gap-lg);
}
}
/* Card visual base */
.card-visual{
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius);
z-index: 0;
display:flex; flex-direction:column; gap: var(--space-3);
padding: var(--space-5);
color: var(--text);
background-image: var(--img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: var(--coach-minh);
aspect-ratio: auto;
border-bottom: 1px solid var(--accent);
transition: color .25s ease, border-color .25s ease, transform .2s ease;
}
/* keep aspect only when there’s room */
@media (min-width: 56rem){
.card-visual{ aspect-ratio: var(--coach-aspect); }
}
/* Overlays */
.card-visual::before,
.card-visual::after{
content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
pointer-events:none; will-change:opacity; transform:translateZ(0);
}
.card-visual::before{
background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);
opacity: 1; transition: opacity .25s ease;
}
.card-visual::after{
background: var(--accent);
opacity: 0; transition: opacity .25s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.card-visual,
.card-visual::before,
.card-visual::after{ transition: none; }
}
/* Card content */
.coach-card{ display:grid; gap: var(--space-3); align-content:start; }
.coach-card h3{
font-size: clamp(1rem, 1.2vw, 1.25rem);
font-weight: 700; margin: 0;
}
.coach-card p{ margin: 0; }
/* Price highlight */
.coach-card .price{
display:inline-block; color: var(--accent);
font-weight:700; font-size: clamp(1.1rem, 1.6vw, 1.6rem); line-height:1;
}
.coach-card .price .currency{ opacity:.95; font-size:.95em; margin-right:.05em; }
/* keep price gold even when text flips on hover */
/* Center the “From £XX …” line */
.coach-card p:has(.price){
text-align:center; margin: var(--space-2) 0;
}
/* Actions */
.coach-card .actions{
display:flex; justify-content:center; align-items:center;
gap: var(--space-3); text-align:center; margin-top: var(--space-2);
}
@media (max-width: 40rem){
.coach-card .actions{ flex-wrap:nowrap; gap: var(--space-2); }
.coach-card .actions .btn{ width:auto; min-width:0; flex:0 1 auto; white-space:nowrap; }
}
/* Feature list — unified style reused across sections */
#coaching .feature-list{
list-style:none; margin: var(--space-2) 0 var(--space-3); padding:0;
display:grid; gap: var(--space-2);
}
#coaching .feature-list li{
display:grid; grid-template-columns: 1.25rem 1fr; align-items:start; gap:.6rem;
}
#coaching .feature-list .icon{
width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* ===================== COMMUNITY ===================== */
#community { padding-top: var(--space-8); }
/* Headings centered like other sections */
#community .community-head{
text-align: center;
margin-bottom: var(--space-4);
}
#community .community-head .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: 0; /* keep it snug above the grid */
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* Layout: stacked → 2-col */
.community-layout{
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
padding-top: 1rem;
}
@media (min-width: 56rem){
.community-layout{
grid-template-columns: 1.1fr .9fr; /* text | form */
gap: var(--space-7);
}
}
/* Left block */
#community .community-copy p{ margin: 0 0 var(--space-4); }
#community .perks-title{
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700;
margin: 0 0 var(--space-2);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text);
}
/* Perk list (reuses your tick look) */
.perk-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.perk-list li{
display: grid;
grid-template-columns: 1.25rem 1fr;
align-items: start;
gap: .6rem;
}
.perk-list .icon{
width: 1.1rem; height: 1.1rem; margin-top: .15rem; border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Right block: form */
.form-card{
padding: var(--space-5);
border-radius: var(--radius);
/* NEW: only a bottom border on the card */
border: 0;
border-bottom: 1px solid rgba(255,193,7,.999);
}
.form-title{
margin: 0 0 .25rem;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
text-align: center;
}
.form-sub{
margin: 0 0 var(--space-4);
color: var(--muted);
text-align: center;
}
.form-row{ display: grid; gap: .5rem; margin-bottom: var(--space-3); }
.form-row .label{ font-weight: 600; letter-spacing: .02em; font-size: .9em; color: var(--muted); }
.input{
width: 100%;
padding: .85rem 1rem;
border-radius: var(--btn-radius);
/* already bottom-only border on inputs */
border: 0;
border-bottom: 1px solid rgb(255, 193, 1);
background: rgba(255,255,255,.06);
color: var(--text);
}
.input::placeholder{ color: rgba(255,255,255,.6); }
.input:focus{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
/* Checkbox row */
.form-row.checkbox{
display: grid;
grid-template-columns: 1.15rem 1fr;
align-items: start;
gap: .6rem;
}
.form-row.checkbox input[type="checkbox"]{
width: 1.15rem; height: 1.15rem; margin-top: .2rem;
accent-color: #111; /* keeps the check dark on gold */
border: 1px solid rgba(255,193,7,.6);
background: rgba(255,255,255,.06);
}
.form-row.checkbox span{ color: var(--muted); }
/* Submit */
.form-card .submit{
width: 100%;
margin-top: var(--space-2);
}
.hidden{ display:none !important; } /* honeypot */
/* Inline stats with vertical gold dividers — community */
#community .stats--community{
display: flex;
align-items: center;
justify-content: flex-start; /* left-align in the copy column */
gap: var(--space-5);
flex-wrap: wrap;
margin: var(--space-4) 0 var(--space-3);
}
#community .stats--community .stat{
text-align: center;
padding: 0 var(--space-3);
position: relative;
}
#community .stats--community .stat strong{
display: block;
font-weight: 700;
letter-spacing: .02em;
}
#community .stats--community .stat small{
display: block;
color: var(--muted);
margin-top: .15rem;
}
/* gold divider between items */
#community .stats--community .stat + .stat::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.75rem;
background: linear-gradient(
to bottom,
rgba(255,193,7,0),
rgba(255,193,7,.75),
rgba(255,193,7,0)
);
}
/* mobile: remove dividers when items wrap */
@media (max-width: 40rem){
#community .stats--community{ gap: var(--space-3); }
#community .stats--community .stat{ padding: 0; }
#community .stats--community .stat + .stat::before{ display: none; }
}
/* CTA buttons under stats */
#community .community-cta{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-2);
}
/* Center the stats+CTA horizontally in the left column */
#community .stats--community{
justify-content: center; /* was flex-start */
text-align: center; /* center the labels under numbers */
}
#community .community-cta{
justify-content: center; /* center the buttons row */
}
/* ===== BLOG ===== */
#blog{ padding-top: var(--space-8); padding-bottom: var(--space-6);}
/* BLOG: H1 uses normal text color; the span handles the accent */
#blog-head .blog-head h1{
color: var(--text); /* NOT accent */
}
#blog-head .blog-head h1 .accent{
color: var(--accent); /* keep the gold */
}
/* BOOKING: keep the H1 white (or your page text color) */
.booking-page .welcome-section h1{
color: #fff; /* or: color: var(--text); if var(--text) is white */
}
#blog .blog-head{ text-align:center; margin-bottom: var(--space-4); }
#blog .blog-head .subhead{
font-weight:700; color:var(--text); text-transform:none; letter-spacing:.01em;
margin-top:-.25rem; margin-bottom:0; line-height:1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* Carousel container */
#blog .blog-cards{ overflow:hidden; }
#blog .blog-track{
display:flex;
gap: var(--space-4);
transition: transform .35s ease;
will-change: transform;
padding-top: 1rem;
}
/* Slides: 1-up on mobile, 2-up ≥56rem */
#blog .post-card{
background: rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,193,7,.9999);
border-radius: var(--radius);
overflow: hidden;
min-height: 30rem;
max-height: clamp(30rem, 5vw + 30rem, 38rem);
display:grid;
grid-template-rows: 0.9fr 1fr; /* top image / bottom body */
flex: 0 0 96%; /* 1 per view by default */
}
@media (min-width: 56rem){
#blog .post-card{ flex-basis: 49%; } /* 2 per view */
}
#blog .post-media{
background-image: var(--img);
background-size: cover; background-position: center;
min-height: 8rem;
}
#blog .post-body{ padding: var(--space-4); display:grid; gap:.8rem; align-content:start; }
#blog .post-date{ color: var(--muted); }
#blog .post-title{ margin:0; font-weight:700; font-size: clamp(1rem,1.2vw,1.25rem); }
#blog .post-teaser{ margin:0 0 .5rem; color: var(--text); }
#blog .post-cta{ justify-self:start; }
/* Arrows – always visible */
#blog .blog-arrows{
display:flex; justify-content:center; gap: var(--space-4);
margin: var(--space-3) 0 var(--space-4);
}
#blog .blog-arrows .arrow{
appearance:none; border:1px solid var(--accent); background:transparent; color:var(--text);
padding:.5rem 1rem; border-radius: var(--btn-radius); cursor:pointer; font-weight:700;
}
#blog .blog-arrows .arrow:focus-visible{ outline:none; box-shadow: var(--gold-glow-ring), var(--gold-glow-outer); }
/* Footer text + CTAs */
#blog .blog-more{
text-align:center; color: var(--text);
margin: 0 auto var(--space-3);
}
#blog .blog-cta{
display:flex; justify-content:center; gap: var(--space-3); flex-wrap:wrap;
}
/* Center the card CTA button horizontally */
#blog .post-cta{
justify-self: center; /* grid self-centering */
display: flex; /* ensures perfect centering */
justify-content: center;
}
/* BLOG carousel — make the last card fully visible */
#blog .posts-track{
display: flex; /* or your existing grid/track style */
gap: var(--space-6);
padding-left: var(--space-4); /* space before the first card */
}
/* ghost spacer at the end = container padding on the right */
#blog .posts-track::after{
content: "";
flex: 0 0 var(--space-4); /* matches your .container side padding */
}
/* BLOG: nav arrows */
#blog .blog-nav {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-3);
}
#blog .blog-nav .arrow{
appearance: none;
border: 1px solid var(--accent);
background: rgba(255,255,255,0.06);
color: var(--text);
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
/* extra vertical padding (and a touch more width) */
padding-block: 0.9rem; /* ↑ more top/bottom */
padding-inline: 1.1rem;
transition: box-shadow .25s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
cursor: pointer;
}
#blog .blog-nav .arrow:hover{
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
#blog .blog-nav .arrow:focus-visible{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
/* BLOG: mobile/desktop arrows */
.blog-arrows{
display:flex;
justify-content:center;
gap: var(--space-3);
margin-top: var(--space-3);
padding-bottom: 1.5rem;
}
.blog-arrows .arrow{
appearance:none;
border: 1px solid var(--accent);
background: rgba(255,255,255,0.06);
color: var(--text);
border-radius: 9999px;
display:inline-flex;
align-items:center;
justify-content:center;
/* extra vertical padding */
padding-block: 1.5rem; /* top/bottom */
padding-inline: 1.1rem; /* left/right */
transition: box-shadow .25s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
cursor:pointer;
-webkit-tap-highlight-color: transparent;
}
.blog-arrows .arrow:hover,
.blog-arrows .arrow:focus-visible{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer); /* same ring as buttons */
}
/* dull + unclickable when disabled */
.blog-arrows .arrow[disabled],
.blog-arrows .arrow[aria-disabled="true"],
.blog-arrows .arrow.is-disabled{
opacity: .35;
pointer-events: none; /* ignore clicks */
box-shadow: none;
cursor: default;
filter: grayscale(100%);
}
/* BLOG cards — full accent wash on hover, image disappears, text flips black */
#blog .post-card{
position: relative;
isolation: isolate; /* keep overlay scoped to the card */
overflow: hidden;
transition: border-color .25s ease, color .25s ease;
}
/* layer the children so we can sandwich the overlay above the image */
#blog .post-media,
#blog .post-body{ position: relative; }
#blog .post-media{ z-index: 0; transition: opacity .25s ease; }
#blog .post-body{ z-index: 2; }
/* full-card accent overlay (sits above image, below text) */
#blog .post-card::after{
content: "";
position: absolute;
inset: 0;
background: var(--accent);
opacity: 0;
z-index: 1;
transition: opacity .25s ease;
}
/* motion respect */
@media (prefers-reduced-motion: reduce){
#blog .post-card,
#blog .post-card::after,
#blog .post-media{ transition: none; }
}
/* Give the track a small end buffer so the last card never “kisses” the edge */
#blog .blog-track::after{
content: "";
flex: 0 0 var(--space-4);
}
/* ===== Footer ===== */
.site-footer{
background: var(--true-black);
border-top: 2px solid var(--accent);
padding: var(--space-6) 0 var(--space-5);
color: var(--muted);
font-size: .8rem; /* body text in footer */
}
/* grid: stacked → 4-up */
.footer-grid{
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
text-align: center; /* mobile centered */
}
@media (min-width: 48rem){
.footer-grid{
grid-template-columns: repeat(4, 1fr);
text-align: left; /* desktop left align columns */
column-gap: var(--space-6);
}
}
/* headings */
.footer-head{
color: var(--text);
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 var(--space-2);
font-weight: 700;
font-size: .85rem; /* per spec */
}
/* lists */
.footer-links{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .4rem;
}
.site-footer a{
color: inherit; /* muted by default */
text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible{
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* divider */
.foot-divider{
width: 90%;
margin: var(--space-5) auto var(--space-3);
height: 1px;
border: 0;
background: linear-gradient(90deg,
rgba(255,193,7,0), rgba(255,193,7,.75), rgba(255,193,7,0));
}
/* legal row */
.footer-legal{
display: grid;
justify-items: center;
gap: var(--space-2);
text-align: center;
}
@media (min-width: 48rem){
.footer-legal{
grid-template-columns: 1fr auto;
align-items: center;
justify-items: start;
text-align: left;
}
}
.footer-legal .copyright{
margin: 0;
}
.footer-legal .legal-links{
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: .75rem; /* smaller legal links */
}
.footer-legal .legal-links a{
color: var(--muted);
}
.footer-legal .legal-links a:hover,
.footer-legal .legal-links a:focus-visible{
color: var(--accent);
text-decoration: underline;
}
/* Footer credit link */
.site-footer .made-by{
margin: 0;
color: var(--muted);
font-size: .75rem; /* soft size */
text-align: center;
padding-top: 0.5rem;
opacity: 0.7;
}
.site-footer .made-by a{
color: inherit;
text-decoration: underline; /* always underlined */
text-underline-offset: 2px;
}
.site-footer .made-by a:hover,
.site-footer .made-by a:focus-visible{
color: var(--accent);
}
@media (min-width: 48rem){
.footer-legal{
grid-template-columns: 1fr auto; /* keep existing */
grid-auto-rows: auto;
row-gap: var(--space-2);
}
.site-footer .made-by{
grid-column: 1 / -1; /* full width under legal row */
text-align: center; /* or center if you prefer */
}
}
.site-footer{
margin-top: var(--space-6); /* gap above the footer */
}
/* place after your footer rules */
.footer-about { text-align: left !important; }
.footer-about p { text-align: left !important; }
/* Footer: make copy in this column muted */
.site-footer .footer-col p {
color: var(--muted);
text-align: left;
}
/* app.html – hero h2 @ 1.1rem → 3rem */
.page-app #hero .hero-subhead {
font-size: clamp(1.1rem, 2.6vw + 0.5rem, 3rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
/* app.html – dark glass ribbon across the H1 */
.page-app #hero .hero-title {
position: relative;
display: inline-block; /* so the ribbon centers over just the word */
}
/* base: mobile — full width */
.page-app #hero .hero-ribbon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0.35rem 1.2rem;
background: rgba(10,10,10,0.01);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
white-space: nowrap;
width: 100vw; /* ← use width, not min-width */
z-index: 2;
}
/* breakpoint: wider screens = 50vw ribbon */
@media (min-width: 48rem) {
.page-app #hero .hero-ribbon {
min-width: 0; /* ← override the earlier min-width if it still exists anywhere */
width: 50vw; /* shrink to half the viewport */
}
}
/* the ribbon text */
.page-app #hero .hero-ribbon .ribbon-text {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
color: #fff;
font-size: clamp(1rem, 0.8vw + 0.8rem, 1.4rem);
/* If the H1 is very large, add a tiny stroke for readability */
}
/* optional: prevent accidental selection while dragging */
.page-app #hero .hero-ribbon,
.page-app #hero .hero-ribbon * {
user-select: none;
pointer-events: none;
}
/* ============ Unified APP-like sections ============
Applies to: #app (media right on desktop by default),
#tracking (media left on desktop),
#nutrition (media right on desktop),
#analytics (media left on desktop)
===================================================== */
:is(#app, #tracking, #nutrition, #analytics) {
padding-top: var(--space-8);
}
/* Headings */
:is(#app, #tracking, #nutrition, #analytics) .app-head{
grid-area: head;
text-align: center;
margin-bottom: 0;
}
:is(#app, #tracking, #nutrition, #analytics) h2,
:is(#app, #tracking, #nutrition, #analytics) h3.subhead { text-align: center; }
:is(#app, #tracking, #nutrition, #analytics) h3.subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
max-width: 60ch;
margin-inline: auto;
}
/* Media */
:is(#app, #tracking, #nutrition, #analytics) .app-media{
grid-area: media;
display: grid;
place-items: center;
}
:is(#app, #tracking, #nutrition, #analytics) .app-media img{
max-width: 680px;
width: 100%;
height: auto;
border-radius: var(--radius);
}
/* Body */
:is(#app, #tracking, #nutrition, #analytics) .app-body { grid-area: body; }
/* Feature list */
:is(#app, #tracking, #nutrition, #analytics) .feature-list{
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: grid;
gap: var(--space-2);
}
:is(#app, #tracking, #nutrition, #analytics) .feature-list li{
display: grid;
grid-template-columns: 1.25rem 1fr;
align-items: start;
gap: .6rem;
}
:is(#app, #tracking, #nutrition, #analytics) .feature-list .icon{
width: 1.1rem; height: 1.1rem; margin-top: .15rem;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Fine print & actions */
:is(#app, #tracking, #nutrition, #analytics) .fineprint{
color: var(--text);
margin-bottom: var(--space-4);
}
:is(#app, #tracking, #nutrition, #analytics) .app-actions{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
/* Stats */
:is(#app, #tracking, #nutrition, #analytics) .stats{
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
:is(#app, #tracking, #nutrition, #analytics) .stat{
text-align: center;
padding: 0 var(--space-3);
position: relative;
}
:is(#app, #tracking, #nutrition, #analytics) .stat strong{
display: block;
font-weight: 700;
color: var(--text);
letter-spacing: .02em;
}
:is(#app, #tracking, #nutrition, #analytics) .stat small{
display: block;
color: var(--muted);
margin-top: .15rem;
}
:is(#app, #tracking, #nutrition, #analytics) .stat + .stat::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.75rem;
background: linear-gradient(to bottom, rgba(255,193,7,0), rgba(255,193,7,.75), rgba(255,193,7,0));
}
/* Mobile tweaks */
@media (max-width: 40rem){
:is(#app, #tracking, #nutrition, #analytics) .stats{ gap: var(--space-3); }
:is(#app, #tracking, #nutrition, #analytics) .stat{ padding: 0; }
:is(#app, #tracking, #nutrition, #analytics) .stat + .stat::before{ display: none; }
}
/* Desktop polish shared across sections */
@media (min-width: 56rem){
:is(#app, #tracking, #nutrition, #analytics) .app-head{ margin-bottom: 0; }
:is(#app, #tracking, #nutrition, #analytics) .app-media img{
max-height: 500px;
width: auto;
max-width: 115%;
}
/* Pin text to top; keep same horizontal position */
:is(#app, #tracking, #nutrition, #analytics) .app-body { align-self: start; margin-top: 1rem; }
}
/* Section-specific desktop flips (place AFTER any generic .app-layout rules) */
@media (min-width: 56rem){
/* Workout Tracking — media LEFT */
#tracking .app-layout{
grid-template-areas:
"head head"
"media body";
grid-template-columns: 0.9fr 1.1fr;
}
/* Progress Analytics — media LEFT */
#analytics .app-layout{
grid-template-areas:
"head head"
"media body";
grid-template-columns: 0.9fr 1.1fr;
}
}
/* Small title reuse */
:is(#community, #tracking, #nutrition, #analytics) .perks-title{
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700;
margin: 0 0 var(--space-2);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text);
}
/* =========================
TESTIMONIALS
========================= */
#testimonials {
padding-top: var(--space-8);
}
/* Header */
#testimonials .testi-head {
text-align: center;
margin-bottom: var(--space-4);
}
#testimonials .testi-head .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: 0;
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* =========================
Carousel
========================= */
#testimonials .testi-cards {
overflow: hidden;
}
#testimonials .testi-track {
display: flex;
gap: var(--space-4);
transition: transform .35s ease;
will-change: transform;
padding-top: 1rem;
}
/* =========================
Card
========================= */
#testimonials .testi-card{
background: rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,193,7,.999);
border-radius: var(--radius);
padding: var(--space-4);
display: grid;
gap: .75rem;
align-content: start;
min-height: 14rem;
/* 1-up on mobile, 2-up ≥56rem (matches blog) */
flex: 0 0 96%;
/* Hover overlay behavior */
position: relative;
isolation: isolate; /* keep overlay scoped to the card */
overflow: hidden;
transition: border-color .25s ease, color .25s ease;
}
/* overlay layer */
#testimonials .testi-card::after{
content: "";
position: absolute;
inset: 0;
background: var(--accent);
opacity: 0;
z-index: 0; /* sits beneath text */
transition: opacity .25s ease;
}
/* ensure text sits above overlay */
#testimonials .testi-card > * {
position: relative;
z-index: 1;
}
/* reduced motion: no animated overlay */
@media (prefers-reduced-motion: reduce){
#testimonials .testi-card,
#testimonials .testi-card::after{
transition: none;
}
}
/* =========================
Card inner content
========================= */
#testimonials .testi-stars{
font-size: .95rem;
letter-spacing: .15em;
color: var(--accent);
font-weight: 700;
}
#testimonials .testi-quote{
margin: 0;
color: var(--text);
}
#testimonials .testi-person{
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: .6rem;
}
#testimonials .avatar{
width: 2rem;
height: 2rem;
border-radius: 999px;
object-fit: cover;
}
#testimonials .name{
color: var(--muted);
font-weight: 600;
}
/* =========================
Arrows (match blog carousel)
========================= */
/* Share blog arrow visuals with testimonial/demo arrows */
.testi-arrows,
.blog-arrows{
display:flex; justify-content:center; gap: var(--space-3);
margin-top: var(--space-3);
padding-bottom: 1.5rem;
}
.testi-arrows .arrow,
.blog-arrows .arrow{
appearance:none;
border: 1px solid var(--accent);
background: rgba(255,255,255,0.06);
color: var(--text);
border-radius: 9999px;
display:inline-flex; align-items:center; justify-content:center;
padding-block: 0.5rem;
padding-inline: 1rem;
transition: box-shadow .25s ease, transform .15s ease,
background-color .2s ease, border-color .2s ease;
cursor:pointer; -webkit-tap-highlight-color: transparent;
}
.testi-arrows .arrow:hover,
.testi-arrows .arrow:focus-visible,
.blog-arrows .arrow:hover,
.blog-arrows .arrow:focus-visible{
outline:none; box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
#testimonials .testi-arrows .arrow[disabled]{
opacity: .35;
pointer-events: none;
filter: grayscale(100%);
}
/* =========================
Footer copy + CTAs
========================= */
#testimonials .testi-more{
margin-top: 0; /* remove extra gap under arrows */
margin-bottom: var(--space-3);
text-align: center;
color: var(--text);
}
#testimonials .testi-cta{
display: flex;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
}
/* =========================
Layout at ≥56rem (matches blog)
========================= */
@media (min-width: 56rem){
#testimonials .testi-card{
flex-basis: 49%;
}
}
/* Make a top/middle/bottom grid */
#testimonials .testi-card{
display: grid;
grid-template-rows: auto 1fr auto; /* stars | quote grows | person at bottom */
}
/* Explicitly place items (adjust if your DOM order differs) */
#testimonials .testi-stars { grid-row: 1; }
#testimonials .testi-quote { grid-row: 2; }
#testimonials .testi-person{ grid-row: 3; align-self: start; }
/* =========================
BETTER SECTION (mirrors Coaching)
========================= */
#better{
--coach-gap: var(--space-4);
--coach-gap-lg: var(--space-6);
padding-top: var(--space-8);
}
/* Head + intro */
#better .coach-head{
text-align: center;
margin: 0 auto;
}
#better .coach-head .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
#better .coach-head p{
text-align: left;
margin: 2rem auto var(--space-4);
}
/* Feature list (mirror of #coaching) */
#better .feature-list{
list-style:none; margin: var(--space-2) 0 var(--space-3); padding:0;
display:grid; gap: var(--space-2);
}
#better .feature-list li{
display:grid; grid-template-columns: 1.25rem 1fr; align-items:start; gap:.6rem;
}
#better .feature-list .icon{
width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Price line (centered + matches coaching size) */
#better .price-line{
text-align: center;
margin: var(--space-2) 0;
}
#better .price-line strong,
#better .price-line .price{
display: inline-block;
font-weight: 700;
font-size: clamp(1.1rem, 1.6vw, 1.6rem);
line-height: 1;
color: var(--accent); /* gold by default */
}
#better .price-line .currency{
opacity:.95;
font-size:.95em;
margin-right:.05em;
}
/* Closing paragraph + buttons below cards */
#better .closing{
margin: 2rem auto 0;
}
#better .better-actions{
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-3);
}
/* ============= SEE IT IN ACTION ============= */
#demo{ padding-top: var(--space-8);
padding-bottom: 0rem;}
#demo .demo-head{
text-align:center;
margin: 0 auto;
}
#demo .demo-head .subhead{
font-weight:700; color:var(--text); text-transform:none;
letter-spacing:.01em; margin-top:-.25rem; margin-bottom:var(--space-3);
line-height:1.15; font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* Carousel shell */
#demo .demo-cards{ overflow:hidden; }
#demo .demo-track{
display:flex;
gap: var(--space-4);
transition: transform .35s ease;
will-change: transform;
padding-top: var(--space-4);
}
#demo .demo-card{
flex: 0 0 100%;
display: grid;
place-items: center;
min-height: clamp(22rem, 50vw, 27rem); /* was 22–34rem → now 22–27rem */
border-radius: var(--radius);
}
/* Phone mockup sizing */
#demo .demo-card img{
width: min(90%, 28rem);
height: auto;
object-fit: contain;
border-radius: 0; /* keep true device silhouette */
}
/* Desktop: make demo slides shorter */
@media (min-width: 56rem){
#demo .demo-card{
min-height: clamp(18rem, 28vw, 22rem); /* was 22–27rem → now ~18–22rem on desktop */
}
#demo .demo-card img{
width: min(75%, 22rem); /* optional: shrink the phone a bit too */
}
}
/* Space the two CTA buttons, keep them inline */
#cta .cta-panel .btn { display: inline-flex; vertical-align: middle; }
#cta .cta-panel .btn + .btn { margin-left: var(--space-3); }
/* (remove any rule that set .cta-panel to display:flex column) */
@media (max-width: 30rem){
#cta .cta-panel { display: block; } /* ensure it doesn't force a column */
#cta .cta-panel .btn + .btn { margin-left: var(--space-2); }
}
/* Optional: tighten padding on very small screens to avoid wrap */
@media (max-width: 22rem){
#cta .cta-panel .btn { padding-inline: 0.9rem; }
}
:root{
--feather: 18px; /* sides + top */
--feather-bottom: 8px; /* shallower bottom fade */
}
.phone-mockup .screen{ position: relative; overflow: visible; }
.phone-mockup .screen::after{
content:"";
position:absolute;
inset:-1px; /* tiny overhang to avoid a seam */
pointer-events:none;
background:
/* sides (use --feather) */
linear-gradient(to right, var(--base), transparent var(--feather)) left / var(--feather) 100% no-repeat,
linear-gradient(to left, var(--base), transparent var(--feather)) right / var(--feather) 100% no-repeat,
/* top (use --feather) */
linear-gradient(to bottom, var(--base), transparent var(--feather)) top / 100% var(--feather) no-repeat,
/* bottom (shallower) */
linear-gradient(to top, var(--base), transparent var(--feather-bottom)) bottom / 100% var(--feather-bottom) no-repeat;
}
/* APP page — tidy stat row spacing + divider placement */
.page-app #app .stats{
margin-block: 1rem; /* tighten vertical space above/below */
gap: 2.75rem; /* even horizontal spacing */
flex-wrap: nowrap; /* keep in one line on desktop */
}
.page-app #app .stat{
padding: 0; /* remove extra padding that widened gaps */
position: relative;
}
/* center the divider in the middle of the gap */
.page-app #app .stat + .stat::before{
content: "";
position: absolute;
left: -1.375rem; /* half of the 2.75rem gap */
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.25rem; /* slightly shorter so it doesn’t crowd text */
background: linear-gradient(
to bottom,
rgba(255,193,7,0),
rgba(255,193,7,.75),
rgba(255,193,7,0)
);
}
/* Small screens: let it wrap neatly and drop the dividers */
@media (max-width: 40rem){
.page-app #app .stats{
flex-wrap: wrap;
row-gap: 0.75rem;
column-gap: 2rem;
margin-block: 0.75rem;
}
.page-app #app .stat + .stat::before{ display: none; }
}
/* ===== In-Person: Location ===== */
#location { padding-top: var(--space-8); }
.location-layout{
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: start;
}
@media (min-width: 56rem){
.location-layout{
grid-template-columns: 0.9fr 1.1fr; /* copy | map */
gap: var(--space-7);
}
}
#location .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
}
/* Address */
.loc-address{
font-style: normal;
color: var(--muted);
line-height: 1.5;
margin-bottom: var(--space-3);
}
/* Actions */
.location-actions{
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Map container controls size (kept) */
.map-embed{
position: relative;
overflow: hidden;
border-radius: var(--radius);
isolation: isolate;
aspect-ratio: 16 / 10;
background: transparent;
}
/* Feather overlay (kept) */
.map-embed::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 80px 40px rgba(1,1,1,.55);
border-radius: inherit;
z-index: 2;
}
/* ⬇️ Both iframe and placeholder fill the container identically */
.map-embed iframe,
.map-embed .map-placeholder{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: inherit;
display: block;
z-index: 1; /* stays under the feather overlay */
}
/* Placeholder button styles */
.map-placeholder{
background: transparent;
padding: 0;
cursor: pointer;
}
/* Placeholder image should fill without stretching */
.map-placeholder img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
/* Centered “Load map” pill on top of the image */
.map-placeholder span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: .6rem 1rem;
border-radius: 999px;
background: rgba(0,0,0,.65);
color: #fff;
font-weight: 600;
z-index: 3; /* above overlay */
}
/* Mobile aspect ratio tweak (kept) */
.location-map .map-embed { aspect-ratio: 16 / 10; }
@media (max-width: 55.999rem){
.location-map .map-embed { aspect-ratio: 4 / 5; }
}
/* Map card (no border, no padding rim) */
.map-card{
padding: 0;
border-radius: var(--radius);
border: 0;
}
/* Responsive map embed with feather fade to base background */
.map-embed{
position: relative;
overflow: hidden;
border-radius: var(--radius);
isolation: isolate;
aspect-ratio: 16 / 10;
background: transparent; /* removed grey background */
}
.map-embed::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 80px 40px rgba(1,1,1,.55);
border-radius: inherit;
z-index: 2;
}
.map-embed iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
z-index: 1;
}
/* Mobile tweaks: taller map + centered H2/subhead/address & buttons */
.location-map .map-embed { aspect-ratio: 16 / 10; }
@media (max-width: 55.999rem) {
.location-map .map-embed { aspect-ratio: 4 / 5; }
#location .location-copy h2,
.location-copy h3,
.location-copy .loc-address { text-align: center; }
#location .location-actions {
justify-content: center;
text-align: center;
}
}
/* ===== In-Person: Training Options ===== */
#training-options { padding-top: var(--space-8); }
#training-options .training-head{ text-align:center; margin-inline:auto; }
#training-options .training-head h2{ margin-bottom:0; }
#training-options .training-head .subhead{
font-weight:700; color:var(--text); text-transform:none; letter-spacing:.01em;
margin-top:-.25rem; margin-bottom:var(--space-3); line-height:1.15;
}
#training-options .training-intro{ color:var(--text); margin:0 auto var(--space-5); }
/* Grid: 1 → 3 */
.tiers-grid{
display:grid;
gap: var(--space-5);
grid-template-columns:1fr;
}
@media (min-width:56rem){
.tiers-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
}
/* Card layout = column flex so we can pin CTAs */
.tier-card{
display:flex;
flex-direction:column;
gap: var(--space-3);
padding: var(--space-5);
min-height:100%;
}
/* Headings aligned (works with/without badge) */
.tier-head{
display:grid;
align-content:start;
gap:.35rem;
margin-bottom: var(--space-3);
min-height: 6.25rem; /* ensures equal head height incl. badge */
}
.tier-head h3{
font-size: clamp(1rem,1.2vw,1.25rem);
font-weight:700; margin:0; text-transform:none;
}
.tier-badge{
justify-self:start; align-self:start;
padding:.25rem .6rem; border-radius:9999px;
border:1px solid var(--true-black);
background: var(--accent); color:#111;
font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.price-line{
margin: var(--space-2) 0 0;
font-weight:700; color: var(--accent);
}
.price-line .currency{ opacity:.95; margin-right:.05em; }
.price-line small{ color: var(--muted); font-weight:600; }
/* Features: keep tight spacing; DO NOT stretch the li’s */
.tier-features{ flex:1 1 auto; } /* takes extra space so CTA drops */
#training-options .feature-list{
list-style:none; margin: var(--space-2) 0 0; padding:0;
display:grid; gap: var(--space-2);
}
#training-options .feature-list li{
display:grid; grid-template-columns:1.25rem 1fr; align-items:start; gap:.6rem;
}
#training-options .feature-list .icon{
width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Notes + pinned actions */
.tier-note{ color: var(--muted); margin-top: var(--space-3); }
.tier-actions,
.tier-card .actions{ /* support either class name */
margin-top:auto; /* pins the button row to bottom */
display:flex; justify-content:center; gap: var(--space-3); text-align:center;
}
/* Mobile niceties */
@media (max-width:55.999rem){
#training-options .training-head{ text-align:center; }
.tier-actions, .tier-card .actions{ justify-content:center; }
}
/* In-person page: loosen H2 → subhead spacing */
.page-app #training-options .training-head .subhead{
margin-top: var(--space-1); /* ≈ 0.5rem by your scale */
margin-bottom: var(--space-3);
}
/* global: affects all .card-visual (not blog) */
.card-visual::before{
background: rgba(0,0,0,.55); /* uniform darkness from top to bottom */
opacity: 1;
transition: opacity .25s ease;
}
.card-bg::before{
background: rgba(0,0,0,.6);
opacity: 1;
}
/* WHY IN-PERSON — match #meaning section rhythm */
#what-you-get { padding-top: var(--space-8); }
#what-you-get h2,
#what-you-get .subhead { text-align: center; }
#what-you-get .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
#what-you-get .lede{
margin: calc(var(--space-2) * -1 + var(--space-3)) auto var(--space-4);
color: var(--text);
}
/* Stats banner inside WHAT YOU GET (match global look) */
#what-you-get .stats{
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
flex-wrap: wrap;
margin: var(--space-3) 0 var(--space-4);
}
#what-you-get .stat{
text-align: center;
padding: 0 var(--space-3);
position: relative;
}
#what-you-get .stat strong{
display: block;
font-weight: 700;
letter-spacing: .02em;
}
#what-you-get .stat small{
display: block;
color: var(--muted);
margin-top: .15rem;
}
/* gold divider between items (auto-hides when wrapping) */
#what-you-get .stat + .stat::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.75rem;
background: linear-gradient(
to bottom,
rgba(255,193,7,0),
rgba(255,193,7,.75),
rgba(255,193,7,0)
);
}
@media (max-width: 40rem){
#what-you-get .stats{ gap: var(--space-3); }
#what-you-get .stat{ padding: 0; }
#what-you-get .stat + .stat::before{ display: none; }
}
/* CTAs under paragraph */
#what-you-get .cta-row{
display: flex;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
/* GLOBAL feature list (gold circular ticks) */
.feature-list{
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.feature-list li{
display: grid;
grid-template-columns: 1.25rem 1fr;
align-items: start;
gap: .6rem;
}
.feature-list .icon{
width: 1.1rem;
height: 1.1rem;
margin-top: .15rem;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
/* Make image-backed cards taller on small screens */
@media (max-width: 40rem){
.grid-cards .card-bg{
aspect-ratio: auto; /* let content define height */
min-height: 20rem; /* give it breathing room */
}
}
/* From tablet up (2×2 grid), bring back the aesthetic ratio */
@media (min-width: 40.001rem){
.grid-cards .card-bg{
aspect-ratio: auto; /* your original look */
min-height: 0; /* reset the min-height */
}
}
/* Desktop: restore the aesthetic ratio */
@media (min-width: 64.001rem){
.grid-cards .card-bg{
aspect-ratio: 5 / 4;
min-height: 0;
}}
/* WHO THIS IS FOR — heading rhythm like other sections */
#who-for {
padding-top: var(--space-8);
}
/* Headings */
#who-for h2,
#who-for .subhead {
text-align: center;
}
#who-for .subhead {
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* Grid: stacked → two-up */
#who-for .who-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
padding-top: var(--space-4);
}
@media (min-width: 40rem) {
#who-for .who-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Titles */
#who-for .who-title {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
margin: 0;
}
/* Cards: keep glass look but ONLY a bottom border */
#who-for .who-card {
display: grid;
gap: var(--space-3);
border: 0;
border-bottom: 1px solid var(--accent);
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: saturate(140%) blur(8px);
backdrop-filter: saturate(140%) blur(8px);
}
/* “Not for you” X-icon variant (same layout as ticks) */
#who-for .feature-list--no .icon {
position: relative;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 62%),
conic-gradient(from 270deg, rgba(255,255,255,.6) 0 25%, rgba(255,255,255,.4) 25% 100%);
}
#who-for .feature-list--no .icon::after {
content: "×";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-weight: 700;
line-height: 1;
color: var(--true-black); /* crisp mark inside the pale disc */
font-size: .8rem;
}
/* Inline link row */
#who-for .alt-path {
margin: var(--space-2) 0 0;
color: var(--muted);
}
#who-for .arrow-link {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
}
#who-for .arrow-link::after {
content: " →";
}
#who-for .arrow-link:hover {
color: var(--accent);
}
/* Make the grid cells stretch so cards share row height */
#who-for .who-grid{
align-items: stretch; /* ensures equal card heights per row */
}
/* Three-row card: title | flexible body | pinned footer */
#who-for .who-card{
display: grid;
grid-template-rows: auto 1fr auto; /* top | grows | bottom */
height: 100%;
gap: var(--space-3);
border: 0;
border-bottom: 1px solid var(--accent);
background: rgba(255,255,255,0.06);
-webkit-backdrop-filter: saturate(140%) blur(8px);
backdrop-filter: saturate(140%) blur(8px);
border-radius: var(--radius);
}
/* Middle area can just be a simple wrapper */
#who-for .who-body{
min-height: 0; /* allows content to shrink if needed */
display: block;
}
/* Footer sits at the bottom by virtue of the grid; center its contents */
#who-for .who-footer{
text-align: center;
padding-top: var(--space-2);
}
#who-for .alt-path{
margin: 0 0 var(--space-2);
color: var(--muted);
}
#who-for .cta-row{
display: inline-flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
}
/* FAQ — centered head + subhead */
#faq { padding-top: var(--space-8); }
#faq h2, #faq .subhead { text-align: center; }
#faq .subhead{
font-weight: 700; color: var(--text); text-transform: none; letter-spacing: .01em;
margin-top: -.25rem; margin-bottom: var(--space-3); line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
#faq .lede{
max-width: 60ch;
margin: calc(var(--space-2) * -1 + var(--space-3)) auto var(--space-4);
color: var(--text);
text-align: center;
}
#faq .arrow-link{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
#faq .arrow-link::after{ content: " →"; }
#faq .arrow-link:hover{ color: var(--accent); }
/* List container */
#faq .faq-list{
list-style: none; /* new */
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
}
/* Pill card with ONLY gold bottom border */
#faq .faq-item{
background: rgba(255,255,255,0.06);
-webkit-backdrop-filter: saturate(140%) blur(8px);
backdrop-filter: saturate(140%) blur(8px);
border-radius: 20px; /* pill */
border: 0;
border-bottom: 1px solid var(--accent);/* gold baseline */
padding: .25rem; /* lets the pill curve breathe */
}
/* Question button */
#faq .faq-q{
appearance: none;
width: 100%;
text-align: left;
background: transparent;
color: var(--text);
border: 0;
cursor: pointer;
padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
font: inherit;
font-weight: 700;
letter-spacing: .02em;
display: grid;
grid-template-columns: 1fr auto; /* text | chevron */
align-items: center;
gap: var(--space-3);
border-radius: 20px;
}
#faq .faq-q:focus-visible{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
/* Chevron */
#faq .faq-q::after{
content: "▾";
font-size: 1.1em;
line-height: 1;
transition: transform .25s ease;
}
#faq .faq-item.is-open .faq-q::after{ transform: rotate(-180deg); }
/* Smooth animation — outer height only */
#faq .faq-a{
overflow: hidden;
max-height: 0;
transition: max-height .35s ease;
}
/* Inner wrapper handles fade/slide only (no height math) */
#faq .faq-inner{
padding: .25rem var(--space-4) var(--space-3);
opacity: 0;
transform: translateY(-4px);
transition: opacity .25s ease, transform .25s ease;
}
#faq .faq-item.is-open .faq-inner{
opacity: 1;
transform: translateY(0);
}
#faq .faq-inner p{ margin: 0; color: var(--muted); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#faq .faq-a, #faq .faq-inner{ transition: none; }
}
/* Phone: left-align the FAQ lede and remove centered margins */
@media (max-width: 40rem){
#faq .lede{
text-align: left;
margin-inline: 0; /* instead of auto centering */
}
}
/* rotate chevron when open */
#faq .faq-q[aria-expanded="true"]::after {
transform: rotate(-180deg);
}
/* reveal the inner content when the button is expanded */
#faq .faq-q[aria-expanded="true"] + .faq-a .faq-inner {
opacity: 1;
transform: translateY(0);
}
/* Phone: left-align the training intro and drop centered margins */
@media (max-width: 40rem){
#training-options .training-intro{
text-align: left;
margin-inline: 0; /* overrides the auto centering */
}
}
/* Process/steps headings styled like #meaning cards */
#training-options .tier-head h3{
font-size: clamp(0.9rem, 1vw, 1rem); /* match .grid-cards h3 */
line-height: 1.2;
margin: 0 0 0.35em;
text-transform: none;
font-weight: 700;
letter-spacing: 0.02em; /* a touch of tracking like meaning */
}
/* Number spacing like .grid-cards h3 .card-num, but using .accent */
#training-options .tier-head h3 .accent{
margin-right: 0.5rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
/* Use either gap OR margin, not both */
#training-options .tier-card { gap: var(--space-1); } /* keep */
#training-options .tier-head { margin-bottom: 0; } /* remove double spacing */
#training-options .price-line small{
font-size: inherit; /* stop browser shrinking */
line-height: inherit;
font-weight: 400; /* optional: or keep your 600 */
}
@media (min-width:56rem){
#choose-level .tiers-grid{ grid-template-columns: repeat(2,1fr) !important; }
}
/* Center the "Plus everything..." line in the Choose Level section */
#choose-level .tier-note{
text-align: center;
}
/* === Choose Level: match Training Options header styles === */
#choose-level .training-head{
text-align: center;
margin-inline: auto;
}
#choose-level .training-head h2{ margin-bottom: 0; }
#choose-level .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: var(--space-3);
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
#choose-level .training-intro{
color: var(--text);
margin: 0 auto var(--space-5);
text-align: center;
}
/* Make card headings + price small text match the other section */
#choose-level .tier-head h3{
font-size: clamp(0.9rem, 1vw, 1rem);
line-height: 1.2;
margin: 0 0 0.35em;
text-transform: none;
font-weight: 700;
letter-spacing: 0.02em;
}
#choose-level .price-line small{
font-size: inherit;
line-height: inherit;
font-weight: 400;
}
/* Keep the two-up grid on desktop */
@media (min-width:56rem){
#choose-level .tiers-grid{ grid-template-columns: repeat(2,1fr); }
}
/* Already asked: center the “Plus everything…” line */
#choose-level .tier-note{ text-align: center; }
@media (max-width: 40rem){
#choose-level .training-intro{
text-align: left;
margin-inline: 0; /* remove centering on mobile */
}
}
/* WHO cards — gold overlay + flip-to-black hover */
#who-for .who-card{
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--accent);
transition: color .25s ease, border-color .25s ease;
cursor: default; /* set to pointer if the whole card is clickable */
}
/* Accent wash overlay (hidden by default) */
#who-for .who-card::after{
content: "";
position: absolute;
inset: 0;
background: var(--accent);
opacity: 0;
z-index: 0; /* sits under content */
transition: opacity .25s ease;
}
/* Keep content above overlay */
#who-for .who-card > *{
position: relative;
z-index: 1;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#who-for .who-card,
#who-for .who-card::after{
transition: none;
}
}
/* Base: ensure bg image behaves nicely */
#who-for .who-card{
background-size: cover;
background-position: center;
}
/* Dark overlay under the content */
#who-for .who-card::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.62));
z-index: 0; /* sits at the very bottom */
transition: opacity .25s ease; /* smooth if you ever tweak it */
}
/* Keep your gold hover overlay above the dark base */
#who-for .who-card::after{
z-index: 1; /* gold wash */
}
/* Lift all content above both overlays */
#who-for .who-card > *{
position: relative;
z-index: 2;
}
/* Base: make the whole line normal text color */
.price-line{
margin: var(--space-2) 0 0;
font-weight: 700;
color: var(--text); /* was var(--accent) */
}
/* Only these stay gold */
.price-line .accent,
.price-line .price,
.price-line .currency{
color: var(--accent);
}
/* Keep the small note muted */
.price-line small{
color: var(--muted);
font-weight: 400;
}
/* ================================
CHOOSE LEVEL + TRAINING OPTIONS
(cleaned, same behavior)
================================ */
/* Card layout: allow bottom pinning */
#choose-level .tier-card,
#training-options .tier-card{
display: flex;
flex-direction: column;
gap: var(--space-2); /* tidy internal rhythm */
}
/* --- TRAINING OPTIONS: tighter head/list spacing --- */
#training-options .tier-head{
min-height: auto;
margin-bottom: 0;
}
#training-options .feature-list{ margin-top: var(--space-1); }
/* --- CHOOSE LEVEL: put heading just above the list --- */
#choose-level .tier-head{
margin-top: auto; /* push heading down */
margin-bottom: var(--space-2); /* small gap above list */
min-height: 0;
}
#choose-level .tier-features{ margin-top: 0; }
/* --- Price line: bottom-ish, centered, big --- */
#choose-level .price-line,
#training-options .price-line{
margin-top: auto; /* sits low in the card */
margin-bottom: var(--space-3); /* gap above CTA (home-card rhythm) */
text-align: center;
font-weight: 700;
color: var(--text); /* base text color; money is gold below */
}
#choose-level .price-line .currency,
#choose-level .price-line .price,
#training-options .price-line .currency,
#training-options .price-line .price{
color: var(--accent); /* gold £ + amount */
font-weight: 700;
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
line-height: 1;
}
#choose-level .price-line small,
#training-options .price-line small{
color: var(--muted);
font-weight: 400;
}
/* CTA row: don’t re-pin itself */
#choose-level .tier-actions,
#training-options .tier-actions{
margin-top: 0;
padding-top: 0;
}
/* Helper: let inner spans follow parent color unless restyled */
#choose-level .price-line *,
#training-options .price-line *{
color: inherit;
}
/* (optional) smooth color change */
#who-for .who-title .accent{ transition: color .2s ease; }
/* --- LAUNCH PAD: fix stats colors + spacing in HOW IT WORKS --- */
/* tighten & normalize the spacing */
#training-options .stats{
--stats-gap: 2.75rem; /* control the horizontal spacing */
gap: var(--stats-gap);
margin-bottom: var(--space-4);
}
#training-options .stat{
padding: 0; /* remove extra padding that widened gaps */
position: relative;
text-align: center;
}
/* center the vertical divider inside the gap */
#training-options .stat + .stat::before{
left: calc(var(--stats-gap) / -2); /* midpoint between items */
height: 1.25rem; /* a bit shorter looks cleaner */
}
/* make numbers gold again (override the earlier 'inherit' rule) */
#training-options .stat .stat-num{
color: var(--accent) !important;
font-weight: 700;
letter-spacing: .02em;
}
/* labels stay muted */
#training-options .stat .stat-label{
color: var(--muted);
margin-top: .15rem;
}
/* Launch Pad page — left-align the section intro paragraph */
.page-app .training-head .training-intro{
text-align: left;
margin-inline: 0; /* cancel any auto-centering */
}
/* === Alias: make #lp-problems look exactly like #training-options === */
:is(#training-options, #lp-problems) { padding-top: var(--space-8); }
:is(#training-options, #lp-problems) .training-head{
text-align:center; margin-inline:auto;
}
:is(#training-options, #lp-problems) .training-head h2{ margin-bottom:0; margin-bottom:var(--space-2);}
:is(#training-options, #lp-problems) .training-head .subhead{
font-weight:700; color:var(--text); text-transform:none; letter-spacing:.01em;
margin-top:-.25rem; margin-bottom:var(--space-3); line-height:1.15;
}
:is(#training-options, #lp-problems) .training-intro{
color: var(--text);
margin: 0 auto var(--space-5);
}
:is(#training-options, #lp-problems) .tiers-grid{
display:grid; gap: var(--space-5); grid-template-columns:1fr;
}
@media (min-width:56rem){
:is(#training-options, #lp-problems) .tiers-grid{
grid-template-columns:repeat(3,1fr); align-items:stretch;
}
}
:is(#training-options, #lp-problems) .tier-card{
display:flex; flex-direction:column; gap: var(--space-3);
padding: var(--space-5); min-height:100%;
}
:is(#training-options, #lp-problems) .tier-head{
display:grid; align-content:start; gap:.35rem;
margin-bottom: var(--space-3); min-height: 6.25rem;
}
:is(#training-options, #lp-problems) .tier-head h3{
font-size: clamp(1rem,1.2vw,1.25rem); font-weight:700; margin:0; text-transform:none;
}
:is(#training-options, #lp-problems) .feature-list{
list-style:none; margin: var(--space-2) 0 0; padding:0;
display:grid; gap: var(--space-2);
}
:is(#training-options, #lp-problems) .feature-list li{
display:grid; grid-template-columns:1.25rem 1fr; align-items:start; gap:.6rem;
}
:is(#training-options, #lp-problems) .feature-list .icon{
width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:999px;
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
:is(#training-options, #lp-problems) .tier-actions{
margin-top:auto; display:flex; justify-content:center; gap: var(--space-3); text-align:center;
}
/* If you use the stats row above either section: share its tweaks */
:is(#training-options, #lp-problems) .stats{
--stats-gap: 2.75rem; gap: var(--stats-gap);
display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
margin-bottom: var(--space-4);
}
:is(#training-options, #lp-problems) .stat{ position:relative; text-align:center; padding:0; }
:is(#training-options, #lp-problems) .stat + .stat::before{
content:""; position:absolute; left: calc(var(--stats-gap)/-2); top:50%;
transform: translateY(-50%); width:1px; height:1.25rem;
background: linear-gradient(to bottom, rgba(255,193,7,0), rgba(255,193,7,.75), rgba(255,193,7,0));
}
:is(#training-options, #lp-problems) .stat .stat-num{ color: var(--accent); font-weight:700; letter-spacing:.02em; }
:is(#training-options, #lp-problems) .stat .stat-label{ color: var(--muted); margin-top:.15rem; }
@media (max-width: 40rem){
:is(#training-options, #lp-problems) .stats{ gap: var(--space-3); }
:is(#training-options, #lp-problems) .stat + .stat::before{ display:none; }
}
/* Center training-intro on desktop across key sections/pages */
@media (min-width: 56rem){
:is(#how-it-works, #training-options, #lp-problems, #what-you-get, #choose-level) .training-intro{
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
/* Launch Pad – Problems intro: always left-aligned */
.page-app #lp-problems .training-intro{
text-align: left;
margin-inline: 0; /* cancel auto-centering */
max-width: none; /* ignore any 60ch cap if applied elsewhere */
}
/* ===================== CONTACT (no hero) ===================== */
#contact { padding-top: var(--space-8); }
/* Headings */
#contact .contact-head{
text-align: center;
margin-bottom: var(--space-4);
}
#contact .contact-head h1{
font-size: var(--h2); /* modest hierarchy for a utility page */
text-transform: uppercase;
color: var(--text);
}
#contact .contact-head .accent { color: var(--accent); }
#contact .contact-head .subhead{
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
margin-top: -.25rem;
margin-bottom: 0;
line-height: 1.15;
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
/* ===== Layout: stacked → split on desktop ===== */
.contact-layout{
display: grid;
grid-template-columns: 1fr; /* mobile */
gap: var(--space-6);
padding-top: 1rem;
}
@media (min-width: 56rem){
.contact-layout{
grid-template-columns: 0.8fr 1.2fr; /* text | form */
gap: var(--space-7);
}
}
/* Left column copy */
#contact .contact-copy p{ margin: 0 0 var(--space-4); }
/* Contact list (SVG bullets) */
.contact-list{
list-style: none;
margin: 0 0 var(--space-2); /* tightened gap below list */
padding: 0;
display: grid;
gap: var(--space-2);
}
.contact-list li{
display: grid;
grid-template-columns: 1.25rem 1fr;
align-items: start;
gap: .6rem;
}
.contact-list .icon{
display: inline-grid;
place-items: center;
width: 1.1rem; height: 1.1rem;
margin-top: .15rem;
border-radius: 999px;
color: var(--true-black);
background:
radial-gradient(circle at 50% 50%, rgba(255,193,7,.55), rgba(255,193,7,.25) 60%, rgba(255,193,7,0) 62%),
conic-gradient(from 270deg, var(--accent) 0 25%, rgba(255,193,7,.9) 25% 100%);
mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 67%);
}
.contact-list a{
text-decoration: underline;
text-underline-offset: 2px;
}
/* ===== Forms: inherit site font + rounded-square textarea ===== */
input, select, textarea, button {
font: inherit;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.input, .select, .textarea {
font-size: var(--p);
line-height: 1.45;
}
.form-card .textarea{
border-radius: var(--radius); /* not a pill */
min-height: 8rem;
resize: vertical;
}
/* optional: flatter single-line inputs */
.form-card .input:not(textarea){ border-radius: 2rem; }
/* ===== Layout variant with Instagram embed (order changes by breakpoint) ===== */
.contact-layout--with-ig{
display: grid;
grid-template-columns: 1fr; /* mobile */
gap: var(--space-6);
padding-top: 1rem;
grid-template-areas:
"copy"
"form"
"ig"; /* mobile: IG below form */
}
.contact-layout--with-ig .contact-copy { grid-area: copy; }
.contact-layout--with-ig form { grid-area: form; }
.contact-layout--with-ig .ig-embed { grid-area: ig; }
@media (min-width: 56rem){
.contact-layout--with-ig{
grid-template-columns: 1fr 1fr; /* text | form */
gap: var(--space-6); /* tight desktop gap as requested */
grid-template-areas:
"copy form"
"ig form"; /* desktop: IG under left column */
align-items: start;
}
}
/* Instagram embed */
.ig-embed{ display: block; }
#contact .ig-embed .perks-title{
margin-top: .25rem; /* pulled closer to the list */
margin-bottom: var(--space-2);
}
.instagram-media{
border: 1px solid rgba(255,193,7,.35);
border-radius: var(--radius);
-webkit-backdrop-filter: saturate(120%) blur(6px);
backdrop-filter: saturate(120%) blur(6px);
}
/* Center IG on mobile (when it sits below the form) */
.contact-layout--with-ig .ig-embed{
display: flex;
flex-direction: column;
align-items: center; /* centers horizontally */
text-align: center;
}
.contact-layout--with-ig .ig-embed .instagram-media{
margin: 0 auto !important; /* override IG inline margin */
max-width: 540px; /* IG default max width */
width: 100%;
}
/* Desktop: left-align IG under the left column */
@media (min-width: 56rem){
.contact-layout--with-ig .ig-embed{
align-items: flex-start;
text-align: left;
}
}
/* Desktop: visually shrink IG embed to ~240px */
@media (min-width: 56rem){
.contact-layout .instagram-media{
width: 326px; /* IG's intrinsic min */
transform: scale(0.83); /* 240 / 326 ≈ 0.74 */
transform-origin: top left;
margin: 0 !important;
}
}
/* =========================================================
Booking Modal + Form Enhancements (MIRUS)
Paste at end of main.css
========================================================= */
/* --- Base: hide [hidden] elements robustly --- */
[hidden] { display: none !important; }
/* --- Modal overlay + container --- */
.modal-overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(3px);
z-index: 10000010; /* above site header (9999999) */
opacity: 0;
transition: opacity .2s ease;
pointer-events: none; /* off until opened */
visibility: hidden;
}
.modal{
position: fixed; inset: 0;
display: grid; place-items: center;
z-index: 10000020;
opacity: 0; transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none; /* off until opened */
visibility: hidden;
}
/* Open state */
.modal[data-open="true"],
.modal-overlay[data-open="true"]{
opacity: 1; transform: none;
pointer-events: auto;
visibility: visible;
}
/* Lock page scroll only while open */
html.no-scroll, body.no-scroll { overflow: hidden; }
/* Card layout */
.modal-card{
width: min(720px, 92vw);
max-height: 90vh;
overflow: auto;
border-radius: var(--radius);
}
@media (max-width: 40rem){
.modal{ align-items: end; }
.modal-card{
width: 100vw; max-height: 96vh;
border-radius: 16px 16px 0 0;
}
}
/* Close button */
.modal-close{
position: absolute; top: .75rem; right: .9rem;
appearance: none; border: 0; background: transparent; color: var(--text);
font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.modal-close:focus-visible{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
/* Success state alignment */
.success-state .form-title,
.success-state .form-sub { text-align: center; }
/* --- Notes field: rounded rectangle (not pill) --- */
#c-notes.input,
textarea#c-notes {
border-radius: var(--radius) !important; /* 12px token */
}
textarea#c-notes {
min-height: 7.5rem; /* ~5 lines */
resize: vertical;
}
/* Custom arrow (gold) — single-line, safe data-URI */
select.input{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,193,7,0.75);
color: var(--text);
border-radius: var(--btn-radius);
padding-right: 2.25rem;
line-height: 1.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23FFC107' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .8rem center;
background-size: 1rem;
}
select.input:focus{
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
/* Ensure readable option text in OS popup lists */
select.input option,
select.input optgroup{
color: #111 !important; /* retype to avoid hidden chars */
background: #fff; /* retype to avoid hidden chars */
}
/* Ensure readable option text in OS popup lists */
select.input option,
select.input optgroup{
color: #111 !important; /* dark text on white menu */
background: #fff; /* improves Firefox/Android */
}
/* iOS Safari tap comfort */
@supports (-webkit-touch-callout: none) {
select.input { padding-block: .9rem; }
}
/* --- Scrollbar styling (global) --- */
/* Firefox */
*{
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(255,255,255,0.08);
}
/* WebKit (Chrome/Edge/Safari) */
*::-webkit-scrollbar{
width: 10px; height: 10px;
}
*::-webkit-scrollbar-track{
background: rgba(255,255,255,0.08);
border-radius: 8px;
}
*::-webkit-scrollbar-thumb{
background: linear-gradient(to bottom, rgba(255,193,7,0.95), rgba(255,193,7,0.75));
border: 2px solid rgba(0,0,0,0.35);
border-radius: 999px;
box-shadow: 0 0 10px rgba(255,193,7,.25);
}
*::-webkit-scrollbar-thumb:hover{
background: linear-gradient(to bottom, rgba(255,193,7,1), rgba(255,193,7,0.85));
}
/* Slimmer inside compact areas */
textarea, .modal-card, #nav-panel { scrollbar-width: thin; }
textarea::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
#nav-panel::-webkit-scrollbar{
width: 8px; height: 8px;
}
/* Optional: hide until hover on desktop (clean look) */
@media (hover:hover){
*::-webkit-scrollbar-thumb{
background: transparent; border-color: transparent; box-shadow: none;
}
*:hover::-webkit-scrollbar-thumb{
background: linear-gradient(to bottom, rgba(255,193,7,0.95), rgba(255,193,7,0.75));
border-color: rgba(0,0,0,0.35);
box-shadow: 0 0 10px rgba(255,193,7,.25);
}
}
/* ===== Mobile modal fix: full-height sheet, no bounce, safe-area padding ===== */
@media (max-width: 40rem){
/* Make the sheet fill the viewport and manage its OWN scrolling */
.modal{
align-items: stretch; /* stretch to full width */
justify-content: end; /* anchor to bottom */
}
.modal-card{
height: 100svh; /* stable mobile viewport unit */
max-height: none; /* avoid clipping */
width: 100vw;
border-radius: 16px 16px 0 0;
overflow: auto; /* scroll inside the sheet */
-webkit-overflow-scrolling: touch; /* smooth iOS momentum */
overscroll-behavior: contain; /* prevent background rubber-band */
padding-top: calc(env(safe-area-inset-top) + var(--space-4));
padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
}
/* Keep the close button inside the safe area */
.modal-close{
top: calc(env(safe-area-inset-top) + .75rem);
right: calc(env(safe-area-inset-right) + .9rem);
}
}
/* When modal is open, stop page bounce entirely */
html.no-scroll, body.no-scroll{
overflow: hidden;
overscroll-behavior: none; /* block rubber-band on body */
}
/* =========================================================
Legal narrative (Privacy page)
========================================================= */
.page-privacy { background: var(--base); color: var(--text); }
.legal-narrative {
max-width: 62rem;
margin: 0 auto;
}
/* Hero */
.legal-hero {
text-align: center;
margin-bottom: var(--space-5);
}
/* Date line: same centered column as prose, but left-aligned */
.legal-hero .meta {
color: var(--muted);
margin-top: var(--space-2);
max-width: 78ch;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Sections */
.legal-narrative section {
display: grid;
gap: .6rem;
margin-bottom: var(--space-4);
justify-items: center; /* keep heading + paragraphs in same centered column */
}
/* Headings */
.legal-narrative h2 {
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
margin-bottom: .25rem;
text-transform: uppercase;
letter-spacing: .06em;
max-width: 78ch;
}
/* Prose */
.legal-narrative p {
color: var(--text);
max-width: 78ch; /* comfy reading width */
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
/* Page title (use h2 sizing, uppercase, white) */
.page-privacy .legal-hero h1 {
font-size: var(--h2);
text-transform: uppercase;
color: var(--text);
letter-spacing: .06em;
margin-bottom: .35em;
}
/* CTA row */
.legal-narrative .cta-row {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-6); /* extra breathing room on this page */
max-width: none;
}
/* Terms page uses the same legal layout */
.page-terms { background: var(--base); color: var(--text); }
/* Make the Terms H1 match the toned-down legal hero style */
.page-terms .legal-hero h1{
font-size: var(--h2);
text-transform: uppercase;
color: var(--text);
letter-spacing: .06em;
margin-bottom: .35em;
}
/* Give the Terms CTA the same extra breathing room */
.page-terms .legal-narrative .cta-row{
margin-top: var(--space-6);
}
/* FINAL: normalize “heading → list” spacing across both pages */
.page-app #training-options .tier-card { gap: var(--space-5); }
.page-app #training-options .tier-head { margin-bottom: 0; min-height: auto; }
.page-app #training-options .feature-list { margin-top: var(--space-3); }
/* Make #lp-problems cards match the tighter Choose Level rhythm */
.page-app #lp-problems .tier-card { gap: var(--space-3); } /* internal rhythm */
.page-app #lp-problems .tier-head {
min-height: 0; /* cancel 6.25rem */
margin-bottom: var(--space-3); /* small head→list gap */
}
.page-app #lp-problems .feature-list { margin-top: 0; } /* no extra top margin */
@media (min-width: 56rem) {
.page-app #lp-problems .tier-head {
min-height: 5.5rem; /* only on large screens */
}
}
/* ===== Blog Post (page-scoped, separate from main.css) =====
Uses tokens from main.css: --ink, --text, --muted, --accent, --radius
*/
/* Card shell */
.post-page-card{
background: var(--ink);
color: var(--text);
border-radius: var(--radius);
border: 1px solid #1b1b1b; /* subtle rim */
border-bottom: 1px solid var(--accent); /* gold baseline */
overflow: hidden; /* rounds media corners */
}
/* Top media — short, responsive banner */
.post-page-card .post-page-media{
position: relative;
height: clamp(8rem, 28vw, 10rem); /* adjust to taste */
overflow: hidden;
background: #000;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.post-page-card .post-page-media > img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
border-radius: 0 !important; /* override any global img rounding */
}
/* Body spacing */
.post-page-body{
padding: clamp(1rem, 2.5vw, 1.75rem);
}
/* Date */
.post-date{
display: inline-block;
color: var(--muted);
margin-bottom: .5rem;
font-size: .95em;
}
/* Title — match teaser look, no hover color change */
.post-title{
margin: 0 0 .6rem;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
font-size: clamp(1.15rem, 1.8vw, 1.6rem);
line-height: 1.25;
}
.post-title a{
color: var(--text);
text-decoration: none;
}
.post-title a:hover,
.post-title a:focus{
color: var(--text); /* keep white */
text-decoration: underline; /* subtle affordance */
text-underline-offset: 3px;
}
/* Content */
.post-page-body h4{
margin: 1.25rem 0 .4rem;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.post-page-body p{
margin: 0 0 1rem;
}
/* Bottom actions */
.post-page-actions{
margin-top: clamp(1rem, 2vw, 1.5rem);
display: flex;
justify-content: center;
}
/* Add top padding to the centered shell */
.post-page-card{
max-width: clamp(40rem, 92vw, 60rem);
margin-inline: auto;
margin-top: var(--space-6);
}
/* ===== BLOG (page-scoped) ===== */
/* Header: match contact-style head, but H1 uses --h2 size */
body.page-blog .blog-head { text-align: center; }
body.page-blog .blog-head h1 { font-size: var(--h2); text-transform: uppercase; }
/* Subhead rhythm (same feel as contact) */
body.page-blog .blog-head .subhead {
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: .01em;
line-height: 1.15;
margin-top: -.25rem;
margin-bottom: var(--space-3);
font-size: clamp(1rem, 1.5vw, 1.25rem);
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
/* Header spacing + main blog section spacing */
body.page-blog #blog-head { padding-top: var(--space-8) !important; padding-bottom: 0 !important} /* extra top padding only */
body.page-blog #blog { padding-block: var(--space-2) !important; } /* tighter cards section */
/* Filter pills */
body.page-blog .pill-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-3) auto var(--space-4);
}
body.page-blog .pill {
color: var(--text); /* inactive = white text */
border-radius: 9999px;
padding: .55rem .9rem;
border: 1px solid var(--accent);
background: rgba(255,255,255,0.06);
-webkit-backdrop-filter: saturate(140%) blur(6px);
backdrop-filter: saturate(140%) blur(6px);
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
}
body.page-blog .pill[aria-pressed="true"] {
background: var(--accent);
color: #111; /* active = dark text */
border-color: var(--true-black);
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
body.page-blog .pill:focus-visible {
outline: none;
box-shadow: var(--gold-glow-ring), var(--gold-glow-outer);
}
#choose-level h3.subhead{padding-top:var(--space-3);}
/* ==== Card hover = border-only (works with supports-hover + tap-hover) ==== */
:root { --card-rest-border: #1b1b1b; } /* neutral edge */
/* 1) Baseline: ensure all cards have a normal 1px border on all sides */
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card, .form-card){
border: 1px solid var(--card-rest-border);
border-radius: var(--radius);
}
/* 2) Hover / focus / tap: switch whole border to accent (only change) */
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card).tap-hover,
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card):focus-visible,
.supports-hover :where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card):hover{
border-color: var(--accent);
}
/* 3) Neutralize any other hover visuals (no color flip, no wash, no lift) */
.supports-hover :where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card):hover::after,
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card).tap-hover::after{
opacity: 0 !important; /* suppress accent wash overlays */
}
.supports-hover :where(.card-bg, .card-visual):hover,
:where(.card-bg, .card-visual).tap-hover{
transform: none !important; /* no lift */
color: inherit !important; /* keep text color */
}
/* If any cards previously had bottom-only borders, this keeps layout tidy */
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card){
border-bottom-color: var(--card-rest-border);
}
/* === "Is this right for you?" cards: bottom-accent by default, full-accent on hover/tap === */
#who-for .who-card{
border: 0 !important; /* remove any inherited edges */
border: 1px solid var(--card-rest-border) !important;
border-bottom: 1px solid var(--accent) !important; /* always-on accent baseline */
border-radius: var(--radius);
background-clip: padding-box;
}
/* Hover (mouse), Tap (JS adds .tap-hover), and keyboard focus -> full accent border */
.supports-hover #who-for .who-card:hover,
#who-for .who-card.tap-hover,
#who-for .who-card:focus-visible{
border: 1px solid var(--accent) !important; /* full frame in accent */
box-shadow: none !important;
transform: none !important;
outline: none;
}
/* Optional: suppress any overlay/lift effects */
.supports-hover #who-for .who-card:hover::after,
#who-for .who-card.tap-hover::after{
opacity: 0 !important;
}
/* Treat persistent tap like hover */
:where(.card-bg, .card-visual, #blog .post-card, #testimonials .testi-card, .form-card, .who-card).tap-active{
border-color: var(--accent);
}
/* "Is this right for you?" — include .tap-active for the full frame */
.supports-hover #who-for .who-card:hover,
#who-for .who-card.tap-hover,
#who-for .who-card.tap-active,
#who-for .who-card:focus-visible{
border: 1px solid var(--accent) !important;
}
#choose-level .price-line{ margin-top: var(--space-5) !important; }
/* --- iOS Safari toolbar collapse fix (append at end of main.css) --- */
/* ===========================
Viewport + Hero Stability Overrides
Goal: allow bottom/top toolbars to collapse while keeping the hero fixed-height
=========================== */
/* 1) Re-enable natural document scrolling (avoid root height/overflow locks) */
html,
body {
height: auto !important; /* undo height:100%/100vh on root */
min-height: 100% !important; /* allow natural page height */
overflow-y: auto !important; /* undo overflow:hidden on root */
overflow-x: hidden; /* keep horizontal overflow tidy */
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
overscroll-behavior-y: auto; /* normal scroll behavior */
}
/* 2) Ensure the page always has a little scroll room (helps toolbar collapse) */
@supports (height: 100svh) {
body { min-height: 100svh !important; }
}
/* 3) Neutralize any hard-coded inline 100vh on */
body[style*="100vh"] {
height: auto !important;
min-height: 100svh !important;
}
/* 4) Tiny spacer so there's always ≥1px of scroll to kickstart toolbar collapse */
body::after {
content: "";
display: block;
height: 1px;
}
/* 5) If a “page lock” class is applied elsewhere, unblock scrolling */
html.is-fixed,
body.is-fixed {
position: static !important;
overflow: auto !important;
}
/* ===========================
HERO: fixed height that ignores toolbar animations
=========================== */
/* Lock hero height to the initial visual viewport set via JS: --hero-h (in px).
Fallback to 100lvh if the var isn't present / JS fails. */
#hero {
position: relative !important;
overflow: hidden !important;
min-height: calc(var(--hero-h, 100lvh) * 1px) !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* Fallbacks when lvh not supported (older browsers) */
#hero {
min-height: 100vh !important; /* will be overridden by calc() above when var exists */
}
@supports (height: 100lvh) {
#hero { min-height: calc(var(--hero-h, 100lvh) * 1px) !important; }
}
/* Ensure inner media fill the hero without altering its height */
#hero img,
#hero video,
#hero .media,
#hero .hero-media {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Neutralize dynamic VH on hero descendants (e.g., inline styles) */
#hero [style*="100dvh"],
#hero [style*="100vh"] {
height: 100% !important;
min-height: 0 !important;
}
/* Header base */
.site-header {
width: 100%;
z-index: 9999;
}
/* Fixed mode */
.site-header.is-fixed {
position: fixed;
top: calc(env(safe-area-inset-top, 0px));
left: 0;
right: 0;
}
/* When fixed, push the page down by exactly the header height */
body.fixed-header-active {
padding-top: var(--header-offset, 0px);
}
/* Make sure the hero/content do NOT add their own top gaps */
#hero,
main,
.site-main {
margin-top: 0 !important;
}
/* Optional: ensure in-page anchor jumps account for the fixed header */
:target {
scroll-margin-top: var(--header-offset, 0px);
}
/* Exact 2-up sizing that accounts for the gap */
@media (min-width: 56rem){
#blog .post-card,
#testimonials .testi-card{
/* two cards + one gap = 100% */
flex: 0 0 calc((100% - var(--space-4)) / 2);
}
}
/* Prevent intrinsic min-content from forcing tiny overflows */
#blog .post-card,
#testimonials .testi-card{
min-width: 0;
}
/* Give the testimonials track the same end buffer the blog has */
#testimonials .testi-track::after{
content: "";
flex: 0 0 var(--space-4); /* matches .container side padding */
}
/* MIRUS Reveal: fade + slide up (namespaced) */
[data-mirus-reveal]{
opacity: 0;
transform: translateY(var(--reveal-y, 100px));
transition:
opacity var(--reveal-dur, 1s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1)),
transform var(--reveal-dur, 1s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1));
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
[data-mirus-reveal].is-visible{ opacity:1; transform:none; }
/* (If you also use staggered groups with the new name) */
[data-mirus-stagger] > *{
opacity: 0;
transform: translateY(var(--reveal-y, 100px));
transition:
opacity var(--reveal-dur, 1s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1)),
transform var(--reveal-dur, 1s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1));
transition-delay: calc(var(--reveal-delay, 0ms) + (var(--reveal-stagger, 70ms) * var(--i, 0)));
}
[data-mirus-stagger].is-visible > *{ opacity:1; transform:none; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
[data-mirus-reveal],
[data-mirus-stagger] > *{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}