/* =========================================================================
Jurando — public marketing site
Light theme. Brand: indigo #5D62F9 + acid lime #CBF70D.
Hand-written CSS, no framework. Tokens at top, components below.
========================================================================= */
:root {
/* Surfaces */
--bg-0: #ffffff;
--bg-1: #f7f7f7;
--bg-2: #ececec;
--bg-dark: #0d0e1a;
--bg-dark-2: #15172a;
/* Text */
--text: #191919;
--text-mute: rgba(25, 25, 25, 0.66);
--text-faint: rgba(25, 25, 25, 0.46);
--text-on-dark: #ffffff;
--text-on-dark-mute: rgba(255, 255, 255, 0.72);
/* Brand */
--indigo: #5d62f9; /* primary accent */
--indigo-2: #4348ed; /* hover */
--indigo-deep: #080fdc; /* deepest brand */
--indigo-soft: #eef0ff; /* tinted surface */
--lime: #ddfa61; /* secondary accent */
--lime-2: #cbf70d; /* bolder lime */
--lime-deep: #89a805;
/* Lines */
--line: rgba(0, 0, 0, 0.08);
--line-strong: rgba(0, 0, 0, 0.15);
--line-on-dark: rgba(255, 255, 255, 0.10);
/* Layout */
--container: 1240px;
--gutter: clamp(1rem, 4vw, 2rem);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.04);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
--shadow-lg: 0 18px 40px -8px rgba(13, 14, 26, .15), 0 4px 12px rgba(0,0,0,.05);
--shadow-card-hover: 0 22px 48px -12px rgba(93, 98, 249, .25), 0 6px 14px rgba(0,0,0,.06);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
--tr-fast: 150ms cubic-bezier(.4, 0, .2, 1);
--tr-base: 240ms cubic-bezier(.4, 0, .2, 1);
--tr-slow: 420ms cubic-bezier(.16, 1, .3, 1);
}
/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
background: var(--bg-0);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.skip-link {
position: absolute; left: -9999px; top: 1rem;
background: var(--text); color: var(--bg-0);
padding: .5rem .8rem; border-radius: var(--radius-sm);
font-weight: var(--weight-bold);
}
.skip-link:focus { left: 1rem; z-index: 200; }
/* --- Layout primitives --------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
}
/* --- Typography helpers -------------------------------------------------- */
.eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .72rem;
font-weight: var(--weight-bold);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--indigo);
}
.eyebrow::before {
content: '';
display: inline-block;
width: 38px; height: 2px;
background: var(--indigo);
border-radius: 2px;
}
.section-header { margin-bottom: 3rem; max-width: 820px; }
.section-header .eyebrow { margin-bottom: .9rem; }
.section-header h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--weight-black);
letter-spacing: -.025em;
line-height: 1.05;
}
.section-header--row {
display: flex; flex-wrap: wrap; align-items: end;
justify-content: space-between; gap: 1.5rem;
max-width: none;
}
.section-header--row > a { white-space: nowrap; }
/* --- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9rem 1.55rem;
font-size: .92rem;
font-weight: var(--weight-bold);
letter-spacing: .005em;
border-radius: var(--radius-pill);
border: 1px solid transparent;
transition: transform var(--tr-fast), background var(--tr-base),
border-color var(--tr-base), color var(--tr-base),
box-shadow var(--tr-base);
will-change: transform;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .35rem 1rem; font-size: .8rem; }
.btn--primary {
background: var(--indigo); color: #fff;
box-shadow: 0 6px 14px rgba(93, 98, 249, .26);
}
.btn--primary:hover { background: var(--indigo-2); box-shadow: 0 10px 22px rgba(93, 98, 249, .34); }
.btn--ghost {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-1); border-color: var(--text); }
.btn--danger {
background: #dc2626;
color: #fff;
border-color: #dc2626;
box-shadow: none;
}
.btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn--danger:disabled {
opacity: .8;
cursor: not-allowed;
transform: none;
}
.btn--danger-ghost {
background: transparent;
color: #dc2626;
border-color: #dc2626;
}
.btn--danger-ghost:hover { background: #fee2e2; }
.btn--ok {
background: limegreen;
color: #fff;
border-color: limegreen;
box-shadow: 0 6px 14px hsla(120, 100%, 50%, .26);
}
.btn--ok:hover {
background: #28a428;
border-color: #28a428;
box-shadow: 0 6px 14px hsla(120, 100%, 50%, .34);
}
.btn--alt {
background: transparent;
color: var(--bg-1);
border-color: var(--indigo-soft);
}
.btn--alt:hover { background: var(--bg-1); border-color: var(--indigo-soft); color: var(--text)}
.btn--lime {
background: var(--lime-2); color: var(--text);
}
.btn--lime:hover { background: var(--lime); }
.btn--outline-on-dark, .btn--outline {
background: transparent; color: var(--text-on-dark);
border-color: rgba(255,255,255,.4);
}
.btn--outline-on-dark:hover, .btn--outline:hover {
background: var(--text-on-dark); color: var(--text);
border-color: var(--text-on-dark);
box-shadow: 0 10px 22px rgba(158, 158, 170, 0.34);
}
.btn--login {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
padding: .55rem 1.05rem;
font-size: .85rem;
}
.btn--login:hover { background: var(--text); color: #fff; border-color: var(--text); }
.link-arrow {
display: inline-flex; align-items: center; gap: .4rem;
font-weight: var(--weight-bold);
color: var(--text);
border-bottom: 1px solid var(--line-strong);
padding-bottom: .15rem;
transition: color var(--tr-base), border-color var(--tr-base), gap var(--tr-base);
}
.link-arrow:hover { color: var(--indigo); border-color: var(--indigo); gap: .65rem; }
.link-arrow--muted { color: var(--text-mute); }
.link-arrow--muted:hover { color: var(--indigo); border-color: var(--indigo); }
/* --- Site header --------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 72px;
gap: 1.5rem;
}
.brand {
height:45px;
filter: hue-rotate(15deg) saturate(2);
}
.site-nav { display: none; gap: 1.75rem; }
.site-nav a {
position: relative;
font-size: .88rem; font-weight: var(--weight-medium);
color: var(--text-mute);
transition: color var(--tr-base);
padding: .35rem 0;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.is-active { color: var(--text); }
.site-nav a.is-active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--indigo); border-radius: 2px;
}
.header-actions { display: inline-flex; align-items: center; gap: .85rem; }
.lang-switcher {
position: relative;
display: inline-flex; align-items: center;
justify-content: center; min-width: 2.1rem;
padding: .2rem 0;
z-index: 60;
}
.lang-switcher a {
position: absolute;
top: .2rem;
left: 0;
min-width: 100%;
text-align: center;
opacity: 0;
font-size: .72rem;
font-weight: var(--weight-semibold);
letter-spacing: .08em;
color: var(--text-mute);
padding: .25rem .2rem;
transform: translateY(-.35rem);
pointer-events: none;
transition: all 320ms cubic-bezier(.4, 0, .2, 1);
}
.lang-switcher a:nth-child(2) { top: calc(100% - .1rem); }
.lang-switcher a:nth-child(3) { top: calc(200% - .4rem); }
.lang-switcher:hover a,
.lang-switcher:focus-within a {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.lang-switcher a:hover { color: var(--text); }
.lang-switcher a.is-active {
color: var(--text);
position: relative;
top: auto;
left: auto;
min-width: 0;
opacity: 1;
transform: none;
pointer-events: auto;
}
.nav-toggle {
display: inline-flex; flex-direction: column;
justify-content: center; gap: 5px;
width: 38px; height: 38px;
padding: 0 9px;
border-radius: var(--radius-md);
border: 1px solid var(--line-strong);
}
.nav-toggle span {
display: block; height: 2px; background: var(--text);
border-radius: 2px; width: 18px;
transition: transform var(--tr-base), opacity var(--tr-base);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
display: flex; flex-direction: column;
gap: .25rem;
padding: 1rem var(--gutter) 1.5rem;
border-top: 1px solid var(--line);
background: var(--bg-0);
}
.mobile-nav a {
display: block;
padding: .85rem 0;
border-bottom: 1px solid var(--line);
font-weight: var(--weight-medium);
color: var(--text-mute);
transition: color var(--tr-base);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a:hover, .mobile-nav a.is-active { color: var(--text); }
.mobile-nav__cta {
margin-top: .75rem;
padding: .85rem 1rem !important;
background: var(--indigo);
color: #fff !important;
border-radius: var(--radius-pill);
text-align: center;
font-weight: var(--weight-bold);
border-bottom: 0 !important;
}
/* Responsive: Show desktop nav, hide mobile nav on wider screens */
@media (min-width: 980px) {
.site-nav { display: inline-flex; }
.nav-toggle { display: none; }
.mobile-nav { display: none !important; }
}
@media (max-width: 979px) {
.lang-switcher, .btn--login, .mp-userchip__name { display: none; }
.mp-userchip { padding: .3rem; }
.site-header__inner { padding-inline: 0.5rem; display: grid;grid-template-columns: 1fr 3fr 1fr; }
.mobile-nav { padding: 1rem 2.5rem 1.5rem; }
.mobile-nav[hidden] { display: none !important; }
.mobile-nav a:not(.mobile-nav__cta) { font-size: 3rem; line-height: 2.5rem; font-weight:900;}
.nav-toggle { margin: 0 0px 0 auto; }
.brand { grid-column: 2/3; margin: auto; }
}
/* --- Payment method modal ----------------------------------------------- */
.pay-modal[hidden] { display: none !important; }
.pay-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 1rem;
}
.pay-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 18, 32, .58);
}
.pay-modal__panel {
position: relative;
width: min(720px, 100%);
max-height: min(760px, calc(100vh - 2rem));
overflow: auto;
background: var(--bg-0);
border: 1px solid rgba(17, 24, 39, .12);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 1.5rem;
}
.pay-modal__close {
position: absolute;
top: .85rem;
right: .85rem;
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(17, 24, 39, .14);
background: #fff;
color: var(--text);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.pay-modal__title {
margin: 0;
font-size: 1.55rem;
line-height: 1.2;
}
.pay-modal__sub {
margin: .4rem 2.5rem 1rem 0;
color: var(--text-mute);
}
.pay-inline__section + .pay-inline__section,
.pay-modal__section + .pay-modal__section { margin-top: 1.25rem; }
.pay-inline__section h3,
.pay-modal__section h3 {
margin: 0 0 .65rem;
font-size: .95rem;
text-transform: uppercase;
color: var(--text-mute);
letter-spacing: .04em;
}
.pay-method-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: .9rem;
}
.pay-method {
min-height: 70px;
display: grid;
place-items: center;
padding: .65rem;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.pay-method:hover {
background: rgba(17, 24, 39, .04);
}
.pay-method.is-selected {
background: rgba(197, 255, 62, .32);
box-shadow: inset 0 0 0 2px var(--lime);
}
.pay-method:focus-visible {
outline: 2px solid var(--indigo);
outline-offset: 3px;
}
.pay-method img {
width: 82px;
height: 44px;
object-fit: contain;
display: block;
}
.pay-method__fallback {
width: 82px;
height: 44px;
border-radius: 6px;
background: var(--lime);
display: grid;
place-items: center;
color: #172018;
font-weight: 800;
}
.pay-modal__loading,
.pay-modal__empty,
.pay-inline__loading,
.pay-inline__empty {
padding: 1rem;
border: 1px solid rgba(17, 24, 39, .1);
border-radius: 8px;
color: var(--text-mute);
}
.pay-inline__error {
color: #b91c1c;
font-weight: 700;
}
body.pay-modal-open { overflow: hidden; }
/* --- Modals -------------------------------------------------------------- */
#modal-container {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -3;
display: flex;
align-items: flex-start;
justify-content: center;
& .modal {
width: 90%;
max-width: 570px;
z-index: -4;
opacity: 0;
position: relative;
margin-top: -160px;
transition: 0.3s;
}
& .card {
background: var(--bg-0);
width: 100%;
max-width: 480px;
margin-inline: auto;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(0,0,0,0.05);
/* Margin is now handled by body padding to keep it centered */
}
& .card-heading h2 {
text-align: center;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text);
letter-spacing: -0.025em;
}
& .form-group {
margin-bottom: 1.25rem;
position: relative;
}
& .row {
display: flex;
gap: 1rem;
}
& label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-color);
}
& input[type="text"],
input[type="email"],
input[type="password"] {
appearance: unset;
height: 40px;
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
border: 1px solid var(--indigo);
border-radius: 0.5rem;
transition: all 0.2s ease;
outline: none;
background-color: #f9fafb;
}
& select {
appearance: none;
height: 40px;
width: 100%;
font-size: 1rem;
font-family: inherit;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
outline: none;
background: var(--bg-0);
color: var(--text);
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
cursor: pointer;
}
& input:focus {
border-color: var(--input-focus);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
& button[type="submit"] {
width: 100%;
padding: 0.875rem;
margin-top: 1rem;
background-color: var(--indigo);
color: white;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
& button[type="submit"]:hover {
background-color: var(--indigo-deep);
}
& .validation-errors {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
color: #991b1b;
font-size: 0.875rem;
}
& .validation-errors p {
margin-bottom: 0.25rem;
}
& .validation-errors p:last-child {
margin-bottom: 0;
}
& .validation-errors li {
margin-left: 1.2em; /* Adjust this value to reduce/increase gap */
padding-left: 0; /* Remove any default padding */
}
& .mt-1 {
margin-top: 1rem;
}
& .text-center {
text-align: center;
}
& a {
color: var(--primary-color);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s ease;
}
& a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
}
#overlay {
background-color: hsla(0, 0%, 0%, 0.5);
-webkit-backdrop-filter: blur(25px) saturate(140%);
backdrop-filter: blur(25px) saturate(140%);
width: 100%;
height: 100%;
position: fixed;
z-index: -2;
display: flex;
align-items: flex-start;
justify-content: center;
opacity: 1;
top: 0;
}
body:has(#overlay) {
position: absolute;
overflow: hidden;
inset: 0;
}
/* --- Hero ---------------------------------------------------------------- */
.hero {
position: relative;
padding: clamp(5rem, 12vh, 9rem) 0;
background:
radial-gradient(60% 50% at 82% 78%, rgba(203, 247, 13, .22), transparent 60%),
radial-gradient(70% 55% at 18% 22%, rgba(93, 98, 249, .14), transparent 60%),
var(--bg-0);
overflow: hidden;
isolation: isolate;
}
.hero::before {
content: '';
position: absolute; inset: 0; z-index: -1;
background-image:
linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(60% 75% at 50% 38%, #000 0%, transparent 80%);
mask-image: radial-gradient(60% 75% at 50% 38%, #000 0%, transparent 80%);
pointer-events: none;
}
.hero__inner { max-width: 920px; }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero__title {
font-size: clamp(2.6rem, 8vw, 6rem);
font-weight: var(--weight-black);
letter-spacing: -.038em;
line-height: .95;
margin-bottom: 1.5rem;
color: var(--text);
}
.hero__title em {
font-style: normal;
background: linear-gradient(110deg, var(--indigo) 30%, var(--indigo-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__subtitle {
font-size: clamp(1.05rem, 1.6vw, 1.32rem);
color: var(--text-mute);
max-width: 38rem;
line-height: 1.55;
margin-bottom: 2.4rem;
}
.hero__ctas { display: inline-flex; gap: .65rem; flex-wrap: wrap; }
/* --- Hero slideshow ------------------------------------------------------ */
.hero-slides {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-slide {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 92%;
opacity: 0;
animation: hero-slide-fade 42s linear infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }
.hero-slide:nth-child(4) { animation-delay: 21s; }
.hero-slide:nth-child(5) { animation-delay: 28s; }
.hero-slide:nth-child(6) { animation-delay: 35s; }
@keyframes hero-slide-fade {
0% { opacity: 0; }
3.57% { opacity: .18; }
20.24% { opacity: .18; }
23.81% { opacity: 0; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { animation: none; opacity: 0; }
.hero-slide:first-child { opacity: .18; }
}
/* --- Pillars ------------------------------------------------------------- */
.pillars {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--bg-1);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pillars__grid {
display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pillar {
position: relative;
padding: 2rem 1.6rem 1.85rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
min-height: 280px;
transition: border-color var(--tr-base), transform var(--tr-base), box-shadow var(--tr-base);
will-change: transform;
}
.pillar:hover {
border-color: rgba(93, 98, 249, .35);
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px);
}
.pillar__num {
display: inline-block;
align-self: flex-start;
font-size: .72rem;
font-weight: var(--weight-black);
letter-spacing: .14em;
color: var(--indigo);
background: var(--indigo-soft);
padding: .35rem .55rem;
border-radius: var(--radius-sm);
margin-bottom: 1.5rem;
}
.pillar h3 {
font-size: 1.45rem;
font-weight: var(--weight-black);
letter-spacing: -.018em;
margin-bottom: .75rem;
color: var(--text);
}
.pillar p {
color: var(--text-mute);
margin-bottom: 1.5rem;
flex: 1;
line-height: 1.55;
}
/* --- Trainers preview ---------------------------------------------------- */
.trainers-preview {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--bg-0);
}
.trainers-grid {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.trainer-card {
padding: 1.65rem 1.25rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
transition: border-color var(--tr-base), transform var(--tr-base), box-shadow var(--tr-base);
will-change: transform;
}
.trainer-card:hover {
border-color: rgba(93, 98, 249, .35);
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
}
.trainer-card__link {
display: flex;
min-height: 100%;
flex-direction: column;
align-items: center;
color: inherit;
text-decoration: none;
}
.trainer-card__avatar,
.trainer-card__photo {
width: 80px; height: 80px;
border-radius: 50%;
margin: 0 auto 1rem;
object-fit: cover;
}
.trainer-card__avatar {
display: grid; place-items: center;
background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
font-size: 1.5rem;
font-weight: var(--weight-black);
letter-spacing: .03em;
color: #fff;
box-shadow: 0 6px 14px rgba(93, 98, 249, .28);
}
.trainer-card h4 {
font-size: 1rem;
font-weight: var(--weight-bold);
margin-bottom: .35rem;
letter-spacing: -.005em;
}
.trainer-card p {
font-size: .82rem;
color: var(--text-mute);
line-height: 1.45;
margin-bottom: .9rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.trainer-card__more {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-top: auto;
color: var(--indigo);
font-size: .82rem;
font-weight: var(--weight-bold);
}
/* --- CTA strip (dark, brand-purple, lime accent) ------------------------- */
.cta-strip {
position: relative;
padding: clamp(4rem, 8vw, 6.5rem) 0;
background:
radial-gradient(60% 90% at 50% 0%, rgba(203, 247, 13, .14), transparent 60%),
radial-gradient(80% 100% at 50% 100%, rgba(93, 98, 249, .35), transparent 60%),
var(--bg-dark);
color: var(--text-on-dark);
text-align: center;
overflow: hidden;
isolation: isolate;
}
.cta-strip::before {
content: '';
position: absolute; inset: 0; z-index: -1;
background-image:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 0%, transparent 80%);
mask-image: radial-gradient(60% 80% at 50% 50%, #000 0%, transparent 80%);
pointer-events: none;
}
.cta-strip h2 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: var(--weight-black);
letter-spacing: -.028em;
line-height: 1.05;
margin-bottom: 1rem;
color: #fff;
}
.cta-strip h2 em {
font-style: normal;
color: var(--lime-2);
}
.cta-strip p {
color: var(--text-on-dark-mute);
max-width: 36rem;
margin: 0 auto 2rem;
font-size: 1.05rem;
line-height: 1.55;
}
.cta-strip__ctas {
display: inline-flex; gap: .65rem;
flex-wrap: wrap; justify-content: center;
}
/* --- Footer -------------------------------------------------------------- */
.site-footer {
background: var(--bg-1);
border-top: 1px solid var(--line);
padding: 4rem 0 1.5rem;
color: var(--text-mute);
font-size: .9rem;
}
.footer-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1.5fr 1fr 1fr;
margin-bottom: 3rem;
}
.footer-col h5 {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 1rem;
font-weight: var(--weight-bold);
}
.footer-col ul {
display: flex; flex-direction: column;
gap: .55rem;
}
.footer-col a:hover { color: var(--indigo); }
.footer-col--brand p { line-height: 1.55; max-width: 28rem; }
.footer-bottom {
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
font-size: .8rem;
color: var(--text-faint);
}
.footer-legal {
display: inline-flex; gap: 1.25rem;
}
.footer-legal a:hover { color: var(--indigo); }
@media (max-width: 760px) {
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: .5rem; }
}
/* --- Cookie banner ------------------------------------------------------- */
.cookie-banner {
position: fixed;
left: 1rem; right: 1rem; bottom: 1rem;
z-index: 100;
max-width: 540px;
margin-left: auto; margin-right: auto;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1rem 1.15rem;
display: flex; align-items: center; gap: 1rem;
flex-wrap: wrap;
box-shadow: var(--shadow-lg);
font-size: .85rem;
transform: translateY(140%);
opacity: 0;
transition: transform var(--tr-slow), opacity var(--tr-slow);
will-change: transform, opacity;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner p {
color: var(--text-mute);
flex: 1 1 220px;
line-height: 1.5;
}
.cookie-banner__more {
color: var(--indigo);
text-decoration: underline;
text-underline-offset: 3px;
font-size: .8rem;
font-weight: var(--weight-medium);
}
.cookie-banner__more:hover { color: var(--indigo-deep); }
/* --- Inner page hero (memberships, passes, pt, etc.) --------------------- */
.page-hero {
position: relative;
padding: clamp(4rem, 8vh, 6rem) 0 clamp(3rem, 6vw, 4rem);
background:
radial-gradient(60% 50% at 78% 80%, rgba(203, 247, 13, .14), transparent 60%),
radial-gradient(60% 50% at 22% 20%, rgba(93, 98, 249, .10), transparent 60%),
var(--bg-1);
border-bottom: 1px solid var(--line);
text-align: center;
overflow: hidden;
}
.page-hero__inner { max-width: 760px; margin: 0 auto; }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 {
font-size: clamp(2.4rem, 6vw, 4.5rem);
font-weight: var(--weight-black);
letter-spacing: -.032em;
line-height: 1.02;
margin-bottom: 1.25rem;
color: var(--text);
}
.page-hero h1 em {
font-style: normal;
background: linear-gradient(110deg, var(--indigo) 30%, var(--indigo-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.page-hero p {
color: var(--text-mute);
font-size: clamp(1rem, 1.4vw, 1.18rem);
max-width: 38rem;
margin: 0 auto;
line-height: 1.55;
}
/* --- Pricing grid + tier cards ------------------------------------------ */
.pricing {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.pricing-grid {
display: grid;
gap: 1.25rem;
align-items: stretch;
}
.pricing-grid--three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pricing-grid--four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1100px) {
.pricing-grid--four { grid-template-columns: repeat(4, 1fr); }
}
.tier-card {
position: relative;
padding: 2.25rem 1.7rem 2rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
will-change: transform;
}
.tier-card:hover {
border-color: rgba(93, 98, 249, .35);
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px);
}
.tier-card--featured {
border-color: var(--indigo);
border-width: 2px;
padding: 2.4rem 1.7rem 2rem;
box-shadow: var(--shadow-md);
}
.tier-card--featured:hover { box-shadow: var(--shadow-card-hover); }
.tier-card__badge {
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
background: var(--lime-2);
color: var(--text);
padding: .35rem .8rem;
border-radius: var(--radius-pill);
font-size: .68rem;
font-weight: var(--weight-black);
letter-spacing: .15em;
text-transform: uppercase;
white-space: nowrap;
}
.tier-card__head { margin-bottom: 1.25rem; }
.tier-card__name {
font-size: 1.55rem;
font-weight: var(--weight-black);
letter-spacing: -.02em;
margin-bottom: .35rem;
color: var(--text);
}
.tier-card__tagline {
color: var(--text-mute);
font-size: .92rem;
line-height: 1.4;
min-height: 2.5em;
}
.tier-card__price {
display: flex;
align-items: baseline;
color: var(--text);
font-size: clamp(2.4rem, 4vw, 3rem);
font-weight: var(--weight-black);
letter-spacing: -.035em;
line-height: 1;
margin-bottom: .35rem;
}
.tier-card__currency {
font-size: 1.2rem;
font-weight: var(--weight-bold);
color: var(--text-mute);
margin-right: .15rem;
align-self: flex-start;
margin-top: .35rem;
}
.tier-card__cents {
font-size: 1.3rem;
font-weight: var(--weight-bold);
color: var(--text-mute);
letter-spacing: 0;
margin-left: .05rem;
}
.tier-card__per {
font-size: .85rem;
font-weight: var(--weight-medium);
color: var(--text-mute);
margin-left: .35rem;
letter-spacing: 0;
}
.tier-card__contract {
font-size: .72rem;
color: var(--text-faint);
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: var(--weight-medium);
}
.tier-card__features {
flex: 1;
margin-bottom: 1.75rem;
display: flex; flex-direction: column;
gap: .65rem;
}
.tier-card__features li {
position: relative;
padding-left: 1.65rem;
font-size: .9rem;
line-height: 1.45;
color: var(--text);
}
.tier-card__features li::before {
content: '';
position: absolute;
left: 0; top: .25rem;
width: 16px; height: 16px;
background: var(--indigo);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.tier-card--featured .tier-card__features li::before { background: var(--lime-deep); }
.tier-card__desc {
color: var(--text-mute);
font-size: .9rem;
line-height: 1.5;
margin-bottom: 1.75rem;
flex: 1;
}
.tier-card__cta { width: 100%; }
.tier-card--gift .tier-card__desc {
flex: 0;
margin-bottom: 1.25rem;
}
.tier-card--gift > .tier-card__cta {
margin-top: auto;
}
.gift-card-modal {
width: min(520px, calc(100% - 2rem));
max-height: min(720px, calc(100vh - 2rem));
overflow: auto;
border: 1px solid rgba(17, 24, 39, .12);
border-radius: var(--radius-lg);
background: var(--bg-0);
box-shadow: var(--shadow-lg);
margin: auto;
padding: 1.5rem;
color: var(--text);
}
.gift-card-modal::backdrop {
background: rgba(14, 18, 32, .58);
}
.gift-card-modal__close {
position: absolute;
top: .85rem;
right: .85rem;
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(17, 24, 39, .14);
border-radius: var(--radius-md);
background: #fff;
color: var(--text);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.gift-card-modal__title {
margin: 0;
padding-right: 2.5rem;
font-size: 1.35rem;
line-height: 1.2;
}
.gift-card-modal__sub {
margin: .45rem 2.5rem 1.1rem 0;
color: var(--text-mute);
font-size: .92rem;
line-height: 1.5;
}
.gift-card-form {
display: grid;
gap: .75rem;
margin: 0;
}
.gift-card-form label {
display: grid;
gap: .3rem;
color: var(--text-mute);
font-size: .78rem;
font-weight: var(--weight-medium);
}
.gift-card-form input,
.gift-card-form textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
background: var(--bg-0);
color: var(--text);
font: inherit;
padding: .62rem .7rem;
}
.gift-card-form textarea {
resize: vertical;
min-height: 76px;
}
.gift-card-form input:focus,
.gift-card-form textarea:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(93,98,249,.18);
}
/* --- Info strip (3-up cards under pricing) ------------------------------- */
.info-strip {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--bg-1);
border-top: 1px solid var(--line);
}
.info-strip .section-header {
margin-left: auto; margin-right: auto;
text-align: center;
}
.info-strip .section-header .eyebrow { justify-content: center; }
.info-strip__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.info-card {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.85rem 1.75rem;
}
.info-card__icon {
width: 40px; height: 40px;
background: var(--indigo-soft);
color: var(--indigo);
border-radius: var(--radius-md);
display: grid; place-items: center;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: var(--weight-black);
line-height: 1;
}
.info-card h3 {
font-size: 1.18rem;
font-weight: var(--weight-bold);
margin-bottom: .5rem;
letter-spacing: -.012em;
}
.info-card p {
color: var(--text-mute);
font-size: .92rem;
line-height: 1.55;
}
/* --- On-dark eyebrow + lime headline em (used inside .cta-strip) -------- */
.cta-strip .eyebrow,
.eyebrow--on-dark {
color: var(--lime-2);
margin-bottom: 1rem;
justify-content: center;
}
.cta-strip .eyebrow::before,
.eyebrow--on-dark::before {
background: var(--lime-2);
}
/* --- Full trainers page (larger cards, full bios) ------------------------ */
.trainers-page {
padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.trainers-page__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 980px) {
.trainers-page__grid { grid-template-columns: repeat(3, 1fr); }
}
.trainer-card--lg {
padding: 2.25rem 1.65rem 2rem;
}
.trainer-card__avatar--lg,
.trainer-card__photo--lg {
width: 112px; height: 112px;
margin-bottom: 1.25rem;
}
.trainer-card__avatar--lg {
font-size: 2rem;
box-shadow: 0 10px 22px rgba(93, 98, 249, .28);
}
.trainer-card__name-lg {
font-size: 1.25rem;
font-weight: var(--weight-black);
letter-spacing: -.012em;
margin-bottom: .85rem;
color: var(--text);
}
.trainer-card__bio {
color: var(--text-mute);
font-size: .92rem;
line-height: 1.55;
/* No line clamp — show full bio on the dedicated trainers page. */
}
.trainer-detail {
padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.25rem, 6vw, 4.5rem);
background: var(--bg-0);
}
.trainer-detail__back {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
color: var(--text-mute);
font-size: .9rem;
font-weight: var(--weight-bold);
transition: color var(--tr-base), transform var(--tr-base);
}
.trainer-detail__back:hover {
color: var(--indigo);
transform: translateX(-3px);
}
.trainer-detail__hero {
display: grid;
min-height: clamp(560px, 72vh, 760px);
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--bg-dark);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: var(--shadow-lg);
}
.trainer-detail__copy {
display: flex;
flex-direction: column;
justify-content: end;
padding: clamp(2rem, 6vw, 5rem);
color: var(--text-on-dark);
}
.trainer-detail__copy h1 {
max-width: 780px;
margin: .85rem 0 1rem;
font-size: clamp(3rem, 9vw, 7.6rem);
line-height: .9;
letter-spacing: -.045em;
}
.trainer-detail__copy p {
max-width: 760px;
color: var(--text-on-dark-mute);
font-size: clamp(1.02rem, 2vw, 1.28rem);
line-height: 1.68;
}
.trainer-detail__portrait {
display: grid;
min-height: 360px;
place-items: center;
background: #f1f1f1;
}
.trainer-detail__portrait img {
width: 100%;
height: 100%;
max-height: 720px;
object-fit: cover;
object-position: center top;
}
.trainer-detail__avatar {
display: grid;
width: clamp(150px, 20vw, 240px);
height: clamp(150px, 20vw, 240px);
place-items: center;
border-radius: 50%;
background: var(--indigo);
color: #fff;
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: var(--weight-black);
}
.trainer-booking {
padding: 0 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.trainer-booking__inner {
display: grid;
gap: 1.25rem;
align-items: center;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.trainer-booking h2 {
margin-bottom: .35rem;
font-size: clamp(1.5rem, 3vw, 2.2rem);
letter-spacing: -.018em;
}
.trainer-booking p {
max-width: 720px;
color: var(--text-mute);
line-height: 1.6;
}
.trainer-booking__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
@media (min-width: 980px) {
.trainer-detail__hero {
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
}
.trainer-detail__portrait {
min-height: 100%;
}
.trainer-booking__inner {
grid-template-columns: minmax(0, 1fr) auto;
}
.trainer-booking__actions {
justify-content: flex-end;
}
}
@media (max-width: 640px) {
.trainer-detail__hero {
min-height: 0;
}
.trainer-detail__copy {
order: 2;
padding: 1.5rem;
}
.trainer-detail__portrait {
order: 1;
min-height: 340px;
}
.trainer-detail__copy h1 {
font-size: clamp(2.65rem, 18vw, 4.5rem);
}
.trainer-booking__actions .btn {
width: 100%;
}
}
/* --- Info strip alt (lighter background to break repetition) ------------- */
.info-strip--alt {
background: var(--bg-0);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.info-card__icon--lime {
background: rgba(203, 247, 13, .25);
color: var(--lime-deep);
}
/* --- Stacked callouts (used on PT, classes pages) ------------------------ */
.callout-stack {
display: flex; flex-direction: column;
gap: .75rem;
margin-top: 2.5rem;
max-width: 820px;
}
.callout {
background: var(--indigo-soft);
border: 1px solid rgba(93, 98, 249, .25);
border-radius: var(--radius-lg);
padding: 1.1rem 1.4rem;
color: var(--text);
line-height: 1.55;
font-size: .95rem;
}
.callout strong { font-weight: var(--weight-bold); color: var(--indigo-deep); }
.callout--warning {
background: #fff7ed;
border-color: rgba(217, 119, 6, .35);
margin-bottom: 2rem;
}
.callout--warning strong { color: #b45309; }
/* --- Contact section ----------------------------------------------------- */
.contact-section {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.contact-grid {
display: grid; gap: 1.25rem;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) {
.contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
padding: 2rem 1.85rem;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.contact-card h3 {
font-size: 1.25rem;
font-weight: var(--weight-bold);
margin-bottom: 1.5rem;
letter-spacing: -.012em;
}
.contact-list {
display: flex; flex-direction: column; gap: 1.15rem;
}
.contact-list > div { display: block; }
.contact-list dt {
font-size: .68rem;
font-weight: var(--weight-bold);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: .25rem;
}
.contact-list dd {
font-size: 1rem;
color: var(--text);
}
.contact-list dd a { transition: color var(--tr-base); }
.contact-list dd a:hover { color: var(--indigo); }
.contact-list--hours dd {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
font-weight: var(--weight-medium);
}
/* --- FAQ accordion ------------------------------------------------------- */
.faq-section {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.faq-list {
display: flex; flex-direction: column;
gap: .65rem;
max-width: 820px; margin: 0 auto;
}
.faq-item {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: border-color var(--tr-base), box-shadow var(--tr-base);
}
.faq-item[open] {
border-color: rgba(93, 98, 249, .35);
box-shadow: var(--shadow-md);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.15rem 1.35rem;
font-weight: var(--weight-bold);
font-size: 1rem;
color: var(--text);
user-select: none;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
letter-spacing: -.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-size: 1.5rem;
font-weight: var(--weight-medium);
color: var(--indigo);
line-height: 1;
transition: transform var(--tr-base);
flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
padding: 0 1.35rem 1.35rem;
color: var(--text-mute);
line-height: 1.6;
font-size: .95rem;
}
/* --- Long-form text (privacy, terms) ------------------------------------- */
.long-form {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
background: var(--bg-0);
}
.long-form__inner { max-width: 760px; margin: 0 auto; }
.long-form h2 {
font-size: 1.4rem;
font-weight: var(--weight-bold);
letter-spacing: -.018em;
margin-top: 2.5rem;
margin-bottom: .85rem;
color: var(--text);
}
.long-form > .callout + h2 { margin-top: 2rem; }
.long-form p {
color: var(--text-mute);
line-height: 1.7;
margin-bottom: 1rem;
font-size: 1rem;
}
.long-form ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.long-form ul li {
list-style: disc;
color: var(--text-mute);
line-height: 1.55;
margin-bottom: .35rem;
}
/* =========================================================================
Member portal (mp-*) — authenticated layout chrome.
Header + sidebar shell, dashboard cards, profile/orders/privacy pages.
========================================================================= */
.theme-member {
background: var(--bg-1);
min-height: 100vh;
}
.mp-header {
background: transparent;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 50;
}
.mp-header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 68px; gap: 1rem;
}
.mp-header__rhs { display: inline-flex; align-items: center; gap: 1rem; }
.mp-userchip {
display: inline-flex; align-items: center; gap: .55rem;
padding: .3rem .7rem .3rem .35rem;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--bg-0);
text-decoration: none;
transition: border-color .15s, background .15s;
}
a.mp-userchip:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.mp-userchip__initials {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--indigo); color: #fff;
border-radius: 50%;
font-size: .72rem; font-weight: var(--weight-bold);
letter-spacing: .03em;
}
.mp-userchip__name {
font-size: .85rem; font-weight: var(--weight-medium);
color: var(--text);
max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 38px; height: 38px; padding: 0 6px;
border-radius: var(--radius-md);
border: 1px solid var(--line-strong);
}
.mp-nav-toggle span {
display: block; height: 2px; background: var(--text);
border-radius: 2px; width: 26px;
transition: transform var(--tr-base), opacity var(--tr-base);
}
body.mp-nav-open .mp-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mp-nav-open .mp-nav-toggle span:nth-child(2) { opacity: 0; }
body.mp-nav-open .mp-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mp-shell {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding-block: 1.5rem clamp(2rem, 5vw, 3.5rem);
}
.mp-sidenav {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: .75rem;
align-self: start;
display: none;
}
.mp-sidenav.is-open { display: block; position: fixed; width: calc(100vw - 1.5rem - 5vw); }
.mp-sidenav.is-open + #main { filter:blur(4px); z-index: -1; pointer-events: none; }
.mp-sidenav__nav { display: flex; flex-direction: column; gap: .15rem; }
.mp-sidenav__link {
display: flex; align-items: center;
padding: .75rem 1rem;
border-radius: var(--radius-md);
font-size: .92rem; font-weight: var(--weight-medium);
color: var(--text-mute);
transition: background var(--tr-base), color var(--tr-base);
}
.mp-sidenav__link:hover { background: var(--bg-1); color: var(--text); }
.mp-sidenav__link.is-active {
background: var(--indigo-soft); color: var(--indigo-deep);
font-weight: var(--weight-bold);
}
.mp-sidenav__link--logout {
margin-top: .35rem; border-top: 1px solid var(--line); padding-top: 1rem;
color: var(--text-faint);
}
.mp-sidenav__link--logout:hover { color: var(--text); }
.mp-main { min-width: 0; }
.mp-shell--staff-simple {
display: block;
}
.theme-staff .mp-header__inner,
.theme-trainer .mp-header__inner {
height: auto;
min-height: 68px;
padding-block: .55rem;
}
.bo-header-page-slot {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
margin-inline: 1rem;
text-align: center;
}
.bo-header-page-slot:empty {
display: none;
}
.bo-header-page-slot .mp-page__header {
margin: 0;
min-width: 0;
width: 100%;
}
.bo-header-page-slot .mp-page__header > div {
min-width: 0;
justify-content: center !important;
}
.bo-header-page-slot .mp-page__title {
min-width: 0;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
line-height: 1.05;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bo-header-page-slot .mp-page__sub {
display: none;
}
.bo-header-page-slot .bo-back {
display: inline-block;
margin: 0;
font-size: .78rem;
line-height: 1.2;
}
.bo-user-menu {
position: relative;
}
.bo-user-menu__trigger {
cursor: pointer;
}
.bo-user-menu__trigger::after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--text-faint);
}
.bo-user-menu__panel {
position: absolute;
top: calc(100% + .45rem);
right: 0;
min-width: 150px;
padding: .35rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-0);
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--tr-fast), transform var(--tr-fast), visibility var(--tr-fast);
z-index: 80;
}
.bo-user-menu:hover .bo-user-menu__panel,
.bo-user-menu:focus-within .bo-user-menu__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bo-user-menu__panel a {
display: block;
padding: .65rem .75rem;
border-radius: var(--radius-sm);
font-size: .88rem;
font-weight: var(--weight-medium);
color: var(--text-mute);
}
.bo-user-menu__panel a:hover,
.bo-user-menu__panel a:focus {
background: var(--bg-1);
color: var(--text);
}
@media (max-width: 979px) {
.bo-user-menu .mp-userchip__name {
display: inline-block;
}
.bo-user-menu .mp-userchip {
padding: .3rem .7rem .3rem .35rem;
}
}
@media (max-width: 760px) {
.bo-header-page-slot {
margin-inline: .5rem;
}
.bo-header-page-slot .mp-page__title {
font-size: 1.15rem;
}
.bo-header-page-slot .bo-back,
.bo-role-badge--staff {
display: none;
}
}
@media (min-width: 860px) {
.mp-nav-toggle { display: none; }
.mp-shell {
grid-template-columns: 240px 1fr;
gap: 2rem;
}
.mp-shell--staff-simple {
display: block;
}
.mp-sidenav { display: block; position: sticky; top: 84px; }
}
/* --- Page header (inside member portal) --------------------------------- */
.mp-page__header { margin-bottom: 1.75rem; }
.mp-page__title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--weight-black);
letter-spacing: -.022em;
line-height: 1.15;
margin-bottom: .25rem;
}
.mp-page__sub {
color: var(--text-mute); font-size: .98rem;
}
/* --- Cards / surfaces --------------------------------------------------- */
.mp-card {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: 0 0 5px var(--line-strong);
}
.mp-card__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; margin-bottom: 1rem;
}
.mp-card__title {
font-size: .78rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .12em;
color: var(--text-faint);
}
.mp-card__action {
font-size: .82rem; font-weight: var(--weight-medium);
color: var(--indigo);
}
.mp-card__action[type="button"] {
border: 0;
padding: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
.mp-card__action:hover { text-decoration: underline; }
.mp-empty {
color: var(--text-faint);
font-style: italic; font-size: .92rem;
}
/* --- Member profile modal ---------------------------------------------- */
.profile-modal[hidden] { display: none !important; }
.profile-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 1rem;
}
.profile-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 18, 32, .58);
}
.profile-modal__panel {
position: relative;
width: min(540px, 100%);
max-height: min(720px, calc(100vh - 2rem));
overflow: auto;
background: var(--bg-0);
border: 1px solid rgba(17, 24, 39, .12);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 1.5rem;
}
.profile-modal__close {
position: absolute;
top: .85rem;
right: .85rem;
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(17, 24, 39, .14);
background: #fff;
color: var(--text);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.profile-modal__title {
margin: 0;
padding-right: 2.5rem;
font-size: 1.35rem;
line-height: 1.2;
}
.profile-modal__sub {
margin: .4rem 2.5rem 1rem 0;
color: var(--text-mute);
}
body.profile-modal-open { overflow: hidden; }
/* --- Native member dialogs --------------------------------------------- */
.member-dialog {
position: fixed;
margin: auto;
width: min(540px, calc(100% - 2rem));
max-height: min(720px, calc(100vh - 2rem));
overflow: auto;
border: 1px solid rgba(17, 24, 39, .12);
border-radius: 8px;
background: var(--bg-0);
box-shadow: var(--shadow-lg);
padding: 1.5rem;
}
.member-dialog::backdrop {
background: rgba(14, 18, 32, .58);
}
.member-dialog__close {
position: absolute;
top: .85rem;
right: .85rem;
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(17, 24, 39, .14);
background: #fff;
color: var(--text);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.member-dialog__title {
margin: 0;
padding-right: 2.5rem;
font-size: 1.35rem;
line-height: 1.2;
}
.member-dialog__sub {
margin: .4rem 2.5rem 1rem 0;
color: var(--text-mute);
}
/* --- Dashboard grid ------------------------------------------------------ */
.mp-dashboard__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 720px) {
.mp-dashboard__grid {
grid-template-columns: 1fr 1fr;
}
.mp-dashboard__grid > .mp-membership-card { grid-column: 1 / -1; }
}
/* --- Active membership card (hero of the dashboard) --------------------- */
.mp-membership-card {
position: relative;
color: var(--text-on-dark);
background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo) 60%, #7a3df9 100%);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 3vw, 2.25rem);
overflow: hidden;
box-shadow: 0 18px 38px -12px rgba(8, 15, 220, .35);
}
.mp-membership-card::after {
content: ''; position: absolute; inset: auto -20% -60% auto;
width: 360px; height: 360px;
background: radial-gradient(closest-side, rgba(203, 247, 13, .4), transparent 70%);
pointer-events: none;
}
/* Status moods — an escalating cue so a lapsed membership reads at a glance.
pending (still in grace): indigo base, amber glow. suspended: crimson card. */
.mp-membership-card--pending::after {
background: radial-gradient(closest-side, rgba(251, 191, 36, .42), transparent 70%);
}
.mp-membership-card--suspended {
background: linear-gradient(135deg, #3a2242 0%, #5c2247 55%, #8f2447 120%);
box-shadow: 0 18px 38px -12px rgba(150, 25, 60, .4);
}
.mp-membership-card--suspended::after {
background: radial-gradient(closest-side, rgba(248, 113, 113, .38), transparent 70%);
}
.mp-membership-card--suspended .mp-membership-card__eyebrow { color: #fca5a5; }
.mp-membership-card__row {
display: flex; flex-wrap: wrap; align-items: flex-end;
gap: 1.5rem; justify-content: space-between;
position: relative;
}
.mp-membership-card__eyebrow {
font-size: .7rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .22em;
color: var(--lime-2);
margin-bottom: .55rem;
}
.mp-membership-card__tier {
font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--weight-black);
letter-spacing: -.025em; line-height: 1;
}
.mp-membership-card__since {
margin-top: .85rem;
font-size: .9rem; color: var(--text-on-dark-mute);
}
.mp-membership-card__meta {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 2rem;
min-width: 220px;
}
.mp-membership-card__meta dt {
font-size: .7rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .14em;
color: var(--text-on-dark-mute);
margin-bottom: .25rem;
}
.mp-membership-card__meta dd {
font-size: 1rem; font-weight: var(--weight-medium);
color: var(--text-on-dark);
}
.mp-membership-card__status {
display: inline-flex; align-items: center; gap: .4rem;
padding: .25rem .65rem;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.18);
font-size: .72rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .1em;
color: #fff;
}
.mp-membership-card__status::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--lime-2);
}
.mp-membership-card__status--frozen::before { background: #fbbf24; }
.mp-membership-card__status--pending::before { background: #fbbf24; }
.mp-membership-card__status--cancelled::before,
.mp-membership-card__status--expired::before,
.mp-membership-card__status--suspended::before { background: #f87171; }
.mp-membership-card__note {
margin-top: .6rem;
max-width: 32ch;
font-size: .85rem; line-height: 1.4;
color: rgba(255, 255, 255, .82);
}
.mp-membership-card__note--suspended { color: #fca5a5; }
.mp-membership-empty {
background: var(--bg-0);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 3vw, 2.5rem);
text-align: center;
}
.mp-membership-empty h3 {
font-size: 1.1rem; font-weight: var(--weight-bold);
margin-bottom: .35rem;
}
.mp-membership-empty p { color: var(--text-mute); margin-bottom: 1rem; }
/* --- Wallet card -------------------------------------------------------- */
.mp-wallet__balance {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--weight-black); letter-spacing: -.025em;
line-height: 1;
}
.mp-wallet__currency { color: var(--text-mute); font-weight: var(--weight-bold); }
.mp-wallet__lots {
margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem;
}
.mp-wallet__lot {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem 0; border-top: 1px solid var(--line);
font-size: .88rem;
}
.mp-wallet__lot:first-child { border-top: 0; }
.mp-wallet__lot-label { color: var(--text-mute); }
.mp-wallet__lot-meta { color: var(--text-faint); font-size: .78rem; }
.mp-wallet__lot-amt { font-weight: var(--weight-bold); }
.mp-wallet__lot-amt--expiring { color: #d97706; }
/* --- Bookings list ------------------------------------------------------ */
.mp-bookings { display: flex; flex-direction: column; gap: .85rem; }
.mp-booking {
display: flex; align-items: center; gap: 1rem;
padding: .85rem 1rem;
background: var(--bg-1); border-radius: var(--radius-md);
}
.mp-booking__date {
flex: 0 0 auto;
width: 56px; padding: .35rem .25rem;
background: var(--bg-0); border: 1px solid var(--line);
border-radius: var(--radius-md);
text-align: center;
}
.mp-booking__day {
font-size: 1.1rem; font-weight: var(--weight-black); letter-spacing: -.02em; line-height: 1;
}
.mp-booking__month {
font-size: .65rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .12em;
color: var(--text-mute);
margin-top: .15rem;
}
.mp-booking__body { flex: 1; min-width: 0; }
.mp-booking__title {
font-size: .95rem; font-weight: var(--weight-bold);
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-booking__meta { font-size: .82rem; color: var(--text-mute); }
/* --- Tables ------------------------------------------------------------- */
.mp-table-wrap { overflow-x: auto; }
.mp-table {
width: 100%; border-collapse: collapse;
font-size: .92rem;
}
.mp-table th, .mp-table td {
text-align: left;
padding: .9rem 1rem;
border-bottom: 1px solid var(--line);
}
.mp-table th {
font-size: .72rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .1em;
color: var(--text-faint);
background: var(--bg-1);
}
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table td.is-num, .mp-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.mp-table .mp-pill { display: inline-block; }
.mp-pill {
padding: .15rem .55rem; border-radius: var(--radius-pill);
font-size: .7rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .08em;
background: var(--bg-2); color: var(--text-mute);
}
.mp-pill--paid { background: rgba(34, 197, 94, .15); color: #15803d; }
.mp-pill--pending { background: rgba(251, 191, 36, .18); color: #92400e; }
.mp-pill--failed,
.mp-pill--cancelled { background: rgba(248, 113, 113, .15); color: #b91c1c; }
.mp-pill--refunded { background: rgba(99, 102, 241, .15); color: var(--indigo-deep); }
.mp-panel {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: clamp(1rem, 3vw, 1.35rem);
}
.mp-panel__head {
margin-bottom: 1rem;
}
.mp-panel__head h2 {
margin: 0;
font-size: 1rem;
line-height: 1.25;
}
.mp-detail-list {
display: grid;
gap: .75rem;
margin: 0 0 1.15rem;
}
.mp-detail-list div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--line);
}
.mp-detail-list dt {
color: var(--text-mute);
font-size: .84rem;
}
.mp-detail-list dd {
margin: 0;
font-weight: var(--weight-bold);
text-align: right;
}
/* --- Forms (member portal) ---------------------------------------------- */
.mp-form { display: flex; flex-direction: column; gap: 1.1rem; }
.mp-form__row {
display: grid; grid-template-columns: 1fr; gap: 1.1rem;
}
@media (min-width: 600px) {
.mp-form__row--two { grid-template-columns: 1fr 1fr; }
}
.mp-field { display: flex; flex-direction: column; gap: .35rem; }
.mp-field label {
font-size: .78rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .08em;
color: var(--text-mute);
}
.mp-field input,
.mp-field select,
.mp-field textarea {
width: 100%;
appearance: none;
padding: .7rem .85rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
font-size: 1rem; font-family: inherit;
background: var(--bg-0);
color: var(--text);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.mp-field input,
.mp-field select {
height: 43px;
}
.mp-field textarea {
min-height: 132px;
resize: vertical;
line-height: 1.5;
}
.mp-field input[type="file"] {
padding: .55rem .85rem;
}
.mp-field select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
cursor: pointer;
}
.mp-field input:focus,
.mp-field select:focus,
.mp-field textarea:focus {
outline: none;
border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(93, 98, 249, .18);
}
.mp-field input[readonly] { background: var(--bg-1); color: var(--text-mute); }
.mp-field__hint { font-size: .78rem; color: var(--text-faint); }
.mp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mp-form__group { display: flex; flex-direction: column; gap: .35rem; }
.mp-form__label { font-size: .8rem; font-weight: 600; color: #3f3f46; letter-spacing: .01em; }
.mp-form__input { width: 100%; height: 43px; padding: 0 .75rem;
background: #fafafa; border: 1px solid #e4e4e7; border-radius: 10px;
color: #18181b; font-size: .93rem; font-family: inherit; outline: none;
transition: border-color .15s, box-shadow .15s, background .15s; }
.mp-form__input:focus { background: #ffffff; border-color: #5d62f9;
box-shadow: 0 0 0 3px rgba(93,98,249,.15); }
@media (max-width: 500px) { .mp-form__row { grid-template-columns: 1fr; } }
.mp-form__actions {
display: flex; gap: .75rem; align-items: center;
padding-top: .25rem;
flex-wrap: wrap;
}
.mp-flash {
padding: .85rem 1rem;
border-radius: var(--radius-md);
font-size: .92rem;
margin-bottom: 1.25rem;
}
.mp-flash--ok { background: rgba(34, 197, 94, .12); color: #15803d; }
.mp-flash--err { background: rgba(248, 113, 113, .12); color: #b91c1c; }
.mp-flash--info { background: var(--indigo-soft); color: var(--indigo-deep); }
/* --- Privacy / GDPR cards ----------------------------------------------- */
.mp-privacy-row {
display: grid; grid-template-columns: 1fr; gap: 1rem;
margin-top: 1rem;
}
.mp-privacy-row p { color: var(--text-mute); font-size: .92rem; line-height: 1.55; }
.mp-privacy-row__cta { margin-top: 1rem; }
.mp-privacy-status {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: 1rem;
padding: .35rem .8rem;
background: var(--bg-1); border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: .82rem; color: var(--text-mute);
}
.mp-privacy-status::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--lime-deep);
}
/* =========================================================================
Cart & checkout (public chrome). Reuses the public-site tokens.
========================================================================= */
.cart-section, .checkout-section {
padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(3rem, 6vw, 5rem);
background: var(--bg-1);
}
.commerce-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.25rem;
margin-bottom: 1.35rem;
padding-bottom: 1.15rem;
border-bottom: 1px solid var(--line);
}
.commerce-header h1 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.45rem);
line-height: 1.05;
letter-spacing: 0;
}
.commerce-header p {
max-width: 52ch;
margin: .45rem 0 0;
color: var(--text-mute);
font-size: .95rem;
}
.commerce-header__meta {
align-self: end;
flex: 0 0 auto;
min-width: 132px;
padding: .75rem .9rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-0);
text-align: right;
}
.commerce-header__meta span,
.commerce-header__meta small {
display: block;
}
.commerce-header__meta span {
color: var(--text);
font-weight: var(--weight-bold);
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
}
.commerce-header__meta small {
margin-top: .1rem;
color: var(--text-faint);
font-size: .72rem;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: .08em;
}
.commerce-steps {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: .75rem;
width: min(460px, 100%);
margin: auto;
padding: 0;
list-style: none;
}
.commerce-step,
.commerce-step > a {
display: flex;
align-items: center;
gap: .65rem;
min-width: 0;
}
.commerce-step {
position: relative;
flex: 0 0 auto;
color: var(--text-mute);
font-size: .82rem;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: .06em;
}
.commerce-step:not(:last-child) {
flex: 1 1 auto;
min-width: 0;
}
.commerce-step:not(:last-child)::after {
content: "";
display: block;
flex: 1 1 auto;
height: 2px;
min-width: 28px;
margin-left: .15rem;
border-radius: var(--radius-pill);
background: var(--line-strong);
}
.commerce-step > a {
color: inherit;
text-decoration: none;
}
.commerce-step > a:hover {
color: var(--indigo-deep);
}
.commerce-step__num {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 2px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--bg-0);
color: var(--text-faint);
font-size: .78rem;
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.commerce-step.is-current {
color: var(--text);
}
.commerce-step.is-current .commerce-step__num {
border-color: var(--indigo);
background: var(--indigo);
color: #fff;
}
.commerce-step.is-complete {
color: var(--text);
}
.commerce-step.is-complete::after {
background: var(--lime-deep);
}
.commerce-step.is-complete .commerce-step__num {
border-color: var(--lime-deep);
background: var(--lime);
color: var(--text);
font-size: 0;
}
.commerce-step.is-complete .commerce-step__num::before {
content: "\2713";
font-size: .82rem;
}
@media (max-width: 640px) {
.commerce-header {
align-items: stretch;
grid-template-columns: 1fr;
}
.commerce-header__meta {
width: 100%;
text-align: left;
}
.commerce-steps {
width: 100%;
gap: .55rem;
}
.commerce-step {
font-size: .76rem;
}
.commerce-step:not(:last-child)::after {
min-width: 16px;
}
}
.cart-empty {
background: var(--bg-0);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-lg);
padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
text-align: center;
}
.cart-empty h2 {
font-size: 1.4rem; font-weight: var(--weight-bold);
margin-bottom: .35rem; letter-spacing: -.018em;
}
.cart-empty p { color: var(--text-mute); margin-bottom: 1.25rem; }
.cart-grid {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 920px) {
.cart-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.cart-lines {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td {
text-align: left;
padding: 1rem .85rem;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.cart-table th {
font-size: .7rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .12em;
color: var(--text-faint);
}
.cart-table td.is-num, .cart-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.cart-table tbody tr:last-child td { border-bottom: 0; }
.cart-item__name { font-weight: var(--weight-bold); font-size: 1rem; }
.cart-item__meta { color: var(--text-faint); font-size: .78rem; margin-top: .15rem; }
.cart-qty-form { display: inline-flex; align-items: center; gap: .35rem; }
.cart-qty-input {
width: 60px; padding: .35rem .5rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
text-align: center; font-variant-numeric: tabular-nums;
background: var(--bg-0);
}
.cart-qty-input:focus { outline: none; border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(93,98,249,.18); }
.cart-qty-update {
border: 1px solid var(--line-strong); border-radius: var(--radius-md);
width: 30px; height: 30px;
color: var(--text-mute);
transition: background var(--tr-base), color var(--tr-base);
}
.cart-qty-update:hover { background: var(--bg-1); color: var(--text); }
.cart-remove {
width: 28px; height: 28px; line-height: 1;
border-radius: 50%;
color: var(--text-faint); font-size: 1.2rem;
transition: background var(--tr-fast), color var(--tr-fast);
}
.cart-remove:hover { background: rgba(248,113,113,.14); color: #b91c1c; }
.cart-actions {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 1rem;
margin-top: 1.25rem; padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.cart-clear-btn {
color: var(--text-faint); font-size: .85rem;
text-decoration: underline; text-underline-offset: 3px;
}
.cart-clear-btn:hover { color: #b91c1c; }
.cart-summary {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.5rem;
position: sticky; top: 84px;
}
.cart-summary__title {
font-size: .78rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .12em;
color: var(--text-faint);
margin-bottom: 1rem;
}
.cart-summary__lines { display: flex; flex-direction: column; }
.cart-summary__lines > div {
display: flex; justify-content: space-between;
padding: .55rem 0;
border-top: 1px solid var(--line);
font-size: .92rem;
}
.cart-summary__lines > div:first-child { border-top: 0; }
.cart-summary__lines > div.is-grand {
margin-top: .25rem;
padding-top: .85rem;
border-top: 1px solid var(--line-strong);
font-size: 1.1rem; font-weight: var(--weight-bold);
}
.cart-summary__lines > div.is-discount dd { color: var(--lime-deep); font-weight: var(--weight-bold); }
.cart-summary__lines dt { color: var(--text-mute); }
.cart-summary__lines dd { font-variant-numeric: tabular-nums; }
.cart-summary__cta { width: 100%; margin-top: 1.25rem; }
/* --- Checkout fieldsets ----------------------------------------------- */
.checkout-form { display: flex; flex-direction: column; gap: 1.25rem; }
.checkout-form fieldset {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.5rem;
background: var(--bg-0);
}
.checkout-form legend {
padding: 0 .5rem;
font-size: .78rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .1em;
color: var(--text-faint);
}
.checkout-party-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 760px) {
.checkout-party-grid { grid-template-columns: 1fr 1fr; }
}
.checkout-form fieldset.checkout-info {
padding: 1.15rem 1.25rem;
}
.checkout-detail-list {
display: flex;
flex-direction: column;
gap: .7rem;
margin: 0;
}
.checkout-detail-list > div {
display: grid;
grid-template-columns: minmax(88px, .42fr) 1fr;
gap: .85rem;
align-items: baseline;
}
.checkout-detail-list dt {
font-size: .72rem;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-faint);
}
.checkout-detail-list dd {
margin: 0;
color: var(--text);
font-size: .94rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.checkout-form .row {
display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 600px) {
.checkout-form .row.row--two { grid-template-columns: 1fr 1fr; }
}
.checkout-form label {
display: block;
font-size: .78rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .08em;
color: var(--text-mute);
margin-bottom: .35rem;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"] {
width: 100%; padding: .7rem .85rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
font-size: 1rem; font-family: inherit;
background: var(--bg-0); color: var(--text);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.checkout-form input:focus {
outline: none; border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(93,98,249,.18);
}
.checkout-form input[readonly] { background: var(--bg-1); color: var(--text-mute); }
.checkout-form .field-hint {
font-size: .78rem; color: var(--text-faint); margin-top: .35rem;
}
.wallet-toggle {
display: flex; align-items: flex-start; gap: .85rem;
padding: 1rem; border-radius: var(--radius-md);
background: var(--indigo-soft);
border: 1px solid rgba(93, 98, 249, .25);
}
.wallet-toggle input { margin-top: .25rem; }
.wallet-toggle__title { font-weight: var(--weight-bold); }
.wallet-toggle__desc { color: var(--text-mute); font-size: .9rem; margin-top: .15rem; }
.wallet-toggle__amt { font-variant-numeric: tabular-nums; }
.confirmation-card {
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(2rem, 4vw, 3rem);
text-align: center;
max-width: 680px;
margin: 0 auto;
}
.confirmation-card__check {
width: 64px; height: 64px; line-height: 64px;
border-radius: 50%;
background: rgba(34, 197, 94, .15);
color: #15803d; font-size: 2rem; font-weight: var(--weight-black);
margin: 0 auto 1.25rem;
}
.confirmation-card h1 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: var(--weight-black);
letter-spacing: -.025em;
margin-bottom: .35rem;
}
.confirmation-card p { color: var(--text-mute); margin-bottom: 1rem; }
.confirmation-card dl {
display: inline-grid; grid-template-columns: auto auto;
gap: .65rem 1.5rem;
text-align: left;
margin: 1.5rem auto;
padding: 1.25rem 1.5rem;
background: var(--bg-1); border-radius: var(--radius-md);
}
.confirmation-card dl dt {
font-size: .72rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .1em;
color: var(--text-faint);
}
.confirmation-card dl dd { font-weight: var(--weight-medium); }
/* --- Cart count badge in public header --------------------------------- */
.header-cart-link {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .85rem; font-weight: var(--weight-medium);
color: var(--text-mute); position: relative;
padding: .55rem .85rem;
border-radius: var(--radius-pill);
border: 1px solid var(--line);
transition: color var(--tr-base), border-color var(--tr-base);
}
.header-cart-link:hover { color: var(--text); border-color: var(--line-strong); }
.header-cart-link__count {
position: absolute;
color: var(--indigo);
background: rgba(255, 255, 255, 0.9);
padding: 0px;
border-radius: 50%;
top: 5px;
right: 5px;
font-size: .7rem; font-weight: var(--weight-bold);
line-height: 1.4;
min-width: 18px; text-align: center;
}
/* --- Phase 5: Membership lifecycle --------------------------------------- */
.mp-membership-card__actions {
display: flex; gap: .6rem; flex-wrap: wrap;
margin-top: 1.1rem; padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.15);
}
.mp-tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem; margin-top: .5rem;
}
.mp-tier-card {
display: flex; flex-direction: column; gap: .4rem;
padding: 1.4rem 1.2rem;
background: var(--bg-0); border: 1px solid var(--line);
border-radius: var(--radius-md);
text-decoration: none; color: var(--text);
transition: border-color var(--tr-base), box-shadow var(--tr-base);
}
.mp-tier-card:hover { border-color: var(--indigo); box-shadow: var(--shadow-card-hover); }
.mp-tier-card__name { font-size: 1.1rem; font-weight: var(--weight-bold); letter-spacing: .02em; text-transform: uppercase; }
.mp-tier-card__price { font-size: 1.5rem; font-weight: var(--weight-bold); color: var(--indigo); display: flex; align-items: baseline; gap: .1rem; }
.mp-tier-card__currency { font-size: .9rem; }
.mp-tier-card__cents { font-size: 1rem; }
.mp-tier-card__per { font-size: .8rem; font-weight: 400; color: var(--text-mute); margin-left: .2rem; }
.mp-tier-card__contract { font-size: .78rem; color: var(--text-faint); }
.mp-tier-card__cta { font-size: .82rem; color: var(--indigo); margin-top: auto; padding-top: .6rem; }
.mp-pt-review-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1.5rem;
align-items: start;
max-width: 860px;
}
@media (max-width: 680px) {
.mp-pt-review-layout { grid-template-columns: 1fr; }
.mp-pt-review-layout .mp-pt-venue-card { order: -1; }
}
.mp-pt-venue-card {
position: sticky;
top: 1.5rem;
}
.mp-pt-venue-card__name {
font-size: 1rem; font-weight: var(--weight-bold); color: var(--text);
margin-bottom: .3rem;
}
.mp-pt-venue-card__address {
font-size: .88rem; color: var(--text-mute); line-height: 1.5;
margin-bottom: 1rem;
}
.mp-pt-venue-card__map-link {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .83rem; font-weight: var(--weight-medium);
color: var(--indigo); text-decoration: none;
transition: opacity .15s;
}
.mp-pt-venue-card__map-link:hover { opacity: .75; }
.mp-pt-venue-card__divider { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }
.mp-pt-venue-card__policy-title {
font-size: .75rem; font-weight: var(--weight-bold);
text-transform: uppercase; letter-spacing: .09em;
color: var(--text-faint); margin-bottom: .6rem;
}
.mp-pt-venue-card__policy-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .45rem;
}
.mp-pt-venue-card__policy-list li {
font-size: .82rem; color: var(--text-mute); line-height: 1.45;
display: flex; gap: .5rem;
}
.mp-pt-venue-card__policy-list li::before {
content: '·'; color: var(--indigo); font-weight: bold; flex-shrink: 0;
}
.mp-review-card__agree {
margin: .9rem 0 1rem;
padding: .75rem;
background: var(--indigo-soft);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: .65rem;
}
.mp-review-card__agree .mp-checkbox {
align-items: flex-start;
font-size: .86rem;
line-height: 1.45;
}
.mp-review-card__agree .mp-checkbox input { margin-top: .15rem; }
.mp-review-card__agree a {
color: var(--indigo-deep);
font-weight: var(--weight-bold);
text-decoration: underline;
text-underline-offset: 3px;
}
.mp-review-card__tier-label { font-size: 1.4rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--indigo); margin-bottom: 1rem; }
.mp-review-card__seller {
margin-bottom: 1rem;
padding: .85rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-1);
}
.mp-review-card__seller h2 {
margin: 0 0 .55rem;
font-size: .76rem;
font-weight: var(--weight-bold);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .08em;
}
.mp-review-card__seller dl {
display: grid;
gap: .45rem;
margin: 0;
}
.mp-review-card__seller dl > div {
display: grid;
grid-template-columns: minmax(92px, .35fr) 1fr;
gap: .75rem;
font-size: .86rem;
}
.mp-review-card__seller dt {
color: var(--text-faint);
font-weight: var(--weight-bold);
}
.mp-review-card__seller dd {
margin: 0;
color: var(--text);
overflow-wrap: anywhere;
}
.mp-review-card__lines { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.2rem; }
.mp-review-card__lines > div { display: flex; justify-content: space-between; font-size: .9rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.mp-review-card__lines dt { color: var(--text-mute); }
.mp-review-card__lines dd { font-weight: var(--weight-medium); }
.mp-review-card__wallet { margin-bottom: 1rem; }
.mp-review-card__total { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; margin-bottom: .5rem; border-top: 2px solid var(--line-strong); font-size: 1rem; }
.mp-review-card__total strong { font-size: 1.3rem; font-weight: var(--weight-bold); }
.mp-review-card__actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: .75rem;
margin-top: 1rem;
}
.mp-checkbox { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; }
.mp-checkbox input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--indigo); }
.mp-success-card { max-width: 480px; text-align: center; }
.mp-success-card__icon { width: 3rem; height: 3rem; border-radius: 50%; background: #d1fae5; color: #065f46; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: bold; margin: 0 auto 1rem; }
.mp-success-card__tier { font-size: 1.3rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--indigo); margin-bottom: 1rem; }
.mp-freeze-budget { margin-bottom: 1.2rem; }
.mp-freeze-budget__bar { height: 6px; border-radius: var(--radius-pill); background: var(--bg-2); overflow: hidden; margin-bottom: .4rem; }
.mp-freeze-budget__fill { height: 100%; background: var(--indigo); border-radius: inherit; }
.mp-freeze-budget__label { font-size: .83rem; color: var(--text-mute); }
.mp-freeze-active { padding: .9rem 1rem; background: var(--indigo-soft); border-radius: var(--radius-sm); margin-bottom: 1.2rem; }
.mp-freeze-active p { margin: 0 0 .3rem; font-size: .9rem; }
/* --- Trainer portal ------------------------------------------------------- */
.theme-trainer .mp-userchip__initials { background: var(--lime-deep); color: #0d0e1a; }
.tp-profile-card {
display: grid;
gap: 1.5rem;
}
.tp-profile-card__media {
display: grid;
gap: .75rem;
align-content: start;
}
.tp-profile-card__media img,
.tp-profile-card__avatar {
width: min(260px, 100%);
aspect-ratio: 1;
border-radius: var(--radius-lg);
}
.tp-profile-card__media img {
object-fit: cover;
object-position: center top;
border: 1px solid var(--line);
}
.tp-profile-card__avatar {
display: grid;
place-items: center;
background: var(--indigo-soft);
color: var(--indigo-deep);
font-size: 3rem;
font-weight: var(--weight-black);
}
.tp-profile-card__media p {
max-width: 260px;
color: var(--text-faint);
font-size: .82rem;
line-height: 1.45;
}
@media (min-width: 900px) {
.tp-profile-card {
grid-template-columns: 280px 1fr;
align-items: start;
}
}
.tp-dashboard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .tp-dashboard__grid { grid-template-columns: 1fr; } }
.tp-badge { display: inline-flex; align-items: center; justify-content: center;
min-width: 1.4rem; height: 1.4rem; border-radius: var(--radius-pill);
background: var(--indigo); color: #fff; font-size: .75rem;
font-weight: var(--weight-bold); padding: 0 .35rem; }
.tp-status { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-pill);
font-size: .78rem; font-weight: var(--weight-medium); background: var(--bg-2); color: var(--text); }
.tp-status--booked { background: #d1fae5; color: #065f46; }
.tp-status--cancelled_with_credit { background: #fef3c7; color: #78350f; }
.tp-status--cancelled_forfeit { background: #fee2e2; color: #991b1b; }
.tp-status--completed { background: var(--indigo-soft); color: var(--indigo-deep); }
.tp-status--no_show { background: #f1f5f9; color: #475569; }
.tp-kind-badge { display: inline-block; padding: .2rem .5rem; border-radius: var(--radius-pill);
font-size: .78rem; font-weight: var(--weight-medium); }
.tp-kind-badge--block { background: #fee2e2; color: #991b1b; }
.tp-kind-badge--extra { background: #d1fae5; color: #065f46; }
.tp-add-form { margin-top: .75rem; }
.tp-add-form summary { cursor: pointer; color: var(--indigo); font-size: .9rem;
font-weight: var(--weight-medium); padding: .3rem 0; }
.tp-avail-form { margin-top: .75rem; }
.tp-form-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
.tp-form-row label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem;
font-weight: 600; color: #3f3f46; letter-spacing: .01em; }
.tp-form-row input, .tp-form-row select { height: 43px; padding: 0 .75rem;
background: #fafafa; border: 1px solid #e4e4e7; border-radius: 10px;
color: #18181b; font-size: .93rem; font-family: inherit; outline: none;
transition: border-color .15s, box-shadow .15s, background .15s; }
.tp-form-row input:focus, .tp-form-row select:focus {
background: #ffffff; border-color: #5d62f9; box-shadow: 0 0 0 3px rgba(93,98,249,.15); }
/* --- Member tables (shared: orders + trainer bookings list) -------------- */
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mp-table th { text-align: left; padding: .5rem .75rem; border-bottom: 2px solid var(--line);
color: var(--text-mute); font-weight: var(--weight-medium); white-space: nowrap; }
.mp-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mp-table tbody tr:last-child td { border-bottom: none; }
/* --- PT booking — member side --------------------------------------------- */
.pt-trainer-card { text-align: center; display: grid; grid-template-rows: 1fr .6fr 1fr 35px; }
.pt-trainer-card__photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
margin: 0 auto .75rem; display: block; }
.pt-trainer-card__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--indigo-soft);
color: var(--indigo); font-size: 1.4rem; font-weight: var(--weight-bold);
display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; }
.pt-trainer-card__bio { font-size: .85rem; color: var(--text-mute); margin-bottom: .85rem; }
.pt-slots { display: flex; flex-direction: column; gap: 1.5rem; }
.pt-slots__day { font-weight: var(--weight-semibold) }
.pt-slots__date { font-size: 1rem; font-weight: var(--weight-semibold); margin-bottom: .6rem;
color: var(--text); }
.pt-slots__grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-slot-btn { border: 1.5px solid var(--indigo); border-radius: var(--radius-sm);
background: var(--bg-0); color: var(--indigo); padding: .4rem .9rem;
font-size: .9rem; font-weight: var(--weight-medium); cursor: pointer;
transition: background .15s, color .15s; }
.pt-slot-btn:hover { background: var(--indigo); color: #fff; }
.mp-booking { display: flex; align-items: center; gap: .85rem; padding: .6rem 0;
border-bottom: 1px solid var(--line); }
.mp-booking:last-child { border-bottom: none; }
.mp-booking__cancel { margin-left: auto; }
/* btn--xs size */
.btn--xs { padding: .25rem .6rem; font-size: .78rem; }
/* --- Flash messages ------------------------------------------------------- */
.mp-flash { padding: .65rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
font-size: .9rem; }
.mp-flash--ok { background: #d1fae5; color: #065f46; }
.mp-flash--err { background: #fee2e2; color: #991b1b; }
/* --- Group classes schedule ---------------------------------------------- */
/* Page wrapper */
.cs-wrap { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Page header */
.cs-page-header { margin-bottom: 2rem; }
.cs-page-header__title {
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
font-weight: var(--weight-black);
letter-spacing: -.03em;
line-height: 1.1;
margin-bottom: .3rem;
}
.cs-page-header__sub { color: var(--text-mute); font-size: .975rem; }
/* Week nav */
.cs-nav {
display: flex;
align-items: stretch;
background: var(--bg-0);
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 2.5rem;
}
.cs-nav__arrow {
display: flex;
align-items: center;
gap: .4rem;
padding: .7rem 1.1rem;
text-decoration: none;
color: var(--text);
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
background: transparent;
border: none;
cursor: pointer;
transition: background var(--tr-fast), color var(--tr-fast);
}
.cs-nav__arrow--prev { border-right: 1px solid var(--line); }
.cs-nav__arrow--next { border-left: 1px solid var(--line); }
.cs-nav__arrow--off { opacity: .3; pointer-events: none; }
.cs-nav__arrow:not(.cs-nav__arrow--off):hover { background: var(--indigo); color: #fff; }
.cs-nav__period {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .9rem;
padding: .7rem 1rem;
letter-spacing: -.01em;
}
/* Empty state */
.cs-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 5rem 1rem;
text-align: center;
color: var(--text-mute);
}
.cs-empty svg { opacity: .25; }
.cs-empty p { font-size: 1rem; margin: 0; }
/* Schedule */
.cs-schedule { display: flex; flex-direction: column; }
/* Day section: date stamp (left) + agenda (right) */
.cs-day {
display: grid;
grid-template-columns: 68px 1fr;
gap: 0 1.5rem;
padding-block: 1.75rem;
border-top: 1px solid var(--line);
}
.cs-day:first-child { border-top: none; }
/* Date stamp */
.cs-day__stamp {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding-top: .15rem;
}
.cs-day__weekday {
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-mute);
line-height: 1;
}
.cs-day__num {
font-size: 2.1rem;
font-weight: var(--weight-black);
letter-spacing: -.045em;
line-height: 1;
color: var(--text);
}
.cs-day__month {
font-size: .65rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-mute);
line-height: 1.5;
}
/* Agenda list */
.cs-agenda {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .55rem;
}
/* Session item */
.cs-item {
--fade-to: 1;
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 0 1rem;
align-items: start;
background: var(--bg-0);
border: 1px solid var(--line);
border-left: 4px solid var(--line-strong);
border-radius: var(--radius-md);
padding: .85rem 1rem;
animation: cs-item-in .42s cubic-bezier(.16,1,.3,1) both;
animation-delay: calc(var(--i, 0) * 50ms);
transition: box-shadow var(--tr-base), border-color var(--tr-base);
}
.cs-item:hover { box-shadow: var(--shadow-md); }
/* Kind accent borders */
.cs-item--group_kinesio { border-left-color: var(--indigo); }
.cs-item--small_group { border-left-color: #10b981; }
.cs-item--other { border-left-color: #94a3b8; }
/* States */
.cs-item--rsvped {
background: var(--indigo-soft);
border-color: rgba(93,98,249,.25);
border-left-color: var(--indigo);
}
.cs-item--full { --fade-to: .5; }
/* Time column */
.cs-item__time {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-top: .1rem;
}
.cs-item__from {
font-size: .92rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cs-item__to {
font-size: .7rem;
color: var(--text-mute);
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* Body */
.cs-item__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cs-item__name {
font-weight: 700;
font-size: .95rem;
line-height: 1.25;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cs-item__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .15rem .45rem;
font-size: .78rem;
color: var(--text-mute);
}
.cs-sep { opacity: .5; }
.cs-item__trainer { font-weight: 500; color: var(--text); }
/* Capacity bar */
.cs-item__cap {
height: 3px;
background: var(--bg-2);
border-radius: 99px;
overflow: hidden;
margin-top: .3rem;
}
.cs-item__cap-fill {
height: 100%;
border-radius: 99px;
background: var(--indigo);
transition: width .6s cubic-bezier(.16,1,.3,1);
}
.cs-item--rsvped .cs-item__cap-fill { background: #10b981; }
.cs-item--full .cs-item__cap-fill { background: #ef4444; }
/* CTA column */
.cs-item__cta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .35rem;
flex-shrink: 0;
min-width: 8.5rem;
}
/* Status badges */
.cs-status {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .755rem;
font-weight: 700;
padding: .22rem .6rem;
border-radius: 99px;
white-space: nowrap;
}
.cs-status--ok { background: #d1fae5; color: #065f46; }
.cs-status--full { background: #fee2e2; color: #991b1b; }
.cs-spots {
font-size: .775rem;
font-weight: 600;
color: var(--text-mute);
text-align: right;
}
/* Kind tags */
.cs-kind-tag {
display: inline-block;
padding: .1rem .42rem;
border-radius: 99px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
background: var(--bg-2);
color: var(--text-mute);
white-space: nowrap;
}
.cs-kind-tag--group_kinesio { background: var(--indigo-soft); color: var(--indigo); }
.cs-kind-tag--small_group { background: #d1fae5; color: #065f46; }
/* Buttons (within schedule) */
.cs-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .38rem .8rem;
border-radius: var(--radius-sm);
font-size: .82rem;
font-weight: 600;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background var(--tr-fast), color var(--tr-fast),
border-color var(--tr-fast), transform .12s cubic-bezier(.16,1,.3,1);
}
.cs-btn:active { transform: translateY(1px) scale(.984); }
.cs-btn--primary {
background: var(--indigo);
color: #fff;
border-color: var(--indigo);
}
.cs-btn--primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.cs-btn--ghost {
background: transparent;
color: var(--text-mute);
border-color: var(--line-strong);
}
.cs-btn--ghost:hover { background: var(--bg-1); color: var(--text); }
.cs-btn--outline {
background: transparent;
color: var(--indigo);
border-color: var(--indigo);
}
.cs-btn--outline:hover { background: var(--indigo); color: #fff; }
/* Enter animation */
@keyframes cs-item-in {
from { opacity: 0; transform: translateY(7px); }
to { opacity: var(--fade-to); transform: none; }
}
/* Legacy badge classes kept for my_classes view */
.cs-badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.cs-badge--ok { background: #d1fae5; color: #065f46; }
.cs-badge--full { background: #fee2e2; color: #991b1b; }
.cs-kind-badge { display: inline-block; padding: .15rem .5rem; border-radius: 99px;
font-size: .72rem; font-weight: 600; background: var(--bg-2); color: #374151; }
.cs-kind-badge--group_kinesio { background: var(--indigo-soft); color: #5b21b6; }
.cs-kind-badge--small_group { background: #fef3c7; color: #92400e; }
/* Responsive */
@media (max-width: 40rem) {
.cs-day { grid-template-columns: 52px 1fr; gap: 0 .75rem; padding-block: 1.25rem; }
.cs-day__num { font-size: 1.6rem; }
.cs-item { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .5rem .75rem; padding: .7rem .75rem; }
.cs-item__cta { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; }
.cs-nav__label-text { display: none; }
.cs-nav__arrow { padding: .7rem .85rem; }
}
/* book CTA banner */
.cs-book-cta { display: flex; align-items: center; justify-content: space-between;
gap: 1rem; background: var(--indigo); color: #fff;
border-radius: var(--radius-md); padding: 1.1rem 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.cs-book-cta__text { display: flex; flex-direction: column; gap: .2rem; }
.cs-book-cta__text strong { font-size: 1rem; }
.cs-book-cta__text span { font-size: .85rem; opacity: .85; }
.cs-book-cta .btn--primary { background: #fff; color: var(--indigo); border-color: #fff;
white-space: nowrap; }
.cs-book-cta .btn--primary:hover { background: var(--lime); border-color: var(--lime); color: #1a1a2e; }
/* member my-classes list */
.cs-my-list { display: flex; flex-direction: column; }
.cs-my-row { display: flex; align-items: center; gap: 1rem; padding: .85rem 0;
border-bottom: 1px solid var(--line); }
.cs-my-row:last-child { border-bottom: none; }
.cs-my-row__info { flex: 1; }
.cs-my-row__name { font-weight: 600; margin-bottom: .2rem; }
.cs-my-row__meta { font-size: .82rem; color: #6b7280; }
.cs-my-row__actions { flex-shrink: 0; }
/* --- Reduced motion ------------------------------------------------------ */
/* --- Back-office (staff/admin) ------------------------------------------ */
.bo-role-badge {
display: inline-block;
padding: .15rem .6rem;
border-radius: 99px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
background: var(--indigo);
color: #fff;
}
.bo-role-badge--staff { background: #475569; }
.bo-back { display: inline-block; font-size: .85rem; color: var(--indigo); text-decoration: none;
margin-bottom: .5rem; }
.bo-back:hover { text-decoration: underline; }
.bo-detail-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
margin: -1rem 0 1rem;
}
.bo-detail-actions .bo-back {
margin: 0;
}
.bo-card-title { font-size: .95rem; font-weight: 700; margin-bottom: .85rem; }
h2.bo-card-title { font-size: 1.25rem; border-bottom: 1px solid gray; color: var(--indigo-deep);}
.bo-search-card {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1rem;
}
.bo-search-card .field {
flex: 1;
margin: 0;
}
.bo-search-card__actions {
display: inline-flex;
gap: .5rem;
flex-wrap: wrap;
}
.bo-form-grid {
display: grid;
gap: .75rem;
}
.bo-form-grid--two {
grid-template-columns: 1fr 1fr;
}
.bo-modal[hidden] {
display: none !important;
}
.bo-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 1rem;
}
.bo-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .52);
}
.bo-modal__panel {
position: relative;
z-index: 1;
width: min(100%, 520px);
max-height: min(720px, calc(100vh - 2rem));
overflow: auto;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: 0 28px 72px -24px rgba(15, 23, 42, .45);
}
.bo-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.bo-modal__header h2 {
margin: 0;
font-size: 1.2rem;
line-height: 1.2;
}
.bo-modal__header p {
margin: .2rem 0 0;
color: var(--text-mute);
font-size: .85rem;
}
.bo-modal__close {
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg-0);
color: var(--text);
cursor: pointer;
font-size: 1.35rem;
line-height: 1;
}
.bo-modal__close:hover {
background: var(--bg-1);
}
.bo-modal-form {
padding: 1.25rem;
}
.bo-modal__actions {
display: flex;
justify-content: flex-end;
gap: .5rem;
margin-top: 1.1rem;
}
body.bo-modal-open {
overflow: hidden;
}
.bo-orders-filter {
display: grid;
gap: .9rem;
margin-bottom: 1rem;
}
.bo-orders-filter__presets {
display: flex;
flex-wrap: wrap;
gap: .45rem;
justify-content: center;
}
.bo-filter-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
padding: .45rem .8rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg-0);
color: var(--text-mute);
font-size: .85rem;
font-weight: 700;
text-decoration: none;
transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.bo-filter-chip:hover {
border-color: var(--indigo-soft);
color: var(--text);
}
.bo-filter-chip.is-active {
background: var(--indigo);
border-color: var(--indigo);
color: #fff;
}
.bo-orders-filter__nav {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: .75rem;
align-items: center;
}
.bo-orders-filter__current {
min-height: 2.4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: .35rem .75rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg-1);
text-align: center;
}
.bo-orders-filter__current strong {
font-size: .95rem;
line-height: 1.2;
}
.bo-orders-filter__current span {
font-size: .78rem;
color: var(--text-mute);
}
.bo-orders-filter__quick {
display: flex;
justify-content: flex-end;
}
.bo-orders-summary {
margin-bottom: 1rem;
}
@media (max-width: 1100px) {
.bo-orders-filter__nav {
grid-template-columns: 1fr 1fr;
}
.bo-orders-filter__current {
grid-column: 1 / -1;
grid-row: 1;
}
}
@media (max-width: 640px) {
.bo-search-card {
display: block;
}
.bo-search-card__actions {
margin-top: .75rem;
}
.bo-form-grid--two {
grid-template-columns: 1fr;
gap: 0;
}
.bo-modal__actions {
flex-direction: column-reverse;
}
.bo-modal__actions .btn {
width: 100%;
}
.bo-filter-chip,
.bo-orders-filter__nav .btn {
flex: 1 1 calc(50% - .45rem);
}
.bo-orders-filter__nav {
display: flex;
flex-wrap: wrap;
}
.bo-orders-filter__current {
order: -1;
flex: 1 1 100%;
}
.bo-orders-filter__quick {
justify-content: stretch;
}
.bo-orders-filter__quick .btn {
width: 100%;
}
}
/* Tables */
.bo-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bo-table th { text-align: left; padding: .65rem 1rem; background: var(--bg-1);
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-mute); border-bottom: 1px solid var(--line); }
.bo-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bo-table tr:last-child td { border-bottom: none; }
.bo-table--sm th, .bo-table--sm td { padding: .5rem .75rem; }
.bo-tr-link { cursor: pointer; transition: background var(--tr-fast); }
.bo-tr-link:hover { background: var(--bg-1); }
.bo-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-mute); }
/* Pills */
.bo-pill { display: inline-block; padding: .15rem .55rem; border-radius: 99px;
font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
background: var(--bg-2); color: var(--text-mute); }
.bo-pill--ok { background: #d1fae5; color: #065f46; }
.bo-pill--warn { background: #fef3c7; color: #92400e; }
.bo-pill--info { background: var(--indigo-soft); color: var(--indigo); }
.bo-pill--err { background: #fee2e2; color: #991b1b; }
/* Misc */
.bo-muted { color: var(--text-mute); }
.bo-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Definition list */
.bo-dl { display: grid; grid-template-columns: 120px 1fr; gap: .45rem 1rem;
font-size: .875rem; align-items: baseline; }
.bo-dl dt { color: var(--text-mute); font-weight: 500; }
.bo-dl dd { margin: 0; }
/* Stats grid */
.bo-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.bo-stat { text-align: center; }
.bo-stat__label { font-size: .775rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-mute); margin-bottom: .35rem; }
.bo-stat__value { font-size: 2rem; font-weight: var(--weight-black); letter-spacing: -.04em;
line-height: 1; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.bo-stat__sub { font-size: .78rem; color: var(--text-mute); }
.bo-stat__sub a { color: var(--indigo); text-decoration: none; }
.bo-stat__sub a:hover { text-decoration: underline; }
.bo-stat__value--warn { color: #b45309; }
/* =========================================================================
Staff desk home — /admin/desk
========================================================================= */
/* Quick-action tiles */
.desk-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .85rem;
}
.desk-action {
display: flex;
align-items: center;
gap: .85rem;
padding: 1rem 1.1rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text);
box-shadow: 0 1px 0 rgba(0,0,0,.03);
transition: border-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.desk-action:hover {
border-color: var(--indigo);
transform: translateY(-2px);
box-shadow: 0 12px 26px -16px rgba(93,98,249,.5);
}
.desk-action__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--indigo-soft);
color: var(--indigo);
}
.desk-action__icon svg { width: 22px; height: 22px; }
.desk-action__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.desk-action__label { font-weight: 700; letter-spacing: -.01em; }
.desk-action__sub { font-size: .8rem; color: var(--text-mute); }
/* Primary tile — the most common action (check-in) */
.desk-action--primary {
background: var(--indigo);
border-color: var(--indigo);
color: #fff;
}
.desk-action--primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.desk-action--primary .desk-action__icon { background: rgba(255,255,255,.18); color: #fff; }
.desk-action--primary .desk-action__sub { color: rgba(255,255,255,.78); }
/* Arrears alert card — accent the left edge so it reads as "needs attention" */
.desk-alert { border-left: 3px solid #f59e0b; }
/* Member detail 2-col grid */
.bo-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 48rem) { .bo-detail-grid { grid-template-columns: 1fr; } }
/* Form field (shared back-office + member portal) */
.field { display: grid; gap: .3rem; margin-bottom: .85rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field select, .field textarea {
width: 100%; padding: .6rem .85rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-size: .95rem; font-family: inherit;
background: var(--bg-0); color: var(--text);
outline: none; appearance: none;
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.field select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(93,98,249,.15);
}
.field__help { font-size: .8rem; color: var(--text-mute); }
.field__error { font-size: .8rem; color: #dc2626; }
/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0ms !important;
animation-delay: 0ms !important;
transition-duration: 0ms !important;
}
.pillar:hover, .trainer-card:hover, .btn:hover { transform: none; }
.cs-item { animation: none; opacity: var(--fade-to); transform: none; }
}
/* =========================================================================
QR code page — /members/my_qr
========================================================================= */
.qr-page {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
padding-block: 1.5rem;
max-width: 380px;
margin-inline: auto;
}
.qr-page__title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.02em;
margin: 0;
text-align: center;
}
.qr-page__sub {
margin: -.5rem 0 0;
font-size: .9rem;
color: var(--text-mute);
text-align: center;
}
.qr-card {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
background: #fff;
border: 1px solid var(--border, #e4e4e7);
border-radius: 20px;
padding: 2rem 2rem 1.5rem;
box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 16px 40px -20px rgba(0,0,0,.14);
width: 100%;
}
.qr-card__name {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
}
.qr-card__code {
display: flex;
align-items: center;
justify-content: center;
width: 268px;
height: 268px;
padding: 4px;
background: #fff;
border-radius: 12px;
outline: 2px solid #f0f0f0;
}
.qr-card__code img, .qr-card__code canvas {
display: block;
border-radius: 8px;
}
.qr-card__hint {
font-size: .75rem;
color: var(--text-faint);
margin: 0;
letter-spacing: .04em;
text-transform: uppercase;
}
.qr-regen-form { margin-top: .25rem; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1rem;
background: transparent;
border: 1px solid #d4d4d8;
border-radius: 8px;
font-size: .85rem;
font-weight: 600;
color: var(--text-mute);
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
text-decoration: none;
}
.btn-ghost:hover { border-color: #a1a1aa; color: var(--text); background: #fafafa; }
.btn-ghost--sm { padding: .35rem .8rem; font-size: .8rem; }
/* --- Reusable badge (used in check-in verify too) ----------------------- */
.badge {
display: inline-block;
padding: .25rem .7rem;
border-radius: 99px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .01em;
}
.badge--green { background: #d1fae5; color: #065f46; }
.badge--blue { background: #dbeafe; color: #1e40af; }
.badge--grey { background: #f3f4f6; color: #6b7280; }
/* =========================================================================
Check-in verify page — /checkin/verify/{token}
========================================================================= */
.ci-flash {
padding: .75rem 1rem;
border-radius: 10px;
margin-bottom: 1.25rem;
font-weight: 600;
font-size: .9rem;
}
.ci-flash--ok { background: #d1fae5; color: #065f46; }
.ci-flash--err { background: #fee2e2; color: #991b1b; }
.ci-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 420px;
margin-inline: auto;
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 20px;
padding: 2.25rem 2rem 2rem;
box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 20px 48px -24px rgba(0,0,0,.16);
}
.ci-card__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--indigo, #5d62f9) 0%, #8b5cf6 100%);
color: #fff;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -.02em;
display: flex;
align-items: center;
justify-content: center;
}
.ci-card__name {
font-size: 1.25rem;
font-weight: 700;
color: #18181b;
letter-spacing: -.02em;
margin: 0;
}
.ci-card__email {
font-size: .85rem;
color: #71717a;
margin: -.5rem 0 0;
}
.ci-card__tier { margin-top: -.25rem; }
.ci-stats {
display: flex;
gap: 1.5rem;
border-top: 1px solid #f4f4f5;
border-bottom: 1px solid #f4f4f5;
padding-block: 1rem;
width: 100%;
justify-content: center;
}
.ci-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.ci-stat__val {
font-size: 1.3rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #18181b;
line-height: 1;
}
.ci-stat__lbl { font-size: .72rem; color: #71717a; white-space: nowrap; }
.ci-card__log-form { width: 100%; }
.ci-log-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .875rem 1.5rem;
background: #18181b;
color: #fff;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: 12px;
cursor: pointer;
letter-spacing: -.01em;
transition: background .15s, transform .1s cubic-bezier(.16,1,.3,1);
}
.ci-log-btn:hover { background: #27272a; }
.ci-log-btn:active { transform: translateY(1px) scale(.985); }
.ci-log-btn:disabled {
cursor: not-allowed;
opacity: .65;
transform: none;
}
.ci-log-btn--alt { background: var(--brand, #2BA8AC); }
.ci-log-btn--alt:hover { background: #238f93; }
.ci-log-btn--ghost {
background: #f4f4f5;
color: #27272a;
}
.ci-log-btn--ghost:hover { background: #e4e4e7; }
.ci-error {
text-align: center;
padding: 2rem;
color: #6b7280;
}
.ci-error p { font-size: 1rem; margin-bottom: 1.25rem; }